Vue3项目中使用富文本编辑器

文章目录

• tinymce简介

前言

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

一、安装Tinymce

npm install tinymce@^5.6.2
npm install @tinymce/tinymce-vue@^4.0.1

注意：版本可根据自己项目的情况来进行选择。

二、使用步骤

1.封装组件

代码如下（仅展示部分代码）：

<template>
  <div class="tinymce-box">
    <Editor
      id="myedit"
      v-model="content"
      :init="init"
      tag-name="div"
      :disabled="disabled"
      @onClick="onClick"
    />
  </div>
</template>

<script>
// import api from '../api/api.js'

import Editor from "@tinymce/tinymce-vue";

import tinymce from "tinymce/tinymce"; 
import "tinymce/themes/silver"; 
import "tinymce/icons/default"; 
export default {
  name: "TEditor",
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    "update:modelValue": null,
    saveContent: "",
  },
  setup(props, context) {
    const $post =
      getCurrentInstance()?.appContext.config.globalProperties.$post;
    const content = ref();
    const info = reactive({
      content: "",
      myedit: 0,
    });
    tinymce.init; // 初始化

    const revert_data = (content) => {
      context.emit("update:modelValue", content);
    };
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events

    onMounted(() => {
      // readonly();
    });
    return {
      init,
    };
  },
};
</script>

2.组件中挂载

代码如下（示例）：

import Editor from "@/components/editor.vue";

3.应用富文本

 <Editor id="data.id" v-model="data.content" />

总结

Vue中应用富文本编辑器，涉及到多个富文本时需要注意的是动态数据的绑定，建议封装组件来进行使用。tinymce整体而言插件丰富、可扩展性强、页面样式可修改，感兴趣的小伙伴可以自己动手尝试一下~