vue3 中引入tinymce富文本

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>
相关推荐
叫我阿柒啊1 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊1 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊2 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊2 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊2 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊3 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare4 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊4 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊4 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发