Vue3项目中使用富文本编辑器-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3项目中使用富文本编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

tinymce简介
一、安装
二、使用步骤
- 1.封装组件
- 2.组件中挂载
- 3.应用富文本
总结

前言

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整体而言插件丰富、可扩展性强、页面样式可修改，感兴趣的小伙伴可以自己动手尝试一下~文章来源地址https://www.toymoban.com/news/detail-556055.html

到了这里，关于Vue3项目中使用富文本编辑器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！