在線文本編輯器-ueditor實踐

時間 2019-12-10

標籤在線文本編輯器 ueditor 實踐简体版

原文原文鏈接

一、在線文本編輯器的做用？html

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於MIT協議(MIT許可協議之名源自麻省理工學院（Massachusetts Institute of Technology, MIT），又稱「X許可協議」（X License）或「X11許可協議」（X11 License）:被受權人有權利使用、複製、修改、合併、出版發行、散佈、再受權及販售軟件及軟件的副本)，容許自由使用和修改代碼。前端

二、如何引用以及配置？java

1）如何引用？jquery

(1)在html界面上書寫web

在相應的初始化js中使用 var ue = UE.getEditor('editor');便可得到該對象，完成初始化。app

(2)引進的js以下jsp

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

js之間的依賴關係以下ui

'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 );

%>

三、如何使用？

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

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

var htmlcontent=ue.getContent();//獲取編輯器的內容。

ue.setContent(「擦擦擦擦擦擦擦擦擦」);//設置編輯器的內容