富文本编辑器 tinymce 的安装与使用
百度的富文本编辑器大家都熟悉，那么下面给大家介绍一款富文本编辑器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>
######
浙公网安备 33010602011771号