整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          wangeditor在復(fù)制word中自動去除樣式的代

          wangeditor在復(fù)制word中自動去除樣式的代碼

          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日
          觀點部分,只代表個人觀點,有什么建議和意見歡迎指正


          主站蜘蛛池模板: 亚洲一区二区三区日本久久九| 日韩精品无码人妻一区二区三区| 久久久人妻精品无码一区 | 久久精品国产亚洲一区二区三区 | 国产精品高清一区二区三区不卡| 精品永久久福利一区二区| 精品一区二区三区四区| 亚洲一区在线免费观看| 亚洲性色精品一区二区在线 | 人妻互换精品一区二区| 日本精品一区二区三本中文| 无码人妻精品一区二区三区99不卡| 国产日韩AV免费无码一区二区三区| 亚洲一区精品无码| 伦精品一区二区三区视频| 精品一区二区三区在线观看l| 国内精品一区二区三区在线观看| 日韩一区二区三区在线观看| 无码人妻久久一区二区三区| 性色av无码免费一区二区三区| 亚洲国产精品一区二区第四页| 日韩视频一区二区三区| 国产一区二区三区播放| 亚洲AV无码一区二区乱孑伦AS| 亚洲一区二区三区偷拍女厕| 国产一区二区三区乱码| 亚洲AV无码一区二区三区DV| 一区二区三区亚洲| 亚洲国产系列一区二区三区| 99精品国产一区二区三区2021| 精品国产一区二区三区香蕉| 亚洲a∨无码一区二区| 毛片无码一区二区三区a片视频| 欧美人妻一区黄a片| 国产三级一区二区三区| 大伊香蕉精品一区视频在线| 亚洲av色香蕉一区二区三区| 成人午夜视频精品一区| 国产精品美女一区二区| 精品少妇人妻AV一区二区三区| 日韩精品无码一区二区视频|