umeditor 實現ctrl+v貼上圖片並上傳、word貼上帶圖片
專案需求可釋出文章 需求涉及到富文字編輯器 經過查閱我選擇了較為簡便 不需要後端支援可獨立完成的tinymce框架 官方文件也是相當完整 雖然都是全英文 但是有強大的 谷歌~ 沒問題的
編輯器，tinymce 不需要後端配合 只需要把最終編輯完的富文字傳給後端就好 很簡單
下載tinymce
npm install tinymce
安裝tinymce-vue
npm install @tinymce/tinymce-vue
下載完成後在node_modules 中找到 tinymce/skins目錄 ，複製下來 放置static
下載中文語言包
tinymce提供了很多的語言包，這裡我們下載語言包 全英文 不懂 自己谷歌開啟 翻譯一下 選擇下載zh_CN
初始化
頁面引入檔案
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
注意tinymce的路徑
註冊使用
<editor :init="init" v-model="content" class="issue-editor"></editor>
components:{ editor: Editor}
初始化配置項 官方文件
有使用powerPaste 將檔案powerPaste 複製下來 放置static 引入即可使用
accept: "image/jpeg, image/png", //設定圖片上傳規則
maxSize: "2097152", //設定圖片大小
height:'500',//設定編輯框大小
content:'',//編輯的內容 可以設定監聽檢視編輯輸入的值
init: {undefined
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; }
`,///設定富文字的樣式初始化
skin_url: "/static/skins/ui/oxide", // tinymce UI引入
language_url: "/static/zh_CN.js", //轉中文檔案
language: "zh_CN",
browser_spellcheck: true, // 拼寫檢查
branding: false, // 去水印
elementpath: false, //禁用編輯器底部的狀態列
statusbar: false, // 隱藏編輯器底部的狀態列
paste_data_images: true, // 允許貼上影象
menubar: false, // 隱藏最上方menu}
// plugins:
// "image wordcount ",
// toolbar: {undefined
// 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只能實現文字或者圖片單獨黏貼
// powerpaste 可以實現 文字和圖片一起黏貼 （本地圖片會變成base64直接呈現）需要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 註冊 改plugins配置中的 paste為powerpaste
external_plugins: {undefined
powerpaste: "/static/skins/powerpaste/plugin.js"
},
powerpaste_allow_local_images: true, //powerpaste允許黏貼
powerpaste_word_import: "clean", //powerpaste黏貼的樣式獲取方式
// setup: editor => { //自定義新增按鈕
// editor.ui.registry.addButton("name", {undefined
// tooltip: "選擇標籤",
// text: "選擇標籤",
// onAction: res => {undefined
// console.log(res);
// self.labelDialogShow=true;
// },
// });
// },
//貼上事件資料官方文件
//黏貼內容時觸發 獲取元素 可自定義新增內容
paste_postprocess: function(pluginApi, data) {undefined
// 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);
},
//只要涉及上傳圖片就會觸發方法 toolbar1 ：uploadimg image media 工具欄呈現呼叫圖片按鈕 plugins:"image wordcount " 最上方呈現圖片呼叫按鈕 menubar 本地圖片黏貼也是觸發這個方法
images_upload_handler: (blobInfo, success, failure) => {undefined
// console.log(blobInfo, success, failure);
if (blobInfo.blob().size > self.maxSize) {undefined
failure("檔案體積過大");
}
if (self.accept.indexOf(blobInfo.blob().type) >= 0) {undefined
//上傳圖片符合規則 呼叫圖片上傳 上傳成功 回撥傳入success 自己的上傳圖片介面
self.handleImgUpload(blobInfo, success, failure);
} else {undefined
failure("圖片格式錯誤");
}
// https://blog.taiorient.com/file/appletUpload
// const img = "data:image/jpeg;base64," + blobInfo.base64();
// success(img);
}
}
上傳圖片介面
//圖片上傳
handleImgUpload(blobInfo, success, failure) {undefined
//繼承編輯器方法 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 => {undefined
console.log(res);
// 上傳成功 回撥傳給編輯器
success(
"http://taioientcde.os-cn-senzhen.aiuncscom/image/" +
res.data.data
);
})
.catch(res => {undefined
//失敗通知
failure("error");
});
},
擴充套件外掛
引入
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' // 字數統計外掛
import 'tinymce/plugins/colorpicker' //選擇顏色外掛
import 'tinymce/plugins/textcolor' //文字顏色外掛
import 'tinymce/plugins/fullscreen' //全屏
import "tinymce/plugins/preview"; //預覽外掛
import "tinymce/plugins/code";//程式碼塊外掛
// import "tinymce/plugins/paste";//圖片黏貼外掛
關於釋出的文章在手機上圖片過大處理
//在提交資料的時候 對img便籤進行篩選替換
save(status) {undefined
// 處理圖片過大問題
this.content = this.content.replace(
/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
(mactch, capture) => {undefined
if(mactch.indexOf('max-width:')!=-1){undefined
}else if(mactch.indexOf('style=')!=-1){undefined
mactch = mactch.replace('style="','<img style="max-width:100%;')
}else{undefined
mactch = mactch.replace('<img','<img style="max-width:100%;" ')
}
let current = "";
this.newImgUrl.forEach(item => {undefined
if (capture == item.oriUrl) {undefined
current = item.filePath;
}
});
current = current ? current : capture;
return mactch.replace(
/src=[\'\"]?([^\'\"]*)[\'\"]?/i,
"src=" + current
);
}
);
//處理powerPaste div align="center" 無法達到文字居中效果
this.content = this.content.replace(
/align="center"/gi,
(mactch, capture) => {undefined
return mactch.replace('align="center"', 'style="text-align:center"');
}
);
// // 匹配並替換 任意html元素中 url 路徑
// this.content = this.content.replace(
// /url[′"](.+)[′"][′"](.+)[′"]/gi,
// (mactch, capture) => {undefined
// let current = "";
// this.newImgUrl.forEach(item => {undefined
// if (capture == item.oriUrl) {undefined
// current = item.filePath;
// }
// });
// current = current ? current : capture;
// return mactch.replace(
// /url([′"])(.+)([′"])([′"])(.+)([′"])/i,
// `url($1${current}$3) `
// );
// }
// );
}
整理說明 圖片黏貼上傳
圖片黏貼上傳 tinymce 的 paste外掛 就可以支援了 有個小問題就是本地圖片黏貼編輯器上傳 不能與圖文一起復制
0. 引入外掛 import "tinymce/plugins/paste"
1. 基礎設定 paste_data_images: true, // 允許貼上影象
2.工具欄配置 uploadimg image media
3.通知使用外掛 plugins: paste
3.上傳圖片 觸發方法 實現圖片自定義上傳 handleImgUpload(blobInfo, success, failure) { } 返回成功的success(url)
處理圖文一起復制 也就是Word 複製上傳 改paste 為powerpaste
0.下載powerpaste檔案放置自己專案 便於引用
1.改plugins內配置paste為 powerpaste
2.引用新增自定義外掛 external_plugins：{powerpaste: "/static/skins/powerpastes/plugin.min.js" }, ( 注：引用檔案版本要對 不然報錯無法正常上傳圖片)
3.基礎配置 powerpaste_allow_local_images: true, //powerpaste允許黏貼 powerpaste_word_import: "clean", // 是否保留word貼上樣式 clean | merge （具體可檢視官方文件）
到此完整解決 基本沒有什麼坑可以踩 很簡單
這裡分享另一種圖片上傳工具,詳細內容可以參考這篇文章：
討論群：223813913