【无标题】TINYMCE 富文本+vue （4.xxx版本）

最新推荐文章于 2024-06-24 11:34:51 发布

weixin_37651366

最新推荐文章于 2024-06-24 11:34:51 发布

阅读量331

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_37651366/article/details/126598647

版权

本文介绍了如何在Vue项目中集成TinyMCE 4.8.2版本和@tinymce/tinymce-vue 3.2.3版本。首先通过npm安装所需的依赖，然后将tinymce的文件复制到public目录。接着创建一个子组件，包含图片上传功能，调用后端api.uploadImg接口。最后在需要使用富文本编辑器的页面引入子组件，并定义相关处理函数。

摘要由CSDN通过智能技术生成

1.版本号：

"tinymce": "4.8.2",

"@tinymce/tinymce-vue": "3.2.3",

2.安装

下载安装这两个插件。在终端中写入以下代码，进行安装

npm install tinymce@4.8.2 -save

npm install @tinymce/tinymce-vue@3.2.3 -S

安装之后，在 node_modules 中找到 tinymce文件并拷贝到 public 目录下

3.创建子组件

创建如图所示的子组件，index.vue

代码如下：

<template>
  <div class='tinymce'>
    <editor id='tinymce' v-model='sunHtml'  :init='init' ></editor>
  </div>
</template>

<script>
import * as api from '@/api/system'
import axios from 'axios'  // 因为上传图片地址是本地服务器  所以我们需要引入axios当然你也可以用原生ajax或fetch来发请求
import tinymce from 'tinymce/tinymce' // 引入我们下载的tinymce包
import '/public/tinymce/themes/modern/theme'  //引入theme文件，必须要引入的
import Editor from '@tinymce/tinymce-vue'  // 必须要引官方给我们的配置vue包
// 下方import引入都是文本编辑器中的配置项，这个根据个人需求去引入
import '../../../public//tinymce/plugins/image'
import '../../../public/tinymce/plugins/link'
import '../../../public/tinymce/plugins/code'
import '../../../public/tinymce/plugins/table'
import '../../../public/tinymce/plugins/lists'
im