【Ueditor】富文本编辑使用

简介: 前提准备: 在http://ueditor.baidu.com/website/官网下载需要使用的版本。(我选用的1.4.3.1最新版本)因为这是以前做过的一个记录,现在移动到博客园保存记录。所有现在最新版本不是这个可能。

前提准备:

http://ueditor.baidu.com/website/官网下载需要使用的版本。(我选用的1.4.3.1最新版本)因为这是以前做过的一个记录,现在移动到博客园保存记录。所有现在最新版本不是这个可能。

 

引入框架js

下载好压缩文件后,解压到conten文件夹下修改文件名为ueditor,如图:

 


在这里需要注意一点,解压完成之后net文件不需要引用只需要里面的app_code文件。

目录介绍:

 

开始使用:

代码引用

在需要引用的界面引用两个文件:

第一个是配置文件。第二个是主文件。(注意:这两个文件不能引用顺序错误)。

创建富文本代码:

显示效果:

 


定制工具栏:

最简单的工具栏:

 

效果:

 

多列显示:

 


具体的我就不写了以下是完整的按钮列表定义:

可参考:http://fex.baidu.com/ueditor/#start-toolbar 

自定义编辑菜单按钮:

 

数据的处理:

数据的存入:

前台使用form表单提交方式:

数据库的读取显示:

使用Ueditor进行显示

使用html标签显示

图片配置显示

ueditor中富文本创建完成后,在功能差不多都可以使用的时候,唯有图片,视频功能需要进行配置,不然会提示后台http配置不正确,此功能暂时不可用。配置图片有两种方法:

第一种:

在全局配置文件config.json文件中。

第二种:

在引用处单独配置:

注意一点很关键,在配置前缀和路径时最好用绝对路径,不然会出现找不到图片。

特别注意

假如重新下载的包,net文件夹下的bin文件最好删除(此文件可有可无),但是他的文件与咱们框架的network.Json程序集不兼容,但是ueditor依赖于此文件,所有建议直接删除使用本框架的即可。

另外下载包的net.sln文件下的地址路径都要与前缀一致,(此处我不是很确定,他有没有起作用,但是修改一致时可以的)。附图:

 


附加配置参考文献:

前端配置:http://fex.baidu.com/ueditor/#start-config

后端配置:http://fex.baidu.com/ueditor/#server-config

 

作者:YanBigFeg —— 颜秉锋

出处:http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!

目录
相关文章
|
JavaScript
安装富文本组件
安装富文本组件
107 1
|
数据采集 Web App开发 搜索推荐
突破目标网站的反爬虫机制:Selenium策略分析
突破目标网站的反爬虫机制:Selenium策略分析
|
10月前
|
存储 弹性计算 固态存储
阿里云服务器按月租用价格是多少,月付收费标准与活动价格参考
阿里云服务器月付租用价格是多少?阿里云服务器既可以月租也可以按年租用,按月可选的时长有1个月到10个月,通常选择较多的是1个月、3个月、6个月时长,目前按月租用价格有经济型e实例4核16G配置10M带宽100G ESSD Entry云盘,月租优惠价70元1个月、210元3个月,如果选择8核32G配置的月付优惠价是160元1个月、480元3个月。本文将详细介绍阿里云服务器的月付收费标准及当前活动价格,帮助您更好地了解在阿里云服务器月付租用价格情况。
|
Web App开发 JavaScript 前端开发
用来用去还是用回了ueditor-Vue富文本编辑器二次扩展
用来用去还是用回了ueditor-Vue富文本编辑器二次扩展
271 11
|
数据管理 测试技术 项目管理
CMMI—集成项目管理(IPM)
CMMI—集成项目管理(IPM)
298 0
|
12月前
|
资源调度 前端开发 JavaScript
安利一款基于canvas/svg的富文本编辑器-支持在线导出PDF、DOCX
高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如DOCX、PDF导出、表格分页等。 丰富的文本编辑功能:支持多种文本编辑操作,如插入表格、分页、性能优化等。
1348 0
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
269 0
|
人工智能 数据管理 Linux
并行文件存储的优势
并行文件存储的优势
356 0