在线文本编辑器-ueditor实践

1、在线文本编辑器的作用？

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议(MIT许可协议之名源自麻省理工学院（Massachusetts Institute of Technology, MIT），又称“X许可协议”（X License）或“X11许可协议”（X11 License）:被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本)，允许自由使用和修改代码。

2、如何引用以及配置？

1）如何引用？

(1)在html界面上书写

在相应的初始化js中使用 var ue = UE.getEditor('editor');即可获得该对象，完成初始化。

(2)引进的js如下

       ueditorconfig:"ueditor/ueditor.config",
       ueditorall:"ueditor/ueditor.all",
       ueditorzh:"ueditor/lang/zh-cn/zh-cn",
       ZeroClipboard: "ueditor/third-party/zeroclipboard/ZeroClipboard",

js之间的依赖关系如下

'ueditorconfig': {deps : ['jquery']},
'ueditorall': {deps : ['ueditorconfig']},
'ueditorzh': {deps : ['ueditorall']},

2)如何配置？

Uncaught ReferenceError: ZeroClipboard is not defined的解决方法

ueditor.../third-party/zeroclipboard/ZeroClipboard.js中

if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
} else {
window.ZeroClipboard = ZeroClipboard;
}

替换为

②如果不修改源码，就得在模块加载时做处理了

首先是修改配置

require.config({
    baseUrl: '',
    paths: {
        ZeroClipboard: "./UEditor.../ZeroClipboard"//主要是加这句话
    }
});

然后是在调用这个模块并把模块定义到全局变量

require(['ZeroClipboard'], function (ZeroClipboard) {
    window['ZeroClipboard'] = ZeroClipboard;
});

ueditor中ueditor.config.js文件，修改ueditor地址：var URL = window.UEDITOR_HOME_URL || "http://"+window.location.host+"/hapui/plugins/ueditor/";

ueditor下面的jsp文件夹下的：

config.json文件配置图片、视频、文件等路径，并且在相应的位置建立好相应的文件夹：

"imagePathFormat": "/hapui/img/origami/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

controller.jsp文件配置，java启动类路径：

<%@ page language="java" contentType="text/html; charset=UTF-8"
   import="com.love.life.common.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
   response.setHeader("Content-Type" , "text/html");

   String rootPath = application.getRealPath( "/" );
   String result=new ActionEnter( request, rootPath ).exec();
   System.out.println(result);
   out.write( result );

%>

3、如何使用？

在ueditor中index.html包含了使用的方法。

var ue = UE.getEditor('editor');

var htmlcontent=ue.getContent();//获取编辑器的内容。

ue.setContent(“擦擦擦擦擦擦擦擦擦”);//设置编辑器的内容

来源：oschina

链接：https://my.oschina.net/u/2404345/blog/744014

标签

Ueditor

在线文本编辑、免费