封装 Tinymce 富文本编辑器组件

原创

已于 2024-03-13 16:47:38 修改 · 置顶 · 563 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-03-13 16:44:08 首次发布

1.效果图

2.实现过程

tinymce 官方为 vue 项目提供了一个组件 tinymce-vue
```
npm install @tinymce/tinymce-vue -S
```
在assets 文件下新建tinymce文件放置zh_CN.js 和 skins 文件这俩文件从依赖复制

3.代码

<!-- tinymc富文本 -->
<template>
    <div>
        <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick">
        </editor>
    </div>
</template>
  
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/zh_CN.js"; // 本地汉化
import "tinymce/themes/silver/theme";
import