ueditor使用心得

UEditor使用手册

1. 配置jdk 1.6+
2. Apache Tomcat6.0+
3. Ueditor官网下载

 

部署

1. 安装好jdk和apache后，咱们开始部署代码
2. 咱们在apache的安装目录下，找到webapps的这个文件夹，以下图1-1所示，而后咱们将官网上下载的ueditor放到webapps下，官网上下载的代码多是外面包了文件夹，咱们只保留最底层的文件夹，例如图1-2

 

图1-1

 

图1-2

1. 而后咱们在utf8-jsp这个文件夹里建一个新的文件夹WEB-INF，如图1-3所示，它里面包括lib文件夹，同时将jsp文件夹下的lib文件夹下的全部jar包复制到咱们本身新建的WEB-INF下的lib里，如图1-4所示。

 

图1-3

 

图1-4

1. 到这里咱们基本就部署完毕了，这个时候启动tomcat,就是bin文件夹下的startup.bat,这里需注意咱们的nginx是否启动，若是启动必定要关掉，否则tomcat会报错。
2. 若是你不想采用这种方式来配置，那咱们能够用nginx代理来搞这件事，好比我找到了一个域名，以cmpwriter.jd.com为例，我配置了相关信息以下图1-5所示。同时在host文件中添加127.0.0.1。

 

图1-5

 

1. 初始化

咱们在页面引入相关文件，而后利用工厂模式初始化编辑器。

 

1. 配置项更改

Ueditor.config.js中，能够对工具栏想要选择的按钮进行自行选择，同时文件中还有其余配置项能够自行配置，注释很清楚，例如主题配置项，自动保存开启等等，配置的参数通常为默认值，及时注释也会按照默认值来配置。

 

也能够经过实例化时传入参数，这种更好些，例子以下

 

1. 自定义配置按钮

首先咱们将按钮图片放在themes下的images下，而后能够选择在源码中修改，但不建议这种修改方式，此处不过多介绍。能够从新写一个js用作编辑器的配置。以下

 

Showproductwin是对这个按钮进行各类操做的一个函数，我这里是对编辑器内容增长，在这个函数里，必须存在的是参数fn，以及对fn的执行，看到红线框部分的内容实际上是一个字符串。他会执行按钮注册时的方法，将这个字符串经过inserthtml插入到编辑器中，这是最经常使用的方式没有之一。

UEditor提供了registerUI这个接口，能够动态的注入扩展的内容。

uiname,是你为新添加的UI起的名字，这里能够是1个或者多个，“uiname”后者是“uiname1 uiname2 uiname3”。function，是实际你要作的事情，这里提供两个参数，editor是编辑器实例，若是你有多个编辑器实例，那每一个编辑器实例化后，都会调用这个function,而且把editor传进来

uiname,你为ui起的名字，若是前边你添加的是多个的化，这里function会被调用屡次，而且将每个ui名字传递进来.

若是函数返回了一个UI 实例，那这个UI实例就会被默认加到工具栏上。固然也能够不返回任何UI。好比但愿监控selectionchange事件，在某些场景下弹出浮层，这时就不须要返回任何UI.

index,是你想放到toolbar的那个位置，默认是放到最后editorId,当你的页面上有多个编辑器实例时，你想将这个ui扩展到那个编辑器实例上，这里的editorId是给你编辑器初始化时，传入的id,默认是每一个实例都会加入你的扩展

1. 二次开发组件化

好比咱们在编辑器内插入一段商品详情，咱们会发如今删除的时候，并不能直接删除这一块商品详情，由于ueditor将这一部分的内容转换成了html，因此咱们须要给这一部分的内容加上以下属性：

tabindex=“-1”

contenteditable=“false”

ondrag=“return false”

ondragstart=“return false”

而后再是一下你会发现页面元素并无加上，这是由于ueditor对自定义属性标签作了限制，因此咱们去找到ueditor.config.js里找到whitList,找到你想要设置的标签，在后面加上这些属性便可

同时要将阻止div标签变成p标签，UEditor对于进入编辑器中的数据进行的过滤处理。在UEditor中表示段落的标签是p标签，不少的编辑操做都是基于p标签进行的处理。allowDivTransToP: false便可

1. 图片上传路径配置

 

常常会发现已启动的时候疯狂报错，什么后端配置项不正确，图片上传成功但显示不出来，不要怕，很正常。打开上述文件，会发现不少配置项，以下图所示：

 

这里能够一顿配置，imageUrlPrefix的意思就是图片访问路径前缀，若是图片显示不出来就是这个玩意没配对。