vue项目实现富文本编辑器(实践用过)

最新推荐文章于 2024-09-10 10:55:39 发布

置顶

愿祖国繁荣昌盛user

最新推荐文章于 2024-09-10 10:55:39 发布

阅读量4.7k

点赞数 4

分类专栏： vue富文本编辑器文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49875821/article/details/119250056

版权

本文介绍了如何在Vue项目中实现TinyMCE富文本编辑器的集成，包括下载安装、静态资源引入、main.js配置、Vue组件使用以及遇到的下拉框层级问题和'setup'报错的解决方案。通过提供的Codepen示例和官方文档，可以详细了解到整个过程。

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

1.下载安装

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

2.下载之后在 index.html 中引入

先将node_modules下的 tinymce 文件复制到static 下

<script src="./static/tinymce/tinymce.min.js"></script>

下拉框层级可能不够看不到下拉框显示

就在上面那行代码下引入一下代码

覆盖原有样式

<style>
      .tox-tinymce-aux {
        // 未显示的下拉框class 
        z-index: 3000 !important
      }
</style>

3.main.js 中引入

import VueTinymce from '@packy-tang/vue-tinymce'

关注

专栏目录