vue3 中引入tinymce富文本
我用的是若依的 Vue3 + Element Plus + Vite 框架,使用tinymce替换原富文本.
先说踩的坑和遇到的问题吧
- 1.想看html源代码 需要引入code
javascript
import "tinymce/plugins/code";
- 2.字体库在vue3中的属性是'font_family_formats'
javascript
font_family_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;',
tinymce版本
"@tinymce/tinymce-vue": "^6.1.0",
"tinymce": "^7.4.1",
vue3下载安装可参考,以下为代码
参考:https://blog.csdn.net/m0_73358221/article/details/129358814
main.js引入
javascript
// 富文本组件
import Editor from "@/components/TinymceEditor.vue"
app.component('Editor', Editor)
页面使用
html
<editor
v-model="formData.noticeContent"
@input="
(val) => {
formData.noticeContent = val;
}
"
></editor>
editor组件代码
html
<template>
<div>
<Editor v-model="content" :init="myTinyInit"></Editor>
</div>
</template>
<script setup>
import {
computed,
onMounted,
reactive,
ref,
watch,
} from "vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/models/dom/model";
//按需引入插件
import "tinymce/plugins/image";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/help";
import "tinymce/plugins/wordcount";
// import axios from "axios";
// import {useStore} from "vuex";
// import {ElNotification} from "element-plus";
const props = defineProps({
modelValue: {
type: String,
default: "",
}
});
const emit = defineEmits(["input"]);
// const store = useStore();
const myTinyInit = reactive({
// width: '100%',
height: 600,
width: "750px",
language_url: import.meta.env.VITE_TINYMCE_PATH + "/tinymce/langs/zh_CN.js", //如果语言包不存在,指定一个语言包路径
language: "zh_CN", //语言
branding: false,
menubar: true,
resize: false,
skin_url: import.meta.env.VITE_TINYMCE_PATH + "/tinymce/skins/ui/oxide", //手动引入
content_css: import.meta.env.VITE_TINYMCE_PATH + "/tinymce/skins/content/default/content.css", //手动引入
toolbar_mode: "wrap",
plugins: "code lists link image table help wordcount", // 插件
statusbar: false,
promotion: false,
// toolbar: props.toolbar, // 工具栏
toolbar: "accordion accordionremove | blocks fontselect fontfamily fontsize | bold italic underline | align numlist bullist | link | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview", // 工具栏
theme: "silver", //主题
font_family_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;',
//图片上传方法(注意!!:要使用 promise 对象中的 resolve 返回图片路径,否则会报错)
// images_upload_handler: (blobInfo) => new Promise((resolve, reject) => {
// let formData = new FormData();
// formData.append('file', blobInfo.blob(), blobInfo.filename());
// axios.post(`/api/backend/upload`, formData, {
// headers: ({
// 'Content-Type': 'multipart/form-data',
// 'Authorization': "Bearer " + store.state.user.accessToken
// })
// }).then(res => {
// if (res.data.code === 1) {
// resolve(`/image_manipulation${res.data.data.filePath}`)
// } else {
// // ElNotification.warning(res.data.msg)
// }
// }).catch(error => {
// reject(error);
// })
// }),
});
const initContent = computed(() => {
return props.modelValue;
});
onMounted(() => {
tinymce.init({
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;',
});
});
const content = ref();
watch(
initContent,
(newVal) => {
content.value = newVal;
},
{ deep: true, immediate: true }
);
watch(
content,
(newVal) => {
emit("input", newVal);
},
{ deep: true }
);
</script>
<style scoped lang="scss"></style>