vue3使用tinymce富文本编辑器出现的问题

最新推荐文章于 2024-06-06 14:36:21 发布
最新推荐文章于 2024-06-06 14:36:21 发布
阅读量2.2k 收藏 3
点赞数 2
文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/queen_rain/article/details/129147580
版权

1、在使用过程中发现有些属性无法使用，比如文字大小。

在toolbar中加上了也不显示出来
toolbar: ‘undo redo | blocks | bold italic underline strikethrough | fontsizeselect fontselect styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen’,
就是这几个单词，加上之后就会出现选择文字的大小，样式。如果加上之后还不出来，那就把tinymce的版本改了
在这里插入图片描述
我之前的版本是tinymce的版本是6.0.1，改之后就会出来了。

2、当富文本在某一个弹窗上使用时，工具栏会出现下拉选择时的层级比弹窗的小，所以，选项会被弹窗遮挡。比如点击段落下拉点不动。

在这里插入图片描述

图标点不动点击没有反应是因为下拉class层级不够。
正确修改：
在这里插入图片描述
需要把工具栏的下拉框的层级提高，找到tinymce这个文件夹下面的skin.css,skin.min.css
把class名为tox-tinymce-aux的第一个的z-index属性变大即可。
这是我在vue3中使用tinymce富文本编辑器遇到的坑，希望能帮助到大家

queen_rain
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
记录下Tinymce富文本插件遇到的问题
BlakeSteele的博客
03-20 811
react umi 框架 本地化 Tinymce插件
tinymce vue 部分工具不显示_在vue项目中使用tinymce编辑器（tinymce-vue）
weixin_39885469的博客
12-20 650
tinymce-vue笔记项目使用vue-cli 3.x版本，tinymce51. 安装npm install @tinymce/tinymce-vue2. 引用报第一个错，发现只安装tinymce-vue不可以，还需安装tinymce，执行npm install tinymce按示例初始化发现编辑器不显示，报“ theme.js:1 Uncaught SyntaxError: Unex...
jeecgboot vue3打包以后富文本框tinymce不显示
weixin_44934104的博客
04-17 1002
skins文件夹：node_modules/tinymce中找到skins文件夹，也复制到public/tinymce里。本人并不熟悉前端，遇到了问题基本靠百度，用此博客用来记录一下，如果有什么疑问或者有更好的解决方式请问评论区留言~打包到服务器以后，富文本框不会展示，搞了好久才搞出来，不确定是方法1还是方法2起效了，记录一下吧。2、打包的dist文件夹中，加入static文件夹，放入1中整理的tinymce文件夹。第一种方法：在public文件夹下放置tinymce文件夹，加入文件。
vue3中使用tinymce
最新发布
reembarkation的博客
06-06 435
vue3中使用tinymce
Vue tinymce富文本数据回显不了问题
Lzy_o的博客
05-11 1591
tinymce富文本数据回显
tinymce 6.3.1版本 文字大小控制器出不来的解决方案
weixin_43447037的博客
01-10 491
tinymce vue 6.3.1版本 文字大小选择器出不来
vue 2.0项目中使用tinymce富文本框遇到的问题
Charonmomo的博客
02-10 6140
安装Tinymce 现在tinymce-vue最新版本是4.0，用的vue3.0的了，所以搭建的vue2.0项目要使用之前的版本 ( 安装指定版本 ). 首先安装tinymce的vue组件，因为没有注册服务: npm install @tinymce/tinymce-vue@2.0.0 -S 接着安装tinymce: npm install tinymce@5.0.3 -S 当然也可以安装其他版本的. 我的vue2.0项目一开始直接使用以下命令安装最新版的tinymce, 然后报错了. 如果是vue3
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
在vue中使用tinymce富文本编辑器
09-18
在Vue项目中集成TinyMCE富文本编辑器是一项常见的需求，尤其对于需要用户输入大量文本内容的应用来说。TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，如字体样式调整、插入图片、创建表格等，使得内容...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
在vue3项目中使用tinymce编辑器
01-22
5. **在模板中创建编辑器**：在你的Vue组件模板中，创建一个对应的textarea元素，TinyMCE会自动将其替换为富文本编辑器： ```html <textarea id="myEditor"></textarea> ``` 6. **数据绑定**：如果需要将TinyMCE...
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
vue富文本Tinymce v-model无效，无法响应式发生改变
Effotzjw_小白慢慢踏全栈
04-09 3391
<tinymce ref="question" v-model="question" height="100" width="800" /> 问题： 今天想要初始化富文本框里面的内容，tinymce虽说用v-model用来绑定值，但是，当值改变的时候，并不会发生响应式改变，这就很坑了。 解决： 只能通过setContent来设置值 this.$refs.question.setContent('') 当一个页面中存在多个富文本框的时候 假设值 arr = [1,2,3] <div v.
解决vue-element-admin中tinymce组件失效
Goldfish_MIAO的博客
05-18 3923
解决vue-element-admin中tinymce富文本编辑器失效
vue项目中使用 tinymce富文本编辑器
ljlhah的博客
06-04 2671
下载解压后是一个langs文件夹里面有zh_CN.js文件，将langs文件夹放在我们刚才新建的static/tinymce文件目录下与skins文件夹同级。2.在node_modules依赖，会出现tinymce，找到之后，复制以下四个文件，放入public目录下，用tinymce包着是个4个文件。注意：在v-model绑定的，于点击事件做是事，主要为了有个表单验证，以及去重验证。这是一个汉化版，，在最一开始时富文本是英文需要转为中文。
TinyMce富文本编辑器 在Vue3 vue-vite中使用，遇到的重载和加载空白问题
c1263779060的博客
01-04 1145
路由跳转后TinyMce富文本编辑器加载空白。el弹出框二次加载空白问题
VUE集成tinymce-editor 踩坑 Uncaught SyntaxError: Unexpected token
soulman1234的专栏
05-25 8259
VUE集成tinymce-editor 踩坑 安装tinymce npm install --save @tinymce/tinymce-vue npm install --save tinymce 装好后，components里新增tinymce-editor.vue <template> <div class="tinymce-editor"> <editor v-model="myValue" :init="init" :disabl
tinymce 工具栏 不显示_CAD | CAD菜单栏和工具栏不见了
weixin_39954674的博客
11-28 535
通过切换工作空间来实现1. 这种方法是介绍通过切换工作空间来实现找到菜单栏和工具栏的方法；如图这是打开的找不到菜单栏和工具栏的CAD图纸。 2. 在打开的CAD图纸文件中我们点击上方工作空间的三角形(这个是切换工作空间的下拉菜单)，我们直接左键点击3. 在工作空间的下拉菜单中，我们可以看到有系统默认的几种工作空间；我们可以看到 草图与注释 三维基础 三维建模 Auto CAD 经典 和我们自定义的...
Vue中tinymce4.7.5设置字体大小和字体样式
热门推荐
qq_42822463的博客
07-18 1万+
1.第一步： 在toolbar中添加 fontsizeselect （字体大小）和 fontselect （字体样式） 2第二步： 我引用的是tinymce4.7.5 组件 Editor 在初始化editorInit中添加 以下 ， 代表字体小大格式范围 fontsize_formats: “8pt 10pt 12pt 14pt 18pt 24pt 36pt”, 代码示例 import E...
vue2富文本tinymce菜单栏
09-02
在Vue 2中使用TinyMCE富文本编辑器的菜单栏可以通过以下步骤实现： 1. 首先，安装TinyMCE编辑器。你可以通过以下命令使用npm安装TinyMCE： ``` npm install tinymce ``` 2. 在你的Vue组件中引入TinyMCE编辑器。你可以在需要使用编辑器的组件中引入TinyMCE： ```javascript import tinymce from 'tinymce'; import 'tinymce/themes/silver'; // 选择你需要的主题 import 'tinymce/plugins/advlist'; // 选择你需要的插件 export default { mounted() { tinymce.init({ selector: '#my-editor', // 在组件中添加一个id为'my-editor'的元素，作为编辑器的容器 plugins: ['advlist'], // 在这里添加你需要的插件 toolbar: 'formatselect | bold italic underline | numlist bullist', // 在这里设置你需要显示的菜单项 // 其他配置项... }); }, }; ``` 3. 在组件的模板中添加编辑器的容器： ```html <template> <div> <textarea id="my-editor"></textarea> </div> </template> ``` 在上述示例中，我们使用了Silver主题，并添加了advlist插件。菜单项通过`toolbar`属性进行配置，它会显示在编辑器工具栏中。 你可以根据自己的需求选择不同的主题和插件，并根据TinyMCE提供的文档进行更多的配置和定制化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值