【vant4&&tinymce】vant4中使用tinymce无效（点击无反应等）

已于 2022-12-29 21:52:21 修改
阅读量976 收藏 1
点赞数 1
分类专栏： Vant4 tinymce 文章标签： 前端 vue.js
于 2022-12-29 21:49:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43614372/article/details/128488305
版权

问题描述

vant4框架使用tinymce富文本编辑器无法点击菜单栏以及所有按钮。

如图，无论怎么点tinymce无法弹出功能选项，任何功能都用不了
在这里插入图片描述

问题解决

  • 因为我使用了vant4的 @vant/touch-emulator 模块， 该模块是vant4适配pc端事件的，当我点击tinymce时会与该模块产生冲突，致使tinymce无法使用编辑功能。

在这里插入图片描述

  • 放弃使用@vant/touch-emulator模块即可使用tinymce编辑功能

在这里插入图片描述

后记

我vant4的版本是"vant": "^4.0.3"

  • 不到万不得已一定一定一定不要使用vant4的 @vant/touch-emulator 模块。
  • 原因：该模块会与很多第三方库产生冲突，比如点击某个按钮没反应。
视觉CG
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现移动端富文本编辑器功能
刘杨造梦的博客
06-24 765
移动端富文本编辑器市面非常之少，因客户需求找了不少，不是标题党就是pc端自适应那种无法满足需求，找了好久终于找到了这个，下载地址：正在上传…重新上传取消https://gitee.com/lyzmzcom/artEditor.git 两个关键的js路径example/js/index.js dist/index.min.js修改dist/index.min.js中的console.error("文件太大");为alert("文件太大");否则上传文件超过限制不会有提示，非常不友好接着修改example/j
vant里面怎么使用import引用_vuequilleditor（富文本编辑器使用）
weixin_39638188的博客
12-12 799
vue项目中，终端npm进行安装依赖npm install vue-quill-editor --save两种引用方法，全局引用和局部引用全局引用，项目入口文件中(main.js)注册import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles样式引入import 'quill...
Vue使用Tinymce富文本编辑器media插件遇到的坑
weixin_45941290的博客
04-11 2426
Vue使用Tinymce富文本编辑器media插件遇到的坑 萌新一枚，最近在学习 Vue使用tinymce富文本编辑器中的，魔改media插件添加视频预览时，遇到了出现两个视频的问题。在网上也没找到相同的问题（可能是我这个小白还不会用搜索引擎，汗），所以自己瞎整整。感觉有不对的地方请指正。但还请勿喷！勿喷！勿喷！重要事情说三遍 魔改media详见TinyMCE中文文档 出现的问题就像下图这样（因为...
vue-quill-editor 富文本编辑器的使用方法
qq_43235503的博客
12-16 432
vue-quill-editor 富文本编辑器的使用方法
富文本编辑器Tinymce vue3项目使用以及遇到的问题
最新发布
HL0512的博客
05-11 1013
富文本编辑器Tinymce的使用以及使用过程中遇到的问题
tinymce富文本文本添加点击事件
cyj0919的博客
09-02 1169
注意，具体的代码实现可能会根据你使用的富文本编辑器和前端框架而有所不同，上述代码只是一个示例。请根据你实际使用的编辑器文档和API来进行相应的操作。要给富文本编辑器的文本增加点击事件，首先需要确定你使用的富文本编辑器是哪个。如果你使用的是其他富文本编辑器或者自己开发的富文本编辑器，可能需要参考其官方文档或者API来了解如何添加点击事件。确定要添加点击事件的文本区域或者元素，例如一个按钮、链接或者特定的文字部分。在编辑器初始化或者加载完成后，找到该元素，并给它绑定点击事件的监听器。
富文本编辑器
沧笙踏歌的博客
04-13 160
vue中用 jQuery中用 博客园用的TinyMCE csdn用的ckeditor
基于vue-cli4和vant搭建的移动端开发模板
02-19
4. **全面覆盖**：Vant涵盖了常用的移动端组件，如按钮、表单、导航、布局等，满足多样化的需求。 5. **高性能**：Vant采用了Vue 2.x的虚拟DOM和优化技术，确保在移动设备上的流畅体验。 6. **兼容性**：Vant对...
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
mpvue-vant 是一个专门为 Mpvue 开发者准备的仓库，记录了如何在Mpvue中使用Vant Weapp组件库的实践经验和注意事项。这个教程由多位开发者共同完成，确保所有Vant Weapp组件在Mpvue中都能正常工作。 ### 二、使用...
详解Vue基于vue-quill-editor富文本编辑器使用心得
11-26
vue-quill-editor的guthub地址 ，现在市面上有很多的富文本编辑器，我个人还是非常推荐Vue自己家的vue-quill-deitor，虽然说只支持IE10+,但这种问题，帅给别人吧！ 那么我们直击正题，在vue中使用quill呢，我们需要npm进行安装，安装命令如下： npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill
在微信小程序中使用vant的方法
10-16
注意，这里的 `v-model` 是 Vue 的语法，但在微信小程序中，你需要使用微信提供的数据绑定方式，如 `wx:if` 或 `bindtap` 等。对于 `v-model`，你需要在对应的 `.js` 文件中声明并初始化 `value` 变量。 例如，在 `...
java menu单击事件_TinyMCE自定义工具栏menuItem单击触发所有父项的单击事件
weixin_35819860的博客
02-16 850
我正在为我的tinyMCE添加一个自定义工具栏按钮tinyMCE.init({mode: "specific_textareas",editor_selector: "mceEditor",width: 600,toolbar_items_size: "small",plugins: ["advlist autolink lists link image charmap print preview...
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-element-admin中tinymce组件失效
Goldfish_MIAO的博客
05-18 3923
解决vue-element-admin中tinymce富文本编辑器失效
tinyce编辑器第二次点击不了的问题
m0_62838929的博客
04-07 398
/ 随机生成0-99 的随机数，以防key一样，最开始我并没有定义这个参数，直接取form.id，然后发现点击编辑关闭，再次点击进来富文本里得内容就不显示了，而且不能点击和修改，这里就是因为点击第一次取的id和第二次取的id是一样的。首先我是引入了这个tinymceEditor,重点就是这两个参数。// 只需要在methods中添加这个方法就可以了。// 新建、编辑之后。
tinymce编辑器右键只有链接解决办法
qq_38750893的博客
07-06 1111
在使用link插件之后。编辑器内的右键全部变成了链接，将很多好用的右键菜单都屏蔽了
使用vant 遇到的坑
漫天随飞雪的博客
03-31 3436
1：解决移动端点击输入框input放大 在index.html加入 <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum...
请用vant4在vue中使用日期时间选择组件
06-13
好的，以下是在Vue中使用Vant 4的日期时间选择组件的代码示例： 1. 首先，确保已经安装了Vant 4，并在Vue项目中引入了它： ```bash npm install vant@next ``` ```javascript import { createApp } from 'vue'; import { Button, DatetimePicker } from 'vant'; import 'vant/lib/index.css'; const app = createApp({}); app.use(Button); app.use(DatetimePicker); app.mount('#app'); ``` 2. 在需要使用日期时间选择组件的组件中，添加以下代码： ```vue <template> <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" :show-toolbar="false" :formatter="format" /> </template> <script> export default { data() { return { currentDate: new Date(), minDate: new Date(2010, 0, 1), maxDate: new Date(2030, 11, 31), }; }, methods: { format(date) { return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`; }, }, }; </script> ``` 在上面的代码中，我们使用了`<van-datetime-picker>`标签来创建日期时间选择组件，并使用`v-model`来绑定选定的日期时间。我们还定义了最小日期和最大日期，以及一个自定义的日期格式化函数。 这就是使用Vant 4在Vue中使用日期时间选择组件的完整代码示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值