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ù)
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)編輯模式,可自定義。
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。
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是我們項目目前在用的編輯器。
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ù)分別取自這兩個倉庫
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貢獻者最多的一個。
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)用。
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):
兼容Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome,實現(xiàn)瀏覽器無差別化。
經(jīng)過專業(yè)的QA團隊測試,通過上千個測試用例,包括自動化用例和手動用例,目前仍然在不斷完善中。
以上數(shù)據(jù)部分均取自github,時間為2021年10月21日
觀點部分,只代表個人觀點,有什么建議和意見歡迎指正
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。