UEditor部署到个人站点

一、下载UEditor

https://ueditor.baidu.com/website/download.html

在以上链接下载,选择自己需要的语言版本,我用的是jsp,就下载jsp版本。将下载的压缩包解压,可以直接将解压的文件导入到Eclipse中自己的项目中,导入到文件夹WebContent中即可。

二、配置

将jsp/lib中的jar包全部复制到WEB-INF/lib下

修改输入字符数统计、上限,自定义工具栏可以参考官方说明文档,配置项可在ueditor.config.js中修改。

修改图片上传路径等在官方说明文档中有详细的介绍。

注:这里仅仅是在一个项目中使用UEditor,还用别的使用方法,也可以直接部署到tomcat中。

三、在页面中插入Ueditor编辑器

首先要引用文件

<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/thirdparts/utf8-jsp/themes/default/css/ueditor.change.css">
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

接着在需要插入编辑器的位置插入以下代码

<textarea id="content" name="content" style="width:100%;height:500px"></textarea>
<script type="text/javascript" charset="utf-8">      
UE.getEditor('content',{toolbars: [[   'fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']]});
</script>

toolbars控制工具栏显示哪些工具

textarea是显示编辑器的容器,其id与UE.getEditor(‘id’,{})要一致。

不一定要是textarea,div等都可以,可以自己试一试,我没有深入研究,凑合着用了。

Leave a Reply