angeditor是個很好的編輯器。小巧玲瓏，惹人憐愛~
但是在使用的過程中，我們往往會復(fù)制word的文字到編輯器中，如果wangeditor沒有做任何處理，會導(dǎo)致復(fù)制的內(nèi)容比較錯亂，甚至無法添加到數(shù)據(jù)庫中。
為了解決這個問題，我們需要對從word中粘貼的內(nèi)容進行處理，吧多余的代碼剔除。
下面是我再實際應(yīng)用中處理的代碼分享給大家。

window.wangEditor.fullscreen={        // editor create之后調(diào)用        init: function(editorSelector){            $(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" onclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');        },        toggleFullscreen: function(editorSelector){            $(editorSelector).toggleClass('fullscreen-editor');            if($(editorSelector + ' ._wangEditor_btn_fullscreen').text()=='全屏'){                $(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏');            }else{                $(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏');            }        }    };    var E=window.wangEditor    var editor=new E('#editor')    // 或者 var editor=new E( document.getElementById('editor') )    // 配置服務(wù)器端地址    editor.customConfig.uploadFileName='file'    editor.customConfig.uploadImgServer="{:url('Upload/wang_editor_upload')}"    //去除富文本中粘貼word樣式問題    editor.customConfig.pasteTextHandle=function (content) {        // content 即粘貼過來的內(nèi)容（html 或 純文本），可進行自定義處理然后返回        if (content=='' && !content) return ''        var str=content        str=str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')        str=str.replace(/<style>[\s\S]*?<\/style>/ig, '')        str=str.replace(/<\/?[^>]*>/g, '')        str=str.replace(/[ | ]*\n/g, '<p>')        str=str.replace(/ /ig, '')        console.log('****', content)        console.log('****', str)        return str    }    editor.create()    E.fullscreen.init('#editor');

這樣復(fù)制過來的文字是呆有p標(biāo)簽可以換行的。

預(yù)覽一下

還可以吧~，來源也是從網(wǎng)上復(fù)制的，大家喜歡可以自己拿去修改一下咯~

angEditor.vue組件

<template>
  <div id="editor"></div>
</template>

<script>
  import editor from 'wangeditor';
  export default {
    name: 'article-manage',
    data(){
      return{
        nEditor:null,
      }
    },
    mounted() {
      this.nEditor=new editor('#editor');
      this.nEditor.customConfig.onchange=html=> {
        this.$emit("getContent",html);
      };
      this.nEditor.customConfig.uploadImgShowBase64=true; // base 64 存儲圖片
      this.nEditor.customConfig.menus=[
        //菜單配置
        "head", // 標(biāo)題
        "bold", // 粗體
        "fontSize", // 字號
        "fontName", // 字體
        "italic", // 斜體
        "underline", // 下劃線
        "strikeThrough", // 刪除線
        "foreColor", // 文字顏色
        "backColor", // 背景顏色
        "link", // 插入鏈接
        "list", // 列表
        "justify", // 對齊方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入圖片
        "table", // 表格
        // "video", // 插入視頻
        "code", // 插入代碼
        "undo", // 撤銷
        "redo", // 重復(fù)
      ];
      this.nEditor.customConfig.uploadImgMaxLength=1;
      this.nEditor.customConfig.uploadImgServer='/*   上傳圖片后臺接口   */';
      this.nEditor.create();
      this.creatBtn("#editor");
    },
    methods:{
      // 設(shè)置編輯器內(nèi)容
      setEditorContent(content){
        this.nEditor.txt.html(content);
      },
      // 獲取編輯器內(nèi)容
      getEditorContent(){
        this.$emit("getContent",this.nEditor.txt.html());
      },
      // 添加顯示源碼按鈕
      creatBtn(editorSelector){
        let _this=this;
        function toggleViewsource(editorSelector,that){
          var editorHtml=that.nEditor.txt.html();
          if($(editorSelector + ' ._wangEditor_btn_viewsource').text()==''){
            editorHtml=editorHtml.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
            $(editorSelector + ' ._wangEditor_btn_viewsource').addClass('yuanma-active');
            $(editorSelector + ' ._wangEditor_btn_viewsource').text(' ');
          }else{
            editorHtml=that.nEditor.txt.text().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ");
            $(editorSelector + ' ._wangEditor_btn_viewsource').removeClass('yuanma-active');
            $(editorSelector + ' ._wangEditor_btn_viewsource').text('');
          }
          that.nEditor.txt.html(editorHtml);
          that.nEditor.change && that.nEditor.change();// 更新編輯器的內(nèi)容
        }
        $(editorSelector + " .w-e-toolbar").prepend('<div class="w-e-menu"><span class="_wangEditor_btn_viewsource yuanma" href="###"></span></div>');
        $(editorSelector).on("click",".yuanma",function(){
          toggleViewsource(editorSelector,_this);
        });
      },
    },
  }
</script>

<style scoped>
	#editor >>> .yuanma{display: inline-block;width: 14px;height: 14px;background: url(/*   此處放置源碼按鈕灰色圖標(biāo)   */) no-repeat center center;background-size: contain;}
	#editor >>> .yuanma-active{display: inline-block;width: 14px;height: 14px;background: url(/*   此處放置源碼按鈕有色圖標(biāo)   */) no-repeat center center;background-size: contain;}
	#editor >>> .yuanma:hover{background: url(/*   此處放置源碼按鈕有色圖標(biāo)   */) no-repeat center center;background-size: contain;}
</style>

頁面中使用的方法：

近公司內(nèi)部要優(yōu)化創(chuàng)作者后臺，關(guān)于后臺編輯器部分，領(lǐng)導(dǎo)委托我做了一個簡單的調(diào)研。

基于github和百度搜索的數(shù)據(jù)，收集整理出以下幾款編輯器的數(shù)據(jù)

quill

github repository: https://github.com/quilljs/quill/
github stars: 31.1k
github contributors: 127
官網(wǎng): https://quilljs.com/

Quill是一個跨平臺的功能強大的富文本編輯器。開發(fā)者可以通過簡單的API來控制編輯器的內(nèi)容。主流的黑白清新風(fēng)，美觀，功能上雖然不是很多，甚至還沒有表格，但它的代碼高亮是最完美的，因為它本身就支持了hignlight.js，同樣支持行內(nèi)編輯模式，可自定義。

trix

github repository: https://github.com/basecamp/trix
github stars: 16.5k
github contributors: 37
官網(wǎng): https://trix-editor.org/

在Web應(yīng)用程序中編寫格式精美的文本。Trix是一個WYSIWYG編輯器，用于編寫消息，評論，文章和列表 - 大多數(shù)Web應(yīng)用程序的簡單文檔。它具有復(fù)雜的文檔模型，支持嵌入式附件，并輸出簡潔和一致的HTML。
Trix是來自Basecamp的開源項目，Basecamp是Ruby on Rails的創(chuàng)建者。數(shù)百萬人信任他們的文本發(fā)送到Basecamp，Trix給了他們最好的編輯體驗。

大多數(shù)WYSIWYG編輯器都是HTML contenteditable和execCommandAPI的包裝器，他們是由Microsoft設(shè)計，支持在Internet Explorer 5.5中實時編輯網(wǎng)頁，最終由其他瀏覽器進行反向設(shè)計和復(fù)制。

因為這些API從未完全規(guī)定好或文檔化，并且因為WYSIWYG HTML編輯器的范圍很廣，所以每個瀏覽器的實現(xiàn)都有自己的一組錯誤和怪癖，需要JavaScript開發(fā)人員可以解決這些不一致問題。

Trix通過將contenteditable視為I / O設(shè)備來回避這些不一致：當(dāng)輸入進入編輯器時，Trix該輸入轉(zhuǎn)換為其內(nèi)部文檔模型的編輯操作，然后將該文檔重新呈現(xiàn)回編輯器。這使得Trix可以完全控制每次擊鍵后發(fā)生的事情，并且完全無需使用execCommand。

wangEditor

github repository: https://github.com/wangeditor-team/wangEditor
github stars: 12.5k
github contributors: 44
官網(wǎng): https://www.wangeditor.com/

由一個20個人組合的國內(nèi)團隊維護，輕量級，小巧實用，配置方便，使用簡單。可以自定義皮膚功能，免費開源，用戶數(shù)量也較多。
wangEditor是用javascript編寫的 輕量級web富文本編輯器 ，依賴于jQuery和fontAwesome字體庫， 支持所有瀏覽器 。使用 wangEditor 可以輕松創(chuàng)建web富文本框，并可以自定義擴展菜單功能。wangEditor所有源碼都已經(jīng)在github上開源下載。

缺點：Demo、文檔不是很全。若想更好的使用，還需閱讀一下源碼，好在作者代碼注釋寫得很全。

優(yōu)點：作者一直有更新，并且有活躍的技術(shù)QQ群： 164999061(人已滿)，710646022(人已滿)，901247714(人已滿)，606602511，作者能及時的回答問題。源碼注釋非常好。

wangEditor是我們項目目前在用的編輯器。

ckeditor

github repository: https://github.com/ckeditor/
github contributors: 130+74
github stars: 5.5k+5.2k
官網(wǎng): https://ckeditor.com/

非常經(jīng)典的富文本編輯器，官方下載量過千萬，有高性能的實時預(yù)覽，它特有行內(nèi)編輯功能。

CKEditor 是新一代的 FCKeditor，是一個重新開發(fā)的版本。CKEditor 是全球最優(yōu)秀的網(wǎng)頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛地被運用于各大網(wǎng)站。

可配合使用的擴展有文件管理器 KCFinder。

github上，目前拆分為ckeditor4和ckeditor5兩個主要倉庫分別維護，以上數(shù)據(jù)分別取自這兩個倉庫

summernote

github repository: https://github.com/summernote/summernote/
github stars: 10.4k
github contributors: 278
官網(wǎng): https://summernote.org/

Summernote 是一個簡單靈活的所見即所得的 HTML 在線編輯器，比較容易上手，使用體驗流暢，支持各種主流瀏覽器，基于 jQuery 和 Bootstrap 構(gòu)建，支持快捷鍵操作，提供大量可定制的選項。

本次調(diào)研中g(shù)ithub貢獻者最多的一個。

TinyMCE

github repository: https://github.com/tinymce/
github stars: 9.9k
github contributors: 215
官網(wǎng): https://www.tiny.cloud/

TinyMCE是一個輕量級的，基于瀏覽器的，所見即所得編輯器，支持目前流行的各種瀏覽器，支持圖片在線處理，插件多，功能非常強大，易于集成，并且擁有可定制的主題。由JavaScript寫成。功能配置靈活簡單（兩行代碼就可以將編輯器嵌入網(wǎng)頁中），支持AJAX。另一特點是加載速度非常快，如果你的服務(wù)器采用的腳本語言是 PHP，那還可以進一步優(yōu)化。最重要的是，TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件，你可以把它用于商業(yè)應(yīng)用。

UEditor

github repository: https://github.com/fex-team/ueditor
github stars: 6k
github contributors: 45
官網(wǎng): https://ueditor.baidu.com/website/

UEditor 是由百度 web 前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量、可定制、注重用戶體驗等特點。

主要特點：

輕量級：

代碼精簡，加載迅速。

定制化：

全新的分層理念，滿足多元化的需求。采用三層架構(gòu)：

1. 核心層： 為命令層提供底層API，如range/selection/domUtils類。
2. 命令插件層： 基于核心層開發(fā)command命令，命令之間相互獨立。
3. 界面層： 為命令層提供用戶使用界面。
   滿足不同層次用戶的需求。

瀏覽器兼容：

兼容Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome，實現(xiàn)瀏覽器無差別化。

注重細(xì)節(jié)：

• 統(tǒng)一不同瀏覽器下表格選取方式。
• 提供黑/白名單的過濾機制。
• 更好的word支持，實現(xiàn)粘貼轉(zhuǎn)換機制。

穩(wěn)定性：

經(jīng)過專業(yè)的QA團隊測試，通過上千個測試用例，包括自動化用例和手動用例，目前仍然在不斷完善中。

以上數(shù)據(jù)部分均取自github，時間為2021年10月21日
觀點部分，只代表個人觀點，有什么建議和意見歡迎指正