Vue中使用富文本编辑器tinymce及遇到的问题

最新推荐文章于 2024-08-02 13:58:17 发布
原创 最新推荐文章于 2024-08-02 13:58:17 发布 · 8.1k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了在Vue项目中使用TinyMCE 5作为富文本编辑器的过程，包括安装、代码实现和遇到的问题。在使用中，通过vue-cli安装tinymce-vue包，将中文语言包引入，并在页面上初始化配置。然而，发现当tinymce封装到组件中时，导致在同一应用中仅有一个页面能正常工作。解决办法是确保每个模块独立使用tinymce实例。另外，动态绑定的数据初次加载时未显示，需排除pagebreak插件的影响。

vue中使用tinymce

项目中使用tinymce

tinymce富文本编辑器说明及效果示例

TinyMCE 5是一款功能强大且灵活的富文本编辑器，可以嵌入Web应用程序中。
API文档及管网地址:https://www.tiny.cloud/docs/api/tinymce/root_tinymce/
效果如下:
在这里插入图片描述

安装tinymce

vue安装tinymce:
1.在命令行或命令提示符上，安装Vue CLI工具包。

npm install tinymce -S

2.安装tinymce-vue包，并保存到你package.json用–save。

npm install --save @tinymce/tinymce-vue

3.中文语言包下载:

最低0.47元/天 解锁文章
vue中使用tiny-mce的使用心得
http://xueshuai.top
02-28 2435
首先安装两个组件 npm install @tinymce/tinymce-vue -S npm install tinymce -S 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到static目录下 tinymce 默认是英文界面，所以还需要下载一个中文语言包 然后将这个语言包放到static目录下 然后在...
【Vue3知识】Vue3集成富文本编辑器TinyMCE
最新发布
wendao76的专栏
03-30 3161
创建插件文件text: '自定义按钮',onAction: () => alert('点击自定义按钮')});});通过以上步骤，即可在 Vue 3 项目中快速集成功能丰富的 TinyMCE 编辑器，并支持高度定制化开发。如果需要手动修改翻译内容，可以编辑zh_CN.js'Redo': '重做','Undo': '撤销',// 其他翻译项...});通过以上步骤，TinyMCE 将完全显示为中文界面。
vue 2.0项目中使用tinymce富文本框遇到的问题
Charonmomo的博客
02-10 6992
安装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只有第一次可使用，后续就获取不到光标，只有刷新后才能再次使用
qq_41154522的博客
08-04 2361
原因：在弹框出现之前tinymce就创建了 解决 在tinymce编辑器外层加v-if<div class="ruleDiv" v-if="editversion"> <editor v-model="myValue" :init="init" :disabled="false"></editor> </div> 在弹框version设置为true后，设置editversion为truethis.$nextTick(() => { th.
vue子组件点击事件@click无效
哆啦A梦的百宝袋的博客
01-13 4975
vue子组件点击事件@click无效
vue整合tinyMCE富文本框架遇到的坑
热门推荐
qq_32814555的博客
01-04 1万+
https://blog.csdn.net/tonywu1992/article/details/82953577 我把value(val){             if(this.flag){                 tinyMCE.activeEditor.setContent(val);             }             this.flag=true;     ...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue中使用富文本编辑器
09-10
tinymce是一个广泛使用的轻量级富文本编辑器，它的功能十分强大，能够提供类似Word的编辑体验，适用于Vue.js项目中。 要将tinymce富文本编辑器集成到Vue项目中，首先需要确保在项目的依赖中包含了tinymce的相关文件...
vue3 中使用 TinyMCE 富文本编辑器
qq_40893035的博客
03-05 4895
找到官网，找到下载vue版本的地址上执行下载命令，将官网上的实例代码复制粘贴上去注册账号，获取免费的API-key汉化优化组件行为动作，比如上传图片。
vue2 使用 tinymce富文本编辑器
Z18834071903的博客
08-02 2997
vue2 使用 tinymce富文本编辑器
tinymce添加到modal,input无法聚焦编辑
qq_40905132的博客
04-02 2412
modal加了tinymce后，发现超链接、图片、视频那的input框无法聚焦编辑。查了网上资料有的说是在加载modal框之前加载了tinymce所以导致不行，修改了加载顺序发现无效。 最后翻墙找到的解决办法：添加下面这段代码，就可以完美解决了~ $(document).on('focusin', function(e) { if ($(e.target).closest(".tox...
vue 中使用tinymce
qq_32578989的博客
03-11 1431
参考链接https://www.cnblogs.com/wisewrong/p/8985471.html 参考链接https://liubing.me/vue-tinymce-5.html#L8 使用过程中遇到的一些问题 1.版本兼容问题 TypeError: Object(...) is not a function at Module../node_modules/_@tinymce_tinymce-vue@4.0.0@@tinymce/tinymce-vue/lib/es2015/ma..
TinyMCE在vue中的使用
blinH的博客
12-08 1611
在vue中使用TinyMCE编辑器
Vue弹框中使用tinymce只有第一次可使用
L_C_sunny的博客
03-23 2350
我在vue中使用tinymce 第一次打开页面初始化有效果 但第二次进入页面 初始化便无效 必须刷新页面才可以 以下是解决代码： <el-form-item label="富文本" prop="richText"> <tinymce-editor v-model="form.richText" v-if="open" :key="form.id" :height="600" /> </el-form-item> 直接给一个唯一值就可以 ...
解决vue-element-admin中tinymce组件失效
Goldfish_MIAO的博客
05-18 4423
解决vue-element-admin中tinymce富文本编辑器失效
vue cli2.x使用tinymce
IT_iosers的博客
11-03 1431
1、安装tinymce npm install tinymce -S npm install @tinymce/tinymce-vue -S 注意版本 新版本兼容vue3 安装指定版本 npm install tinymce@5.6.2 -S npm install @tinymce/tinymce-vue@3.2.6 -S 下载中文语言包 传送门 下载完之后在项目里新建public文件夹 1）在public目录下新建tinymce文件夹，并将下载的语言包解压到该目录下 2）在node_modu
vue中使用 tinymce 只有第一次打开时赋值有效问题
weixin_45595203的博客
11-03 1325
vue中使用 tinymce富文本编辑器 只有第一次打开时赋值有效问题已解决
vue中使用富文本Tinymce
m0_52244931的博客
03-07 703
vue中使用富文本Tinymce
TinyMce富文本编辑器 在Vue3 vue-vite中使用，遇到的重载和加载空白问题
c1263779060的博客
01-04 2864
路由跳转后TinyMce富文本编辑器加载空白。el弹出框二次加载空白问题
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值