在vite项目中跑通后,精简化后移到了codesandbox,依赖为vue3、tinymce[6.3.2]、tinymce-i18n[23.1.23]、@tinymce/tinymce-vue[5.0.0]。
注意
请提前了解Tinymce6图片上传的URL转化问题
在线演示
说明
初次接触此编辑器,按照官网文档的方法引入,报css等异常。查找网络资料,得到用法还需要@tinymce/tinymce-vue
,
各种调试之后,得到正常跑通可开发的版本如下。
本示例不需要迁移样式文件、核心js到public中,只通过import的方式引入。
如需调整代码,一定先参考官网的文档。
官网文档:https://www.tiny.cloud/docs/tinymce/6/
之前想引入parse插件,发现源码没有这个插件,而网络文章中使用的版本差异过大,在官网中可以看到tinymce6已经默认集成此插件,不需要引入。
本示例已经编写了一个简单的图片自动上传处理函数,主要是演示上传完成之后传出的结果,只需要传出图片地址。
使用
需要安装如下依赖
"@tinymce/tinymce-vue": "5.0.0",
"tinymce": "6.3.2",
"tinymce-i18n": "23.1.23",
封装为组件使用
<custom-tinymce v-model="description"></custom-tinymce>
源码
<template>
<div style="width: 100%">
<editor v-model="editorValue" :init="initOptions"></editor>
</div>
</template>
<script setup>
import { defineEmits, defineProps, onMounted, ref, toRefs, watch } from "vue";
import "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/models/dom";
// 外觀
import "tinymce/skins/ui/oxide/skin.css";
import "tinymce/themes/silver";
// Icon
import "tinymce/icons/default";
// 語言包
import "tinymce-i18n/langs6/zh-Hans.js";
// 引入插件
// 源代码
import "tinymce/plugins/code";
const emit = defineEmits(["update:modelValue"]);
const initOptions = ref({
language: "zh-Hans",
height: 500,
skin: false,
menubar: false,
content_css: false,
plugins: props.plugins,
toolbar: props.toolbar,
toolbar_mode: "sliding",
...getPasteOption(),
...getImageOption(),
});
const props = defineProps({
modelValue: {
type: String,
default: "",
},
plugins: {
type: [String, Array],
default: "code",
},
toolbar: {
type: [String, Array],
default:
"undo redo | styles | bold italic cut copy paste forecolor removeformat code",
},
});
const { modelValue } = toRefs(props);
const editorValue = ref(modelValue.value);
watch(modelValue, (newValue) => {
editorValue.value = newValue;
});
watch(editorValue, (newValue) => {
emit("update:modelValue", newValue);
});
onMounted(() => {
console.log("初始化tinymce");
});
/*
* 图片上传 配置项
* */
function getImageOption() {
return {
// images_upload_url: 'http://192.168.3.103:9890/common/upload',
images_upload_handler: (blobInfo, progress) =>
new Promise(async (resolve, reject) => {
// console.log(blobInfo.blobUri())
const formData = new FormData();
formData.append("file", blobInfo.blob(), blobInfo.filename());
// console.log(formData)
// 模拟调用图片上传接口之后的结果,返回的数据如下格式
// 格式非固定,根据业务调整
const res = {
code: 200,
url: "https://dummyimage.com/600x400",
};
// console.log(res)
if (res.code === 200) {
// 给出的是url地址
resolve(res.url);
} else {
reject("上传图片失败", res);
}
}),
};
}
/*
* 复制粘贴插件 配置项
* https://www.tiny.cloud/docs/tinymce/6/copy-and-paste/
* */
function getPasteOption() {
return {
paste_preprocess: (editor, args) => {
console.log(args.content);
},
// paste_remove_styles_if_webkit: false,
/*
* 此选项允许您指定在 WebKit 中粘贴时要保留的样式。WebKit 有一个怪癖,
* 它将获取元素的所有计算 CSS 属性并将它们添加到编辑器中的 span 中。由于大多数用户不希望在整个文档中添加随机跨度,
* 因此我们需要手动清理它,直到修复错误。此选项默认为'none'但可以设置为'all'或要保留的特定样式列表。
* */
paste_webkit_styles: "color",
};
}
</script>
<style scoped>
</style>