ueditor百度文本编辑器

川长思鸟来 2022-08-12 16:18 269阅读 0赞

一.从官网上下载完整版和jsp版本

地址：http://ueditor.baidu.com/website/download.html

二.将代码部署到实际项目中

1.在WebRoot下新建一个ueditor文件(自己随意取名)，将jsp版本下的所有文件(index.html除外)拷贝到ueditor文件夹下。

2.将完整版中的jsp下src下的com包拷贝到项目中的src下。

3-1新建一个ueditor.jsp文件引入js和css文件：

<SCRIPT type=text/javascript src="<%=path %>/ueditor/ueditor.config.js"></SCRIPT>     
<SCRIPT type=text/javascript src="<%=path %>/ueditor/ueditor.all.js"></SCRIPT>    
<script type="text/javascript" charset="utf-8" src="<%=path %>/ueditor/lang/zh-cn/zh-cn.js"></script>  
<script type="text/javascript">    
window.UEDITOR\_HOME\_URL="<%=path%>/ueditor/";    
</script>   
<LINK rel=stylesheet href="<%=path %>/ueditor/themes/default/css/ueditor.css">

3-2在jsp中追加代码：

<body>    
<DIV id=myEditor style="width:100%;height:100%"></DIV>     
<SCRIPT type=text/javascript>  
var editor = new baidu.editor.ui.Editor(editorConf);     
editor.render("myEditor");  
</SCRIPT>    
</body>  
4.在ueditor/jsp/config.json中修改上传图片的路径：

"imageUrlPrefix": "/WebRoot", /\* 图片访问路径前缀 \*/  
    "imagePathFormat": "/upload/image/\{yyyy\}\{mm\}\{dd\}/\{time\}\{rand:6\}", /\* 上传保存路径,可以自定义保存路径和文件名格式 \*/

5.一个完整的编辑器实例就完成了。

6.jsp中的：window.UEDITOR\_HOME\_URL="<%=path%>/ueditor/";  也可以在ueditor.config.js中进行修改。

var URL=window.UEDITOR\_HOME\_URL || getUEBasePath();  ( getUEBasePath() 修改为：项目名+文件名)

7.控制编辑器要显示的功能按钮(全部功能按钮代码在：ueditor.config.js文件中)

在新建的ueditor.jsp中修改以下代码：

<body>    
<DIV id=myEditor style="width:100%;height:100%"></DIV>     
<SCRIPT type=text/javascript>  
    var editorConf = \{  
        toolbars: \[\[  
            'source', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|',   
            'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',  
            'fontfamily', 'fontsize', '|',  
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',   
            'link', 'unlink', '|', 'simpleupload', 'insertvideo', 'attachment', '|',  
            'horizontal', 'spechars', '|',  
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|'  
        \]\],  
          initialFrameHeight:200  
          
           
    \};  
    var editor = new baidu.editor.ui.Editor(editorConf);     
    editor.render("myEditor");     
</SCRIPT>    
</body>

8.问题：

jdk版本不一样需要更换jar包版本。