JS-requireJS中使用UEditor的经验总结
来源:互联网 发布:香港阿里云 dns 编辑:程序博客网 时间:2024/06/06 09:13
目前,正在开发的一个项目中,需要用到富文本编辑器,经过一番搜索后,发现用的比较多的是百度前端部门开源的UEditor这个插件,所以就选择了UEditor。
在查阅了官方文档之后,发现引入插件的方法是直接引入的,并没有介绍如何使用require的方式进行引入。
官方文档中demo的例子,如下图所示:
所以只好结合网上的资料,自己去摸索了,大概的步骤如下:
1 下载资源包
由于我们的后端语言是java,所以下载的是jsp版,并且将其放入jsnext/lib文件夹中:
下载的版本:jsp -> UTF-8
ueditor 放置的目录:
2 配置config.js
要在requireJS中引入资源,一般需要在config.js文件中,配置paths,并且声明其依赖的资源
在这里,需要引入的资源有:
- ueditor.config.js,这是配置文件;
- ueditor.all.js,这是主要的文件;
- zeroclipboard.js,这是一个第三方的插件,跟粘贴板有关。单独引入这个文件是因为要解决会出现 zeroclipboard is undefined 的错误,后面会讲到。
- 同时,ueditor.all.js 需要依赖于 ueditor.config.js,所以需要声明二者的依赖关系
3 初始化UEditor
配置了ueditor所需文件的paths和依赖关系之后,需要在页面对应的js文件中去初始化UEditor。比如app.js:
之所以会有
window.zeroclipboard = zeroclipboard;
是因为如果不写这句的话,会出现 zeroclipboard is undefined 的错误。
4 配置ueditor.config.js中的URL
在初始化ueditor后,会出现报错:
错误显示找不到各类文件,而且该引用地址也是不对的。
这里需要对ueditor.config.js中的URL进行配置
注意:此处的URL是配置的构建之后的路径。因为我们项目构建后,会有两个文件夹:
- static:放置静态资源文件,包括js和style两个文件夹。ueditor 中相关的资料都在js/lib文件夹下面。
vm:html文件
因此,我们的URL设置成上面那样。这个地方,需要根据项目的实际情况来配置,不同的人可能是不一样的。
5 最后就需要对后端进行配置
当经过以上四个步骤的配置之后,基本上前端页面上是能够正常显示UEditor的编辑界面的。剩下的就需要后端进行配置了,此处就不展开,毕竟我们只是做前端的。
6 在表单中使用ueditor
6.1 表单提交
将ueditor放在内部即可,同时设置好name,$form.serialize()即可获取其内容
6.2 非空校验
在提交事件中判断内容是否为空,如果为空,则插入错误提示
- JS-requireJS中使用UEditor的经验总结
- 解决:angular js模板中无法使用ueditor的问题
- 使用requirejs管理js
- JSP中Ueditor的使用
- ueditor在使用requirejs时,报ZeroClipboard undefined错误
- ueditor在使用requirejs时,报ZeroClipboard undefined错误
- requirejs的使用
- requireJS的使用
- RequireJs的使用
- JSP中使用UEditor遇到的问题
- laravel5中ueditor的安装和使用
- yii中使用ueditor
- YII 中使用Ueditor
- JSF中使用UEditor
- ThnikPHP中Ueditor使用
- requirejs集成百度编辑器ueditor
- 在requirejs框架中加载js文件
- requirejs优化:使用r.js压缩文件
- spring boot-servlet、filter、listener
- RxLifecycle2.0的简单使用
- 线程间同步的几种方式(了解)
- sourceInsight4 破解笔记(完美破解)
- Eclipse中将子模块项目转换为Maven Project
- JS-requireJS中使用UEditor的经验总结
- java三种验证码Demo的实现
- library与project的通信方式
- JavaEE核心____Java消息服务jms原理和简介
- php的垃圾回收机制——引用计数
- Python3.6:Windows下如何安装matplotlib
- 数组长度变化问题不可忽略
- 操作序列
- SQL Server辅助插件——SQL Prompt