使用tinyMCE-vue实现简单的富文本编辑器
tiny中文文档http://tinymce.ax-z.cn/
最近有需求需要开发一个简单的富文本编辑器,自己做完之后整理下遇到的问题及解决办法或思路;
package.json依赖包:
"dependencies": {
"@tinymce/tinymce-vue": "^3.2.0",
"tinymce": "^5.2.0",
}
这里是vuejs的安装依赖
npm install @tinymce/tinymce-vue -S
安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下
一、配置公共组件:
<template>
<div class="tinyMCE">
<Editor
v-model="content"
:key="showKey"
ref="editor"
:api-key="apiKey"
:init="editorInit"
></Editor>
</div>
</template>
<script>
import Editor from "@tinymce/tinymce-vue";
import axios from "axios";
import {
getAuth } from '@/utils/auth'
export default {
name