富文本編輯器-UEditor

時間  2020-07-19
標籤 文本編輯器 ueditor 简体版
原文   原文鏈接

富文本編輯器-UEditor

1.spspring-boot整合ueditor

1.1.UEditor簡介

UEditor由百度開發
官網 https://ueditor.baidu.com/web...
github https://github.com/fex-team/u...
官方文檔 http://fex.baidu.com/ueditor/...javascript

1.2.下載

官網下載連接 https://ueditor.baidu.com/web...
筆者後端使用JAVA,因此下載 jsp版本,UTF-8版
image.pngphp

開發版下載地址
https://github.com/fex-team/u...css

下載後目錄結構
image.pnghtml

common-fileupload.jar 包存在 ddos 漏洞，請儘快升級到最新的版本，直達連接：Apache fileupload jar
https://commons.apache.org/pr...前端

1.3.添加UEDitor依賴到本地maven庫,

使用eclipse的import
右擊->Import->Install or deploy an aitifact to Maven repository->輸入相關信息java

生成的文件很是全jquery

若是不添加,須要將jar包放到lib下,在pom.xml中引入以下
<dependency>
    <groupId>com.baidu.ueditor</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.1.2</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/lib/ueditor-1.1.2.jar</systemPath>
</dependency>

1.4.spring-boot整合Ueditor

建立spring-boot項目,pom.xml文件以下git

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>1.5.8.RELEASE</version>
</parent>
<packaging>jar</packaging>
<properties>
  <!-- 文件拷貝時的編碼 -->
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <!--繼承spring-boot時纔有效 -->
  <java.version>1.8</java.version>
</properties>
<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <!-- tomcat解析jsp依賴 -->
  <dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
  </dependency>
</dependencies>
<build>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
      <configuration>
        <mainClass>com.Application</mainClass>
      </configuration>
    </plugin>
  </plugins>
</build>

添加依賴 ueditor依賴程序員

<dependency>
  <groupId>commons-codec</groupId>
  <artifactId>commons-codec</artifactId>
</dependency>
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.5</version>
</dependency>
<dependency>
  <groupId>org.json</groupId>
  <artifactId>json</artifactId>
</dependency>
<dependency>
  <groupId>com.baidu.ueditor</groupId>
  <artifactId>ueditor</artifactId>
  <version>1.1.2</version>
</dependency>

將下載後的文件夾名爲ueditor-1.4放到webapps下
在ueditor-1.4下編寫ueditor01.html 內容以下github

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<!--加載編輯器的容器-->
<script id="container" name="content" type="text/plain">
  這裏寫你的初始化內容
</script>
<!--配置文件-->
<script src="ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<!--編輯器源碼文件-->
<script src="ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--實例化編輯器-->
var ue = UE.getEditor('container');
</script>
</body>

</html>

顯示以下

必定要啓動項後端目,須要加載controller.jsp文件
image.png
不啓動項目報錯如以下

image.png
解決辦法有2個,若是不使用先後端分離,要保證jsp有controller.jsp和config.json

1.5.先後端分離

先後端分離目的是爲了刪除tomcat-embed-jasper的依賴
編寫controller

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.baidu.ueditor.ActionEnter;

@Controller
@RequestMapping("ueditor-1.4")
public class UeditorController {
  @RequestMapping("ueditor/controller")
  @ResponseBody
  public void getConfigInfo(HttpServletRequest request, HttpServletResponse response) {
    response.setContentType("application/json;charset=utf-8");
    String rootPath = request.getSession().getServletContext().getRealPath("/");
    try {
      String exec = new ActionEnter(request, rootPath).exec();
      PrintWriter writer = response.getWriter();
      writer.write(exec);
      writer.flush();
      writer.close();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }
}

修改editor.config.js

// 服務器統一請求接口路徑
, serverUrl: URL +"ueditor/controller" /*"jsp/controller.jsp"*/

發送的參數

ueditor-1.4/ueditor/controller?action=config&&noCache=1591844726761

返回的參數

{state:配置文件初始化失敗}

分析源碼

com.baidu.ueditor.ActionEnter.ActionEnter(HttpServletRequest, String)
public ActionEnter(HttpServletRequest request, String rootPath) {
   this.request = request;
   this.rootPath = rootPath;
   this.actionType = request.getParameter("action");
   this.contextPath = request.getContextPath();
   this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI());
}

ConfigManager.getInstance
image.png
ConfigManager的構造方法
image.png
initEnv方法
image.png

看到了沒有到originalPapt同級的文件夾下找config.json
orginPath的值以下

if (contextPath.length() > 0) {
    this.originalPath = this.rootPath + uri.substring(contextPath.length());
} else {
    this.originalPath = this.rootPath + uri;
}

那麼rootPath的是什麼呢?

C:\Users\Administrator\AppData\Local\Temp\tomcat-docbase.3976607370684852948.11025\

uri的值

/litongjava-spring-boot-ueditor/ueditor-1.4/ueditor/controller

contextPath的值

/litongjava-spring-boot-ueditor

解決辦法,獲取靜態目錄做爲rootPath,將config.json放到靜態目錄的ueditor-1.4/ueditor下面
配置成功後返回的數據以下

{"videoMaxSize":102400000,"videoActionName":"uploadvideo","fileActionName":"uploadfile","fileManagerListPath":"/ueditor/jsp/upload/file/","imageCompressBorder":1600,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerListPath":"/ueditor/jsp/upload/image/","fileMaxSize":51200000,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"fileManagerActionName":"listfile","snapscreenInsertAlign":"none","scrawlActionName":"uploadscrawl","videoFieldName":"upfile","imageCompressEnable":true,"videoUrlPrefix":"","fileManagerUrlPrefix":"","catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerActionName":"listimage","snapscreenPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"imageInsertAlign":"none","catcherPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","catcherMaxSize":2048000,"snapscreenUrlPrefix":"","imagePathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerUrlPrefix":"","scrawlUrlPrefix":"","scrawlFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenActionName":"uploadimage","catcherActionName":"catchimage","fileFieldName":"upfile","fileUrlPrefix":"","imageManagerInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"filePathFormat":"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","videoPathFormat":"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","fileManagerListSize":20,"imageActionName":"uploadimage","imageFieldName":"upfile","imageUrlPrefix":"","scrawlInsertAlign":"none","fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"catcherUrlPrefix":"","imageManagerListSize":20,"catcherFieldName":"source","videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"]}

1.6.設置圖片上傳

筆者測試圖片上傳是出現問題如
請求

ueditor/controller?action=uploadimage&encode=utf-8

響應

{state: "未找到上傳數據"}

上傳源碼分析
image.png
image.png

Uploader
image.png
BinaryUploader
image.png

那麼HttpServletRequest到底有沒有數據呢?有數據代碼也沒有問題,可是爲何就是不行呢?
緣由:ueditor自事的fileupload組件與spring的有衝突
解決辦法,使用Servlet
編寫Servlet

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URL;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.baidu.ueditor.ActionEnter;
//使用註解測試無效
//@WebServlet(name = "UEditorServlet", urlPatterns = "/UEditor")
public class UEditorServlet extends HttpServlet {

  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    response.setHeader("Content-Type", "text/html");
    PrintWriter out = response.getWriter();
    ServletContext application = this.getServletContext();
    URL systemResource = ClassLoader.getSystemResource("");
    String rootPath = systemResource.getFile();
    //String rootPath = application.getRealPath("/");

    String action = request.getParameter("action");
    String result = new ActionEnter(request, rootPath).exec();
    if (action != null &&
      (action.equals("listfile") || action.equals("listimage"))) {
      rootPath = rootPath.replace("\\", "/");
      result = result.replaceAll(rootPath, "/");
    }
    out.write(result);
  }
}

  @Bean
  public ServletRegistrationBean servletRegistrationBean() {
    return new ServletRegistrationBean(new UEditorServlet(), "/ueditor-1.4/UEditor");
  }

config.json路徑:srcmainresourcesueditor-1.4config.json
測試上傳文件的,上傳成功,成功後的路徑是targetclassesueditorjspuploadimage20200615
訪問路徑是
默認的訪問路徑是http://127.0.0.1/ueditor/jsp/...
修改config.json中的上傳保存路徑
將/ueditor/jsp/upload替換爲/litongjava-spring-boot-ueditor/ueditor/jsp/upload,一種有8處

1.7.配置參數

傳入自定義的參數
編輯器有不少可自定義的參數項，在實例化的時候能夠傳入給編輯器：
var ue = UE.getEditor('container', {

autoHeight: false

});
配置項也能夠經過 ueditor.config.js 文件修改，具體的配置方法請看前端配置項說明http://fex.baidu.com/ueditor/...

initialFrameHeight: window.screen.availHeight-300,

1.8.設置和讀取編輯器的內容

通 getContent 和 setContent 方法能夠設置和讀取編輯器的內容

//對編輯器的操做最好在編輯器ready以後再作
ue.ready(function() {
    //設置編輯器的內容
    ue.setContent('hello');
    //獲取html內容，返回: <p>hello</p>
    var html = ue.getContent();
    //獲取純文本內容，返回: hello
    var txt = ue.getContentTxt();
});

詳細文檔
UEditor 官網：http://ueditor.baidu.com
UEditor API 文檔：http://ueditor.baidu.com/doc
UEditor Github 地址：http://github.com/fex-team/ue...

2.使用UEditor

2.1.定製工具類圖標

定製工具欄圖標
UEditor 工具欄上的按鈕列表能夠自定義配置,只須要經過修改配置項就能夠實現需求

配置項修改說明
修改配置項的方法：
1.方法一：修改 ueditor.config.js 裏面的 toolbars
2.方法二：實例化編輯器的時候傳入 toolbars 參數
var ue = UE.getEditor('container'{toolbars:[]});
其餘配置項：配置項說明
簡單列表

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold']
]

多行列表

toolbars: [
  ['fullscreen', 'source', 'undo', 'redo'],
  ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]

兩行的例子: 自定義工具欄
工具欄按鈕分割線
配置項裏用豎線 '|' 表明分割線

完整的按鈕列表

toolbars: [
    [
        'anchor', //錨點
        'undo', //撤銷
        'redo', //重作
        'bold', //加粗
        'indent', //首行縮進
        'snapscreen', //截圖
        'italic', //斜體
        'underline', //下劃線
        'strikethrough', //刪除線
        'subscript', //下標
        'fontborder', //字符邊框
        'superscript', //上標
        'formatmatch', //格式刷
        'source', //源代碼
        'blockquote', //引用
        'pasteplain', //純文本粘貼模式
        'selectall', //全選
        'print', //打印
        'preview', //預覽
        'horizontal', //分隔線
        'removeformat', //清除格式
        'time', //時間
        'date', //日期
        'unlink', //取消連接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合併單元格
        'mergedown', //下合併單元格
        'deleterow', //刪除行
        'deletecol', //刪除列
        'splittorows', //拆分紅行
        'splittocols', //拆分紅列
        'splittocells', //徹底拆分單元格
        'deletecaption', //刪除表格標題
        'inserttitle', //插入標題
        'mergecells', //合併多個單元格
        'deletetable', //刪除表格
        'cleardoc', //清空文檔
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代碼語言
        'fontfamily', //字體
        'fontsize', //字號
        'paragraph', //段落格式
        'simpleupload', //單圖上傳
        'insertimage', //多圖上傳
        'edittable', //表格屬性
        'edittd', //單元格屬性
        'link', //超連接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查詢替換
        'map', //Baidu地圖
        'gmap', //Google地圖
        'insertvideo', //視頻
        'help', //幫助
        'justifyleft', //居左對齊
        'justifyright', //居右對齊
        'justifycenter', //居中對齊
        'justifyjustify', //兩端對齊
        'forecolor', //字體顏色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //無序列表
        'fullscreen', //全屏
        'directionalityltr', //從左向右輸入
        'directionalityrtl', //從右向左輸入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段後距
        'pagebreak', //分頁
        'insertframe', //插入Iframe
        'imagenone', //默認
        'imageleft', //左浮動
        'imageright', //右浮動
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //圖片轉存
        'lineheight', //行間距
        'edittip ', //編輯提示
        'customstyle', //自定義標題
        'autotypeset', //自動排版
        'webapp', //百度應用
        'touppercase', //字母大寫
        'tolowercase', //字母小寫
        'background', //背景
        'template', //模板
        'scrawl', //塗鴉
        'music', //音樂
        'inserttable', //插入表格
        'drafts', // 從草稿箱加載
        'charts', // 圖表
    ]
]

2.2.前端配置項說明

實例化時設置配置項

var ue = UE.getEditor('container', {
    toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
    ],
    autoHeightEnabled: true,
autoFloatEnabled: true
});

讀取配置項
讀取配置項能夠經過getOpt方法讀取

var lang = ue.getOpt('lang'); //默認返回：zh-cn

前端配置項說明
UEDITOR_HOME_URL {Path String} [默認值：根據config文件路徑自動獲取] // 爲編輯器實例添加一個路徑，這個不能被註釋,筆者使用的值http://localhost:8080/ueditor-1.4/

2.3.目錄說明

UEditor 下載包有兩個類型: 源碼包 和 部署包
源碼包包含了 UEditor 的源碼、各後臺的代碼和使用的例子

  1. 部署包目錄說明

部署包解壓後的文件目錄結構以下所示
ueditor解壓後的目錄列表
dialogs: 彈出對話框對應的資源和JS文件
lang: 編輯器國際化顯示的文件
php或jsp或asp或net: 涉及到服務器端操做的後臺文件
themes: 樣式圖片和樣式文件
third-party: 第三方插件(包括代碼高亮，源碼編輯等組件）
ueditor.all.js: 開發版代碼合併的結果,目錄下全部文件的打包文件
ueditor.all.min.js: ueditor.all.js文件的壓縮版，建議在正式部署時採用
ueditor.config.js: 編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄
ueditor.parse.js: 編輯的內容顯示頁面引用，會自動加載表格、列表、代碼高亮等樣式,具體看內容展現文檔
ueditor.parse.min.js: ueditor.parse.js文件的壓縮版，建議在內容展現頁正式部署時採用

  1. 源碼包目錄說明

源碼包解壓後的文件目錄結構以下所示
ueditor解壓後的目錄列表
源碼包部分目錄和文件與部署包名稱一致,用途也會是一致,具體說明以下:
_doc: 部分markdown格式的文檔
_example: ueditor的使用例子
_parse: ueditor.parse.js的源碼,parse的用途具體看內容展現文檔
_src: ueditor.all.js的源碼,打包方法看grunt打包文檔
_srccore: ueditor核心代碼
_srcplugins: 插件文件
_srcui: ui相關文件
_srcadapter: 橋接層文件,對接ueditor核心和ui代碼
php: php後臺文件的目錄
phpconfig.json: 後端配置文件,全部先後端相關配置項,都放在這裏
phpcontroller.php: 接收全部請求的接口文件,經過它判斷action參數,分發具體任務給其餘php文件
phpaction_crawler: 撞去遠程文件的代碼,轉存文件使用
phpaction_upload: 上傳圖片、附件、視頻的處理代碼
phpaction_list: 列出在線的圖片或者是附件
phpUpload.class.php: 上傳文件使用的類
jsp: jsp後臺文件的目錄
jspconfig.json: 後端配置文件,全部先後端相關配置項,都放在這裏
jspcontrooler.jsp: 接收全部請求的接口文件
jsplib: 全部用到的jar包,其中的ueditor-*.jar包是ueditor全部後臺相關處理邏輯的工具
jspsrc: lib裏面的uedior-*jar文件的java源碼
asp: asp後臺文件的目錄
net: .net後臺文件的目錄
App_Code: 上的文件是應用程序的源碼。
Bin: 裏面的是應用程序的依賴庫，當前依賴 Newtonsoft 的 Json 庫。Bin 目錄和 App_Code 目錄受應用程序保護，不用擔憂被用戶訪問到。
config.json: 是 UEditor 後端的配置文件，上一節已經介紹了比較重要的配置項。
controller.ashx: 是 UEditor 請求的入口，它把不一樣的 action 分發到不一樣的 Handler 來處理。
net.sln: 是項目的解決方案文件，安裝 Visual Studio 2013 或以上的機器能夠打開進行項目的改造。
README.md: 是net後臺使用文件。
Web.config: 是應用程序的配置文件
dialogs: 同部署包說明
lang: 同部署包說明
themes: 同部署包說明
third-party: 同部署包說明
changelog.md: 各版本的ueditor更新記錄
Gruntfile.js: grunt執行的任務文件,用來把源碼包打包成部署版本,打包方法看grunt打包文檔
LICENSE: 開源協議說明證書,ueditor使用MIT開源協議
ueditor.config.js: 前端配置文件
ueditor.parse.js: 還沒合併時使用的parse文件,會自動加載_parse裏面的文件

2.4.提交表單

1.按照部署編輯器的教程，完成編輯器加載
2.把容器放到form表單裏面，設置好要提交的路徑，以下面代碼中的<form>標籤
3.在script 中添加一個name值

<body>
  <form action="server.php" method="post">
    <!-- 加載編輯器的容器 -->
    <script id="container" name="content" type="text/plain">
      這裏寫你的初始化內容
    </script>
  </form>
  <!-- 配置文件 -->
  <script type="text/javascript" src="ueditor.config.js"></script>
  <!-- 編輯器源碼文件 -->
  <script type="text/javascript" src="ueditor.all.js"></script>
  <!-- 實例化編輯器 -->
  <script type="text/javascript">
    var editor = UE.getEditor('container');
  </script>
</body>

2.5.編輯內容展現

你們使用 UEditor 是爲了讓用戶能在頁面中編輯富文本內容，但這應該只是手段方法。咱們最終的目的是爲了呈現用戶編輯的內容。也就是內容的展現。原來咱們對這塊是不考慮的，只關注在編輯端。但隨着編輯器產出內容的增長和複雜化，好比圖表展現，代碼高亮，自定義的列表標號等等，若是都在最終產出的編輯數據中處理，那勢必會致使產出數據帶有冗餘內容，並且也很大程度上硬編碼了展現時定製效果。基於這些問題，uparse產生了。

1.在下載包中找到ueditor.parse.js
2.根據你的路徑加載uparse.js

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script src="../ueditor.parse.js"></script>
    <title></title>
</head>

將uparse.js記載到頁面，不一樣目錄結構，路徑不一樣.
當加載了uparse.js後，就能夠調用uParse這個函數，執行內容解析了。

//uParse的語法
uParse(cssSelector,[options])
cssSelector，是告訴uParse你將編輯數據放到那個容器裏了，好比你放到一個div裏
<div id="content">
  <p>dsfsdF</p>
  <p>sdsdf</p>
</div>

cssSelector就是#content,如今支持3種格式,tag,id,class.也就是你能夠渲染頁面中多個地方。options是個json對象。基於1.3.5版本，可配置的參數。

{
    rootPath: '', //ueditor所在的路徑，這個要給出，讓uparse能找到third-party目錄
    //由於須要引入目錄下的那些js文件，固然會根據你的編輯數據，按需加載
    liiconpath: 'http://bs.baidu.com/listicon/', //自定義列表標號圖片的地址，默認是這個地址
    listDefaultPaddingLeft: '20' //自定義列表標號與文字的橫向間距
}

通常只要給個rootPath就夠了，其餘的均可以使用默認值。通常在頁面底部加入以下代碼

uParse('.content', {
    rootPath: '../'
})

這個表示對於className是content的容器裏邊的內容進行解析。
完整js以下

<head>
<meta charset="UTF-8">
<title></title>
<script src="ueditor-1.4/ueditor.parse.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="content">
    <p>我是李通</p>
    <p>我是一個90後程序員</p>
</div>
<script type="text/javascript">
uParse('content', {
    rootPaht: './ueditor-1.4'
})
</script>
</body>

顯示以下
image.png

生產環境中確定是從後端獲取內容添加div中進行展現

3.ueditor使用案例

3.1.收集用戶不滿意的緣由

界面內容以下

<!DOCTYPE html>
<html>
<!--
    做者：litongjava@qq.com
    時間：2019-02-21
    描述：收集用戶的不滿意緣由
-->

<head>
<meta charset="UTF-8">
<!--編輯器默認配置文件-->
<script src="../ueditor-1.4/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<!--編輯器源碼文件-->
<script src="../ueditor-1.4/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<!--jquery-->
<script src="../js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--工程變量-->
<script src="../js/project.js" type="text/javascript" charset="utf-8"></script>
<!--base64 client-->
<script src="../js/base64Client.js" type="text/javascript" charset="utf-8"></script>
<!--ajax-->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!--郵箱提示-->
<script src="../js/autofillmail.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
<style>
* {
    font-family: "微軟雅黑";
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

.inputElem {
    height: 22px;
    line-height: 22px;
    border: 1px solid #ff4455;
}

.auto-tip li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #eee;
}

.auto-tip li.hoverBg {
    background: #ddd;
    cursor: pointer;
}

.auto-tip li .em {
    color: #FF0000;
}

.red {
    color: #000000;
}

.hidden {
    display: none;
}

form {
    padding: 15px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    //初始化提示插件
    new EmailAutoComplete({
        parentCls: '.parentemail', // 當前input元素的父級類
        targetCls: '.email', // 目標input元素
    });
}
</script>
</head>

<body>
<form class="layui-form" action="reason" method="post">
    <input type="hidden" name="sessionid" />
    <div class="layui-form-item">
        <label class="layui-form-label">郵箱</label>
        <div class="layui-input-block">
            <div class="parentemail">
                <input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="請輸入郵箱" class="layui-input email">
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="phone">
        <label class="layui-form-label">手機號</label>
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="請輸入手機號" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用戶問題</label>
        <div class="layui-input-block">
            <input type="text" name="userQuestion" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">標準問題</label>
        <div class="layui-input-block">
            <input type="text" name="question" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">答案</label>
        <div class="layui-input-block">
            <textarea placeholder="請輸入內容" name="answer" class="layui-textarea" readonly="readonly"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">緣由</label>
        <div class="layui-input-block">
            <script id="container" name="reason" type="text/plain"></script>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">當即提交</button>
        </div>
    </div>
</form>
</body>
<script src="../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
    layui.form.render();
})
UE.Editor.prototype.placeholder = function(justPlainText) {
    var _editor = this;
    _editor.addListener("focus", function() {
        var localHtml = _editor.getPlainTxt();
        if($.trim(localHtml) === $.trim(justPlainText)) {
            _editor.setContent(" ");
        }
    });
    _editor.addListener("blur", function() {
        var localHtml = _editor.getContent();
        if(!localHtml) {
            _editor.setContent(justPlainText);
        }
    });
    _editor.ready(function() {
        _editor.fireEvent("blur");
    });
};
var ue = UE.getEditor('container');
ue.placeholder("請輸入你不滿意的緣由");
var msg = getQueryVariable("msg");
fill(msg);
var sessionid = getQueryVariable("sessionid");
if(project.dev()) {
    console.log("sessionid=" + sessionid);
}
document.getElementsByName("sessionid")[0].value = sessionid;

/**
 * 獲取http請求參數
 * @param {Object} variable
 */
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for(var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable) { //base64編碼以後包含==號
            var retval = "";
            for(var j = 1; j < pair.length; j++) {
                retval += pair[j];
            }
            retval = decodeURIComponent(retval); //進行URL解碼
            return retval;
        }
    }
    return(false);
}
/**
 * 填充問題和答案
 * @param {Object} msg
 */
function fill(msg) {
    if(!msg) {
        return false;
    }
    var array = msg.split(' '); //split char space
    var userQuestionBase64 = array[2];
    var questionBase64 = array[3];
    var answerBase64 = array[4];
    if(project.dev()) {
        console.log("user question:" + userQuestionBase64);
        console.log("question:" + questionBase64);
        console.log("answer:" + answerBase64);
    }

    base64Client.decode(userQuestionBase64, 'GBK', function(text) {
        document.getElementsByName("userQuestion")[0].value = text;
    });

    base64Client.decode(questionBase64, 'GBK', function(text) {
        document.getElementsByName("question")[0].value = text;
    });

    base64Client.decode(answerBase64, 'GBK', function(text) {
        document.getElementsByName("answer")[0].value = text;
    });
}
$(function() {
    var uri = ajax.getRootName() + "/config/getProjectVariable?key=project.collect.phone";
    ajax.get(uri, function(data) {
        if(data === 'false') {
            $("#phone").hide();
        }
    });
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程