tinymce使用
安装@tinymce/tinymce-vue、tinymce
引入插件
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
// 编辑器插件
import "tinymce/plugins/image"; //插入编辑图片
//其余插件省略....，可根据实际自行引用
// 自定义上传图片到远程服务器的方法
import { UploadFile } from '@/util/uploadFiles';
初始化插件配置
data() {
const DEPLOYURL = location.origin;
return {
init: {
// 微服务下需要处理资源文件路径
language_url: `${DEPLOYURL}/tinymce/langs/zh_CN.js`, //引入语言包文件
language: "zh_CN", //语言类型
skin_url: `${DEPLOYURL}/tinymce/skins/ui/oxide`, //皮肤：浅色
plugins: this.plugins, //插件配置
toolbar: this.toolbar, //工具栏配置，设为false则隐藏
// menubar: 'file edit', //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
fontsize_formats:
"8px 10px 12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
font_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式
height: 400, //注：引入autoresize插件时，此属性失效
placeholder: "请输入文章正文",
branding: false, //tiny技术支持信息是否显示
resize: "true", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
elementpath: true, //元素路径是否显示
content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
// content_css: '/tinycontent.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
// images_upload_url: '/apib/api-upload/uploadimg', //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
// images_upload_base_path: '/demo', //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
paste_data_images: true, //图片是否可粘贴
init_instance_callback: function (editor) {
editor.on('paste', (evt) => {
// 监听粘贴事件
// 实现图片粘贴上传
const items = (evt.clipboardData || window.clipboardData).items
if (items[0].type.indexOf('image') !== -1) {
const file = items[0].getAsFile()
// 自定义上传图片的方法
const uploadInstance = new UploadFile();
uploadInstance.startUpload(file).then((res) => {
// 使用指令，在当前鼠标标光的位置插入元素
// img元素的src就是远程图片的链接地址
tinymce.execCommand(
"mceReplaceContent",
true,
`<img style="max-width:500px;" src="https://${res.Location}" >`
);
}).catch((err) => {
console.log(err)
});
// 阻止默认事件，防止粘贴的图片进入富文本编辑器中
evt.preventDefault();
} else {
console.log('粘贴的不是图片，不能上传')
}
})
},
images_upload_handler: (blobInfo, success, failure) => {
// 校验上传图片的大小
// if (blobInfo.blob().size / 1024 / 1024 > 2) {
// failure("上传失败，图片大小请控制在 20M 以内");
// return;
// }
const uploadInstance = new UploadFile();
uploadInstance.startUpload(blobInfo.blob()).then((res) => {
success(`https://${res.Location}`);
}).catch((err) => {
console.log(err)
});
},
},
};
},
参考文章：http://blog.ncmem.com/wordpress/2023/10/18/%e5%af%8c%e6%96%87%e6%9c%ac%e6%8f%92%e4%bb%b6tinymce%e4%bd%bf%e7%94%a8ctrlv%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e5%88%b0%e8%bf%9c%e7%a8%8b%e6%9c%8d%e5%8a%a1%e5%99%a8/
欢迎入群一起讨论
