Vue3使用tinymce富文本编辑器

Vue3使用tinymce富文本编辑器

tinymce中文文档：http://tinymce.ax-z.cn/

首先下载我的Demo到你的本地，Demo地址：https://gitee.com/szxio/tinymce-editor

第一步：将我项目中的 public 下的 tinymce 文件夹复制到你的 public 目录中去

第二步：复制 src/components 下的 TinymceEditor 组件到你的项目中

第三步：使用，下面是一个案例代码

<template>
  <div class="d-flex">
    <div style="width: 50%">
      <TinymceEditor v-model="content" @input="inputContent"/>
    </div>
    <div class="right" v-html="content"></div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import TinymceEditor from "../components/TinymceEditor"

const content = ref("Hello World")

const inputContent = (newVal) => {
  console.log(newVal)
  content.value = newVal
}
</script>

<style scoped lang="scss">
.d-flex {
  display: flex;
  gap: 10px;

  .right {
    flex: 1;
    box-shadow: 0 1px 10px 3px #dbdbdb;
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>

最后在你的项目中安装依赖，启动看效果

npm i @tinymce/tinymce-vue

效果展示