百度编辑器ueditor的部署和二次开发

最新推荐文章于 2020-11-23 21:19:04 发布

wangchenggong1988

最新推荐文章于 2020-11-23 21:19:04 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangchenggong88/article/details/19999711

介绍了UEditor 1.3.6版本的升级步骤及二次开发过程，包括配置文件路径、自定义功能的实现方法等。

升级：

1.从官网下载最新的1.3.6 jsp utf-8版 http://ueditor.baidu.com/website/download.html

2.借鉴同事（陶总）的思想，可以在baidu_editor下增加一个jsp页面，不妨取名include_all_for_struts_tag.jsp，引用编辑器在使用时所需的js

<script type="text/javascript" >
  var contextPath = "<%=request.getContextPath() %>";
 </script>
 
 
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/baidu_editor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/baidu_editor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/baidu_editor/lang/zh-cn/zh-cn.js"></script>


    <style type="text/css">
        .clear {
            clear: both;
        }
</style>

3.修改ueditor.config.js中的上传请求地址，将图片、文件的上传请求地址修改为servlet处理（改为java处理，修改存储路径时更为灵活）

之后，就可以编辑器就可以使用了，还有一些bug要处理：

a.针对“请等待保存目录就绪”的提示，可以将/dialogs/image/image.html进行修改！把上述image.html中的保存目录写死（saveDir标签）

b.对于发帖后的内容重复两遍的问题：

<%@include file="/baidu_editor/include_all_for_struts_tag.jsp" %>

var editor = UE.getEditor ( "_postEdit" );

</script >

需要把script中的name属性去掉

在web应用中的引用：

1. 把baidu_editor放在WebRoot下；

2. 把ueditor包放在src下（UeditorFileUpload.java/UeditorImageUpload.java/UeditorScrawlUpload.java/Uploader.java）；

3. 把相关jar包放在WEB-INF/lib下（commons-fileupload-1.2.jar）；

4. 修改一系列文件中的配置项：

①修改web.xml ,配置baidu_editor的servlet，处理上传文件和图片；

  
  <!--  百度编辑器文件上传 -->
  <servlet>
     <servlet-name>baiduFileUpload</servlet-name>
     <servlet-class>ueditor.UeditorFileUpload</servlet-class>
   </servlet>
  <servlet-mapping>
     <servlet-name>baiduFileUpload</servlet-name>
     <url-pattern>/baiduFileUpload</url-pattern>
  </servlet-mapping>
  
  <!--  百度编辑器图片上传 -->
   <servlet>
     <servlet-name>baiduImageUpload</servlet-name>
     <servlet-class>ueditor.UeditorImageUpload</servlet-class>
  </servlet>
  <servlet-mapping>
     <servlet-name>baiduImageUpload</servlet-name>
     <url-pattern>/baiduImageUpload</url-pattern>
  </servlet-mapping>

② 可以通过在baidu_editor/ueditor.config.js中去掉toolbars中的一些项来屏蔽一些不用的功能；

③通过编辑器上传的文件的存储路径设置：

在ueditor/Uploader.java中通过修改savePath属性值和getFolder私有方法即可灵活配置文件的保存路径。

5. 在页面上进行引用（见附件4_test_page）：

<html>
<head>
    <title>demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <%@include file="/baidu_editor/include_all_for_struts_tag.jsp" %>

    <style type="text/css">
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div>
    <h1>demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>


</body>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var editor = UE.getEditor('editor');


</script>
</html>

二次开发：

所谓编辑器的二次开发，可以理解为“如何在编辑器中新增一个自定义的功能”,下边以数学公式的开发为例来加以说明（ueditor版本为目前最新的1.3.6）

首先要认清其实质，其实就是在点击图标时触发打开了一个窗口，窗口中的内容为一个自定义的html

然后需要从以下几步去实现：

1.在~/ueditor.config.js中的toolbars数组中新增功能的定义‘math’

其中的“~”代表编辑器的家目录（如ueditor）

,toolbars:[
                   ['//fullscreen', 
                    'source', '|', 'undo', 'redo', '|',
                       'bold',  'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch','autotypeset','blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc', '|',
                       'rowspacingtop', 'rowspacingbottom','lineheight','|',
                       'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                       'directionalityltr', 'directionalityrtl', 'indent', '|',
                       'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|','touppercase','tolowercase','|',
                       'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright','imagecenter', '|',
                       'insertimage', 'emotion','math','attachment', 'map',  'insertframe','highlightcode','template', '|',
                       'horizontal', 'date', 'time', 'spechars','snapscreen', 'wordimage', '|',
                       'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
                       'print', 'preview', 'searchreplace','help']
               ]

2.在~/ueditor.all.js中设置弹窗的基本样式（有无确认按钮）以及相关联的html页面路径

①有无确认按钮的设置：

 var dialogBtns = {
        noOk:['searchreplace', 'help', 'spechars', 'webapp','preview','math','insertvideo','gmap','test'],
        ok:['attachment', 'anchor', 'link', 'insertimage', 'map',  'insertframe', 'wordimage',
             'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'background', 'charts','music']

    };

②相关联的html页面路径的设置：

把自定义的math.html页面放在相应的路径下(它所依赖的js、images、css等也可以放在math.html所在目录下)

    var iframeUrlMap = {
       
        'scrawl':'~/dialogs/scrawl/scrawl.html',
        'math':'~/dialogs/math/math.html',
        
        'charts': '~/dialogs/charts/charts.html'
    };

3.在~/themes/default/css/ueditor.css中对功能的图标和功能对应的窗口大小进行设置

①功能的图标设置：

图标是在~/themes/default/images/icons.gif或icons.png中定义的。各个功能的图标可以是通过设置该图标在整个图标大图中左上方的偏移量来设置的，以math采用的图标为例，它在整图的偏移像素数。

.edui-default .edui-for-math .edui-icon {
background-position: -18px -40px
}

②功能对应的窗口大小设置：

/*math-dialog*/
.edui-default .edui-for-math .edui-dialog-content {
width: 830px;
height: 360px;
}

4.在~/lang/zh-cn/zh-cn.js中可以配置dialog窗口的名称

新增 math:'数学公式'

'labelMap':{
'anchor':'锚点','scrawl':'涂鸦','math':'数学公式'
},

这样一来，刷新页面已经可以编辑器中看到新添的数学公式图标了，

点击后，就能看到830*360大小的弹窗了

剩下的工作就是个性化设计该弹窗页面了，附上ueditor常用的api