在线文本编辑器-ueditor实践

一、在线文本编辑器的做用？

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

二、如何引用以及配置？

1）如何引用？

(1)在html界面上书写

 <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

在相应的初始化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;   }

 

替换为

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;   }   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 );      %>

三、如何使用？

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

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

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

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