珠海建网站的网络公司打开网站搜索

我用的是若依的 Vue3 + Element Plus + Vite 框架，使用tinymce替换原富文本.

先说踩的坑和遇到的问题吧

• 1.想看html源代码 需要引入code

import "tinymce/plugins/code";

• 2.字体库在vue3中的属性是’font_family_formats’

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引入

// 富文本组件
import Editor from "@/components/TinymceEditor.vue"
app.component('Editor', Editor)

页面使用

<editorv-model="formData.noticeContent"@input="(val) => {formData.noticeContent = val;}"
></editor>

editor组件代码

<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>