在我们的业务中,后台经常会用到富文本编辑器,在这里就简单的说一下编辑器的使用吧,希望对大家有所帮助!

富文本编辑器:作用用于针对图文的混排。

针对当前的项目必须要使用,因为在商品详情中可能会有图片、视频、音乐、地图等等非文字信息。

常见的富文本编辑器有UEditor(UE)、CKeditor…

官网:http://ueditor.baidu.com/website/ 下载之后得到的压缩包文件:

ios加载富文本标签图片 富文本怎么用_html

-软件的版本说明

软件一共会经历四个阶段
①alpha版本:内测版本,找错添加功能;
②beta版本:公测版本;
③RC版本(release candidate):候选版本,软件趋于稳定,主要是排错;
④release版本:发行版本,稳定的版本;

分析demo文件,总结其输出UE编辑器的步骤:
①引入相应的外部文件;
②通过标签的id属性来定义编辑器容器的位置和大小;
③实例化编辑器;

按照刚才的步骤,将UE编辑器整合到add.html中:

①将UE编辑器需要用。

ios加载富文本标签图片 富文本怎么用_html_02


②将刚才的对应的外部文件引入到add.html中去

ios加载富文本标签图片 富文本怎么用_ios加载富文本标签图片_03


③定义容器的位置和大小

ios加载富文本标签图片 富文本怎么用_实例化_04


④实例化编辑器

ios加载富文本标签图片 富文本怎么用_html_05


⑤细节完善操作,美化显示效果

ios加载富文本标签图片 富文本怎么用_方便使用_06

工具按钮如果不是全部都需要用到,则可自己进行定义(配置):

配置文件:ueditor.config.js

如需要定义UE的的配置,可以在实例化编辑器的时候做配置,语法如下:

var ue = UE.getEditor(‘ue’,json格式具体的自定义配置);

ios加载富文本标签图片 富文本怎么用_方便使用_07


如果需要修改UE编辑器的上传路径等配置,则需要修改php目录下的config.json。

ios加载富文本标签图片 富文本怎么用_富文本编辑器_08


从上面的打印结果中可以看出,UE等在线编辑器提交内容是“html源码”里的内容:

ios加载富文本标签图片 富文本怎么用_方便使用_09


以上就是富文本的使用 ?