Vue 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}
初始化配置项 官方文档
accept: "image/jpeg, image/png", //设置图片上传规则
maxSize: "2097152", //设置图片大小
height:'500',//设置编辑框大小
content:'',//编辑的内容 可以设置监听查看编辑输入的值
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; }
`,///设置富文本的样式初始化
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: {
// 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 否则图片无法黏贴成功
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
// setup: editor => { //自定义添加按钮
// editor.ui.registry.addButton("name", {
// tooltip: "选择标签",
// text: "选择标签",
// onAction: res => {
// console.log(res);
// self.labelDialogShow=true;
// },
// });
// },
//上传图片触发方法 toolbar1 :uploadimg image media 工具栏呈现调用图片按钮 plugins:"image wordcount " 最上方呈现图片调用按钮 menubar 本地图片黏贴也是触发这个方法
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) {
//上传图片符合规则 调用图片上传 上传成功 回调传入success 自己的上传图片接口
self.handleImgUpload(blobInfo, success, failure);
} else {
failure("图片格式错误");
}
// 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);
// 上传成功 回调传给编辑器
success(
"http://taioientcde.os-cn-senzhen.aiuncscom/image/" +
res.data.data
);
})
.catch(res => {
//失败通知
failure("error");
});
},
扩展插件
引入
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/paste";//注意 一定要引入这个插件才能实现本地图片黏贴上传