Vue tinymce 富文本編輯器 （圖片過大適配，復(fù)制黏貼自動(dòng)上傳圖片，拖拽上傳圖片）

項(xiàng)目需求可發(fā)布文章 需求涉及到富文本編輯器 經(jīng)過查閱我選擇了較為簡(jiǎn)便 不需要后端支持可獨(dú)立完成的tinymce框架 官方文檔也是相當(dāng)完整 雖然都是全英文 但是有強(qiáng)大的 谷歌~ 沒問題的

編輯器，tinymce? 不需要后端配合? 只需要把最終編輯完的富文本傳給后端就好 很簡(jiǎn)單

下載tinymce

npm?install?tinymce

安裝tinymce-vue?

npm?install?@tinymce/tinymce-vue?

?下載完成后在node_modules 中找到 tinymce/skins目錄 ，復(fù)制下來 放置static

下載中文語言包?

tinymce提供了很多的語言包，這里我們下載語言包全英文 不懂 自己谷歌打開 翻譯一下 選擇下載zh_CN

初始化

頁面引入文件

import?tinymce?from?"tinymce/tinymce";

import?Editor?from?"@tinymce/tinymce-vue";

import?"tinymce/themes/silver";

注意tinymce的路徑??

注冊(cè)使用

<editor?:init="init"?v-model="content"?class="issue-editor"></editor>

components:{?editor:?Editor}?

初始化配置項(xiàng)官方文檔

有使用powerPaste?將文件powerPaste?復(fù)制下來 放置static 引入即可使用

accept:?"image/jpeg,?image/png",?//設(shè)置圖片上傳規(guī)則

maxSize:?"2097152",?//設(shè)置圖片大小

height:'500',//設(shè)置編輯框大小

content:'',//編輯的內(nèi)容 可以設(shè)置監(jiān)聽查看編輯輸入的值

init:?{

content_style:?`

??????????*?????????????????????????{?padding:0;?margin:0;?}

??????????html,?body????????????????{?height:100%;?}

??????????img???????????????????????{?max-width:100%;?display:block;height:auto;?}

??????????a?????????????????????????{?text-decoration:?none;?}

??????????iframe????????????????????{?width:?100%;?}

??????????p?????????????????????????{?line-height:1.6;?margin:?0px;?}

??????????table?????????????????????{?word-wrap:break-word;?word-break:break-all;?max-width:100%;?border:none;?border-color:#999;?}

??????????.mce-object-iframe????????{?width:100%;?box-sizing:border-box;?margin:0;?padding:0;?}

??????????ul,ol?????????????????????{?list-style-position:inside;?}

????????`,///設(shè)置富文本的樣式初始化

????????skin_url:?"/static/skins/ui/oxide",?//?tinymce?UI引入

????????language_url:?"/static/zh_CN.js",?//轉(zhuǎn)中文文件

????????language:?"zh_CN",

????????browser_spellcheck:?true,?//?拼寫檢查

????????branding:?false,?//?去水印

????????elementpath:?false,?//禁用編輯器底部的狀態(tài)欄

????????statusbar:?false,?//?隱藏編輯器底部的狀態(tài)欄

????????paste_data_images:?true,?//?允許粘貼圖像

????????menubar:?false,?//?隱藏最上方menu}

????????//?plugins:

????????//???"image?wordcount?",

????????//?toolbar:?{

????????//???type:?[String,?Array],

????????//???default:

????????//?????"undo?redo?|??formatselect?|?bold?italic?|?alignleft?aligncenter?alignright?alignjustify?|?bullist?numlist?outdent?indent?|?lists?image?media?table?|?removeformat"

????????//?},

????????plugins:

??????????"advlist?link?image?code?textcolor?paste?textcolor?colorpicker",

//?plugins 配置必須有paste 否則圖片無法黏貼成功? ?或者 改paste 為powerpaste? 可不用引入paste

// paste只能實(shí)現(xiàn)文字或者圖片單獨(dú)黏貼? ?

? ? ?// powerpaste? 可以實(shí)現(xiàn) 文字和圖片一起黏貼 （本地圖片會(huì)變成base64直接呈現(xiàn)）需要powerPaste文件的可私聊我要

????????toolbar_items_size:?"small",

????????block_formats:

??????????"Paragraph=p;Heading?1=h1;Heading?2=h2;Heading?3=h3;Heading?4=h4;Heading?5=h5;Heading?6=h6;",

????????toolbar1:

??????????"table?|insertfile?undo?redo?|?formatselect?|?link?unlink?|?uploadimg?image?media?|?name",?//?工具欄1

????????toolbar2:

??????????"?fontsizeselect?|?forecolor?backcolor?|?alignleft?aligncenter?alignright?alignjustify?|?outdent?indent?|?removeformat?",?//?工具欄2


//引入powerpaste 注冊(cè)? ?改plugins配置中的 paste為powerpaste

????????external_plugins:?{

??????????powerpaste:?"/static/skins/powerpaste/plugin.js"

????????},

????????powerpaste_allow_local_images:?true,?//powerpaste允許黏貼

????????powerpaste_word_import:?"clean",?//powerpaste黏貼的樣式獲取方式


????????//?setup:?editor?=>?{?//自定義添加按鈕

????????//???editor.ui.registry.addButton("name",?{

????????//?????tooltip:?"選擇標(biāo)簽",

????????//?????text:?"選擇標(biāo)簽",

????????//?????onAction:?res?=>?{

????????//???????console.log(res);

????????//???????self.labelDialogShow=true;

????????//?????},

????????//???});

????????//?},

//粘貼事件數(shù)據(jù)官方文檔

//黏貼內(nèi)容時(shí)觸發(fā)?獲取元素?可自定義添加內(nèi)容

????????paste_postprocess:?function(pluginApi,?data)?{

??????????//?console.log(data);

??????????//?//?Apply?custom?filtering?by?mutating?data.node

??????????//?const?additionalNode?=?document.createElement("div");

??????????//?console.log(additionalNode);

??????????//?additionalNode.innerHTML?=

??????????//???"<p>This?will?go?before?the?pasted?content.</p>";

??????????//?data.node.insertBefore(additionalNode,?data.node.firstElementChild);

????????},

//只要涉及上傳圖片就會(huì)觸發(fā)方法?toolbar1?：uploadimg?image?media?工具欄呈現(xiàn)調(diào)用圖片按鈕?plugins:"image?wordcount?"?最上方呈現(xiàn)圖片調(diào)用按鈕?menubar? ?本地圖片黏貼也是觸發(fā)這個(gè)方法

????????images_upload_handler:?(blobInfo,?success,?failure)?=>?{

??????????//?console.log(blobInfo,?success,?failure);

??????????if?(blobInfo.blob().size?>?self.maxSize)?{

????????????failure("文件體積過大");

??????????}

??????????if?(self.accept.indexOf(blobInfo.blob().type)?>=?0)?{

//上傳圖片符合規(guī)則?調(diào)用圖片上傳 上傳成功 回調(diào)傳入success 自己的上傳圖片接口

????????????self.handleImgUpload(blobInfo,?success,?failure);

??????????}?else?{

????????????failure("圖片格式錯(cuò)誤");

??????????}

??????????//?https://blog.taiorient.com/file/appletUpload

??????????//?const?img?=?"data:image/jpeg;base64,"?+?blobInfo.base64();

??????????//?success(img);

????????}

??????}

上傳圖片接口

//圖片上傳

????handleImgUpload(blobInfo,?success,?failure)?{

??????//繼承編輯器方法?blobInfo,?success,?failure

??????console.log(blobInfo.blob());

??????let?formdata?=?new?FormData();

??????formdata.set("upload_file",?blobInfo.blob());

??????axios

????????.post("https://blogtiorent.com/file/apletUpload",?formdata)

????????.then(res?=>?{

??????????console.log(res);

??????????//?上傳成功?回調(diào)傳給編輯器

??????????success(

????????????"http://taioientcde.os-cn-senzhen.aiuncscom/image/"?+

??????????????res.data.data

??????????);

????????})

????????.catch(res?=>?{

??????????//失敗通知

??????????failure("error");

????????});

????},

擴(kuò)展插件?

引入

import?'tinymce/plugins/image'//?插入上傳圖片插件

import?'tinymce/plugins/media'//?插入視頻插件

import?'tinymce/plugins/table'//?插入表格插件

import?'tinymce/plugins/link'?//超鏈接插件

import?'tinymce/plugins/code'?//代碼塊插件

import?'tinymce/plugins/lists'//?列表插件

import?'tinymce/plugins/contextmenu'??//右鍵菜單插件

import?'tinymce/plugins/wordcount'?//?字?jǐn)?shù)統(tǒng)計(jì)插件

import?'tinymce/plugins/colorpicker'?//選擇顏色插件

import?'tinymce/plugins/textcolor'??//文本顏色插件

import?'tinymce/plugins/fullscreen'?//全屏

import?"tinymce/plugins/preview";?//預(yù)覽插件

import?"tinymce/plugins/code";//代碼塊插件

//?import?"tinymce/plugins/paste";//圖片黏貼插件

關(guān)于發(fā)布的文章在手機(jī)上圖片過大處理

//在提交數(shù)據(jù)的時(shí)候 對(duì)img便簽進(jìn)行篩選替換? ?

?save(status)?{

??????//?處理圖片過大問題

??????this.content?=?this.content.replace(

????????/<img?[^>]*src=['"]([^'"]+)[^>]*>/gi,

????????(mactch,?capture)?=>?{

??????????if(mactch.indexOf('max-width:')!=-1){

??????????}else?if(mactch.indexOf('style=')!=-1){

????????????mactch?=?mactch.replace('style="','<img?style="max-width:100%;')

??????????}else{

?????????????mactch?=?mactch.replace('<img','<img?style="max-width:100%;"?')

??????????}

??????????let?current?=?"";

??????????this.newImgUrl.forEach(item?=>?{

????????????if?(capture?==?item.oriUrl)?{

??????????????current?=?item.filePath;

????????????}

??????????});

??????????current?=?current???current?:?capture;

??????????return?mactch.replace(

????????????/src=[\'\"]?([^\'\"]*)[\'\"]?/i,

????????????"src="?+?current

??????????);

????????}

??????);

//處理powerPaste??div? align="center" 無法達(dá)到文字居中效果

? ? ? this.content?=?this.content.replace(

????????/align="center"/gi,

????????(mactch,?capture)?=>?{

??????????return?mactch.replace('align="center"',?'style="text-align:center"');

????????}

??????);

??????//??//?匹配并替換?任意html元素中?url?路徑

??????//?this.content?=?this.content.replace(

??????//???/url\(['"](.+)['"]\)/gi,

??????//???(mactch,?capture)?=>?{

??????//?????let?current?=?"";

??????//?????this.newImgUrl.forEach(item?=>?{

??????//???????if?(capture?==?item.oriUrl)?{

??????//?????????current?=?item.filePath;

??????//???????}

??????//?????});

??????//?????current?=?current???current?:?capture;

??????//?????return?mactch.replace(

??????//???????/url\((['"])(.+)(['"])\)/i,

??????//???????`url($1${current}$3)?`

??????//?????);

??????//???}

??????//?);

}

整理說明 圖片黏貼上傳?

圖片黏貼上傳 tinymce 的 paste插件 就可以支持了? 有個(gè)小問題就是本地圖片黏貼編輯器上傳 不能與圖文一起復(fù)制

? 0. 引入插件? import?"tinymce/plugins/paste"

? 1. 基礎(chǔ)設(shè)置??paste_data_images:?true,?//?允許粘貼圖像

? 2.工具欄配置 uploadimg?image?media

? 3.通知使用插件?plugins: paste

? 3.上傳圖片 觸發(fā)方法 實(shí)現(xiàn)圖片自定義上傳? ?handleImgUpload(blobInfo,?success,?failure)?{ } 返回成功的success(url)

處理圖文一起復(fù)制? 也就是Word 復(fù)制上傳 改paste 為powerpaste

? 0.下載powerpaste文件放置自己項(xiàng)目 便于引用

? 1.改plugins內(nèi)配置paste為 powerpaste

? 2.引用添加自定義插件?external_plugins：{powerpaste:?"/static/skins/powerpastes/plugin.min.js"?}, ( 注：引用文件版本要對(duì) 不然報(bào)錯(cuò)無法正常上傳圖片)

? 3.基礎(chǔ)配置??powerpaste_allow_local_images:?true,?//powerpaste允許黏貼? powerpaste_word_import:?"clean",?//?是否保留word粘貼樣式??clean?|?merge? ? （具體可查看官方文檔）

?到此完整解決 基本沒有什么坑可以踩 很簡(jiǎn)單

看看效果?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容