UEditor問題整理

時間 2019-12-18

標籤 ueditor 問題整理简体版

原文原文鏈接

　　網上可使用的富文本編輯器有不少，可是通過慎（sui）重（shou）思（yi）考（cha），選擇了UEditor，畢竟是百度的東西，質量上應該經得起推敲，另外，使用別人的插件，總要去適應別人的編碼習慣，或者掉進別人的坑裏。既然都是要繞坑甚至填坑，索性選擇一個名頭響亮的。javascript

　　每天吆喝富文本編輯器，究竟什麼是富文本編輯器呢？答：富文本編輯器，Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。它提供相似於 Microsoft Word 的編輯功能，方便不會編寫 HTML 的用戶也能夠根據需求設置各類文本格式。（百度）html

　　UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色。主要仍是開源免費，具體能夠參考官網：http://ueditor.baidu.com/website/index.html前端

　　使用很簡單，直接把官網的代碼拷過來java

<!DOCTYPE HTML>
<html lang="en-US">

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

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

</html>

另外：工具欄能夠本身配置，除了修改配置文件，在實例化編輯器時也能夠設置，代碼以下：web

<script type="text/javascript">
        var ue = UE.getEditor('container',{toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]});
    </script>

在使用過程當中，不是看官網拷過來就能夠，在實際項目框架和業務需求中，總會遇到一些問題，如今主要整理如下問題：瀏覽器

1、報錯：（錯誤信息：Uncaught ReferenceError: ZeroClipboard is not defined ueditor.all.min.js:265）框架

經查看代碼後發現 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;
  }

意思就是說

若是當前頁面的模塊加載模式是AMD的則定義模塊

若是是CommonJs的，則輸出到模塊 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;
});

方案1，能夠解決該錯誤；主要參考：傳送門

2、編輯器第一次加載正常，第二次加載不出來

一、網上解決方法：

jQuery(function($) {
    UE.getEditor('_editor').render('_editor')
)}

該方法測試，第二次能正常加載，但第一次加載會出現兩個編輯器。

二、另外一個方法：

jQuery(function($) {
    UE.delEditor('_editor');
    var ue = UE.getEditor('_editor');
)}

在執行delEditor函數時報錯，源碼中destroy中的某個參數未定義報錯。

三、最終解決方案

if(typeof(UE.getEditor("editor")) !='undefined'){
         UE.getEditor("editor").destroy(); }

每次在關閉窗口或者編輯完成後都要執行下這個函數，用於銷燬該編輯器，保證下次加載正常。

3、彈出模態框中顯示編輯器時，部分字體大小、樣式等帶有下拉框，彈出框的工具沒法使用，緣由是被擋在模態框的下面。

解決：將ueditor.config.js中的zIndex數字改大

4、去掉彈出框「保存文本成功」

　　步驟一、在ueditor.config.js文件中，將enableAutoSave改成false，並將註釋去掉。

　　步驟二、而後在ueditor.all.js文件中找到‘contentchange’，函數第一行添加代碼：if (!me.getOpt('enableAutoSave')) {return;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。