关于wangeditor富文本编辑器造成的回显焦点失去的问题

最新推荐文章于 2024-04-10 18:46:24 发布
置顶 最新推荐文章于 2024-04-10 18:46:24 发布
阅读量5k 收藏
点赞数
分类专栏： 前端 wangeditor。js 文章标签： wangeditor.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45518783/article/details/102599904
版权

wangeditor富文本回显问题

在项目开发中，常常遇到回显的问题，回显过程中通过那Html 的值，通过watch 监听，将值赋给富文本中
this.editor.txt.html(n)
但是在初始话中，需要将富文本初始话两次this.editor.create()
要不会造成我们的焦点在失去，每次在中间添加完之后，焦点默认到最后一个位置
，那么在校验的时候，需要在this.editor.customConfig.onchange前对富文本进行初始，this.editor.create() 监听完成之后，在进行初始化

Style库昊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wangeditor 两个editor失焦解决办法
qq_45856865的博客
05-11 1161
一个editor编辑，一个editor展示，一编辑就失焦。
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
09-03
本文给大家带来的是一款非常不错的富文本编辑器WangEditor，他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片，而且代码量很少，下面我们就来分析下他是如何实现的呢
[Vue2+wangEditor] 简单配置实现富文本编辑器图片上传并回显
最新发布
zennnlee的博客
04-10 799
记录总结本人在配置编辑器的图片上传功能过程中, 遇到的一些问题和要点。
Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点
weixin_42069147的博客
06-02 1252
Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点
解决富文本编辑器wangeditor 光标跳动的问题
weixin_50606255的博客
12-23 3073
为什么会出现光标总是跳动到末尾的情况？？ 通常我们会将编辑器封装为一个组件来使用，编辑的内容就是通过父组件传递给子组件，每次编辑父组件中的内容都会触发子组件(编译器)中的onchange事件，子组件再将新的改变后的值传递给父组件，父组件一接收到值光标就会自动跳转到内容末尾。 如何解决这种问题？？ 源头就是要解决onchange事件改变内容的时机，不能一在父组件写东西就触发，或者是触发之后在我们需要更新后的内容时再传递给父组件。 即在onchange事件中添加判断条件 以下代码的修改和添加都在这个示
wangEditor光标乱跳问题
Admin_yws的博客
07-16 2240
问题描述 在使用wangEditor时，输入内容，按enter切换下一行时，光标切过去，又自动跳回来。 造成问题原因 是因为封装了组件后，使用父级传入的内容，每次输入都会触发wangEditor的onchange事件，而在onchange事件中又使用了子传父的方式将修改后的值赋给父组件，父组件的值改变后导致子组件wangEditor的值也被修改，所以出现光标总是跳转到最后。此时，并发的还有另外一个问题就是，撤销和恢复点击后无效。 解决方案 在子组件watch监听父组件传入的值时，加入判断，目的是输入时内容是
解决layui富文本编辑器图片上传无法回显的问题
10-16
今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
Vue-Quill-Editor富文本编辑器的使用教程
10-17
- `@blur`: 编辑器失去焦点时触发。 - `@focus`: 编辑器获得焦点时触发。 - `@change`: 编辑器内容发生变化时触发。 示例事件处理函数： ```javascript methods: { onEditorReady(editor) { // 编辑器准备就绪时...
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
在现代Web开发中，富文本编辑器已经成为必不可少的工具，用于创建和编辑具有多样格式的内容。Vue.js，作为一款流行的前端框架，与组件库Element-UI的结合为开发者提供了便捷的UI解决方案。而Quill，作为强大的富文本...
WangEditorV5回显之后出现了光标乱闪,以及回车后清空内容的问题
m0_73876690的博客
05-31 668
那我还要在change同时做一些其他事情怎么办,这时候就可以使用一个react的hooks:useEffect。我得onchange事件,又封装了一个方法,和官方Demo不太相同,官方是直接setstate来保存html了。因为我需要借助state去做一些其他事情,所以才想到在写一个方法,故,改成官方的写法就不会出现以上问题了。这个钩子我的理解就是和watch一样,监听html是否改变。回显之后在输入内容,就有可能出现光标乱闪,以及这种报错。还有可能是回车之后所写的内容直接消失了,例如这样。
vue使用wangeditor富文本编辑器，以及问题归纳
qq_28353055的博客
12-10 1970
官网请移步：http://www.wangeditor.com/ 1.添加 // 安装 npm install wangeditor -s 2.简单使用 封装： // 引入wangeditor以及样式 import Editor from 'wangeditor' import 'wangeditor/release/wangEditor.min.css' export default { ...
关于富文本插件wangEditor的常规性问题总结
weixin_49848050的博客
12-21 1215
关于富文本插件wangEditor的常规性问题总结 官网地址：https://www.wangeditor.com 1、网页粘贴的内容，样式不全，部分样式被冲掉 可通过以下两行代码设置 来关闭样式过滤。 editor.config.pasteFilterStyle = false editor.config.pasteTextHandle = true 2、压缩后的代码回显在富文本框内 editor.txt.html(`<p>${this.modifyThe.blogCon
wangeditor 不识别html_wangEditor光标跳动解决方案
weixin_42503008的博客
01-12 1496
项目中需要使用富文本编辑器，经过调研，决定采用轻量级的wangEditor。结果发现坑不小啊尤其搭配着vue双向绑定的时候，光标经常就跳到了末尾。撤销功能也不好使了。多次在网上查阅资料，最简单的治标不治本的方法是：editor.customConfig.onchangeTimeout = 1000停止编辑后，等1s钟，再通知父组件更新数据。昨天经过多次尝试，实验出了一种行之有效的解决方案...
vue项目中使用wangeditor富文本编辑器
weixin_42132044的博客
10-28 1037
wangEditor - 轻量级 web 富文本编辑器 案例图片 遇到的问题： 问题1：在同一个页面，实现多个文本编辑器。 解决方案：有多少个字段需要富文本编辑器，就new多少个富文本编辑器对象。 问题2：富文本编辑器菜单功能区域的功能按钮z-index太大。 解决方案：z-index设置合适的值，并且加上 !important 提高权重。 问题3：第一次鼠标全选删除不触发onchange事件。 解决：通过监听input事件，当没有内容时，主动触发onchange事件 .
关于tinymce富文本第二次点击无法编辑，切换页面后无法点击，刷新页面可以点击
weixin_52031155的博客
04-27 5123
无法点击时： 可以点击： 说一说最近遇到的一个大大大BUG吧，如上图所示，我点击进去一个有富文本编辑的页面，这时候我是可以编辑的，第一次点击！随后我切到了别的页面，或者我再次点击同一个页面，这时候就无法编辑了！ 好，我不慌!我找啊找解决方法，网上都说是第二次点击的时候，它的init方法不行了，才怪！ 接下里说说我的解决方法，绝对有用！！！ 首先我认为我们使用的这个富文本就如同我们调用接口使用返回数据时，我们在渲染的时候v-for要带一个key值的是一样的。 我们第一次点击进去的时候，tinymce一切正常
解决编辑框移动端不能获取焦点的问题 --- 针对 wangeditor 编辑器
overflow_mo的博客
04-18 2005
解决编辑框移动端不能获取焦点的问题 FastClick.prototype.needsClick = function (target) { if (target.className.indexOf('w-e') !== -1) { return true } if (target.parentElement) { return this.needsClick(targe...
Vue+wangEditor 使用实例 已解决光标乱跳
qq_43193513的博客
05-28 3640
怎么说呢，最近在做公司的官网，文章管理这一块需要用到富文本编辑器，自己试了几个市面上比较火的编辑器感觉效果都不是太理想，最后感觉这个wangEditor还不错，就参照着官网和百度上的资料自己写了一个组件。 这是效果图 话不多说上代码 子组件的代码 这里重要的都加了注解 <template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left"></div>
springboot整合wangEditor富文本编辑器
05-23
要在Spring Boot中整合WangEditor富文本编辑器，可以按照以下步骤进行操作： 1. 在pom.xml文件中添加以下依赖： ```xml <!--wangEditor富文本编辑器--> <dependency> <groupId>com.github.wangfengtao</groupId> <artifactId>wangeditor-spring-boot-starter</artifactId> <version>1.4.4</version> </dependency> ``` 2. 创建一个Controller，并添加一个返回WangEditor的接口： ```java @RestController @RequestMapping("/editor") public class EditorController { @GetMapping("/wangeditor") public ModelAndView wangeditor() { return new ModelAndView("editor"); } } ``` 其中，`editor`是一个HTML模板文件，用于展示WangEditor富文本编辑器。 3. 在`resources/templates`目录下创建`editor.html`文件，代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WangEditor富文本编辑器</title> <!-- 引入wangEditor的CSS文件 --> <link rel="stylesheet" type="text/css" href="/webjars/wangeditor/4.5.1/css/wangEditor.min.css"/> </head> <body> <textarea id="editor" name="content"></textarea> <!-- 引入wangEditor的JS文件 --> <script type="text/javascript" src="/webjars/wangeditor/4.5.1/js/wangEditor.min.js"></script> <script type="text/javascript"> // 创建富文本编辑器 var editor = new wangEditor('#editor'); editor.create(); </script> </body> </html> ``` 4. 启动应用程序，并在浏览器中访问`http://localhost:8080/editor/wangeditor`，即可看到WangEditor富文本编辑器。 以上就是在Spring Boot中整合WangEditor富文本编辑器的步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值