百度的富文本編輯器大家都熟悉，那么下面給大家介紹一款富文本編輯器tinymce ，個人感覺比百度的界面好看，調用方便，就不知道各位大神怎么看咯！
以下是vue中使用示例，獻上最終效果圖
安裝：
npm install tinymce npm install @tinymce/tinymce-vue
語言設置：
在目錄public建立一個文件夾tinymce，放語言文件語言文件zh_CN.js和皮膚skin, 然后在node_modules里找到tinymce的skin包，復制到public/tinymce里
以下是封裝的富文本組件
使用： <tinymce ref="tinymce1" :id="'tinymce1'"></tinymce> 獲取編輯器內容：this.$refs.tinymce1.tinymceHtml
示例組件
<template>
<div class="tinymce">
<Editor :id="id" v-model="tinymceHtml" :init="init"></Editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
//--------------------插入引入--------------------
import 'tinymce/plugins/image'// 插入上傳圖片插件
import 'tinymce/plugins/imagetools'// 插入上傳圖片插件
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/help'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/toc'
import 'tinymce/themes/silver/theme'
export default {
components:{
Editor,
},
props:['id'],
data(){
return{
init:{
selector: this.id,//選擇HTML元素
language_url:'/tinymce/zh_CN.js', //導入語言文件
language: "zh_CN",//語言設置
//disabled:true, //禁用
skin_url: '/tinymce/skins/ui/oxide',//主題樣式
height:300, //高度
theme: 'silver',
menubar: false,// 隱藏最上方menu菜單
toolbar: true,//false禁用工具欄（隱藏工具欄）
browser_spellcheck: true, // 拼寫檢查
branding: false, // 去水印
image_advtab: true,
statusbar: false, // 隱藏編輯器底部的狀態欄
elementpath: false, //禁用下角的當前標簽路徑
paste_data_images: true, // 允許粘貼圖像
automatic_uploads: true,
images_upload_handler: (blobInfo, success, failure) => {
//直接轉為base64格式顯示
const img = this.compress('data:image/jpeg;base64,' + blobInfo.base64(),600,1);
//const img = 'data:image/jpeg;base64,' + blobInfo.base64();
success(img);
//以下部分是上傳
/*var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'https://uploadfile.cptuatweb.net/fileEntry/oss/uploadFile');//第一個參數是請求方式，第二個參數是請求地址，我這里配置的是struts的action，如果是其他（PHP等）的可這樣配置：xxx.php
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location !== 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);*/
},
plugins:
'lists image imagetools media table wordcount code fullscreen help toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor' ,
toolbar:[
'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | removeformat ',
'code bullist numlist | lists image imagetools media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap pastetext print preview hr',
]
},
tinymceHtml:"",
}
},
mounted(){
tinymce.init({})
},
methods:{
//base64壓縮
compress(base64String, w, quality) { //第一個參數base64 第二個長度 第三個參數品質
var getMimeType = function (urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise(resolve => newImage.onload = resolve);
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
return base64;
});
}
}
}
</script>
<style lang="scss" scoped>
</style>
######