Vue 使用wangeditor设置默认值的问题

最新推荐文章于 2024-07-29 19:26:43 发布
最新推荐文章于 2024-07-29 19:26:43 发布
阅读量3.3k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/madboy324/article/details/120892247
版权
本文介绍了在Vue项目中使用wangeditor遇到的设置默认值问题，包括内容无法正确显示在编辑器中以及数据库HTML字符串不被识别。通过分析问题并提供解决方案，如使用ref绑定和在编辑器外包裹div元素，以及在Vue中处理数据为HTML格式，成功实现了从数据库读取内容并显示在编辑器中。
摘要由CSDN通过智能技术生成

1.对于wangeditor引用

参考官方文档（vue的demo，看不懂文档可以直接看代码）

2. 想实现的效果

需求在于，如果你想修改新闻，点击修改然后获取数据库的值，放到编辑框进行编辑。
在这里插入图片描述

3.出现的问题

  1. 放不进去，不是在上面就是在下面
  2. 数据库的String 放进去带标签
  • 问题1(这里使用ref绑定，和id标签绑定一样)
  <div ref="editor">
     1233
  </div
最低0.47元/天 解锁文章
王三十二
关注
专栏目录
vue3+ts 绑定props 默认值的方式：withDefaults
m0_67265464的博客
03-01 2366
withDefaults 作用是给defineProps绑定默认值的api 父组件 <template> <TsSample :msg='msg' @on-updated='onUpdated' title='title' @on-delete='onDelete'/> </template> 子组件 <template> <h1>ts sample</h1> <p>{{ msg }}</p>
wangeditor富文本编辑器如何设置默认字体，字体大小...
sinat_40292249的博客
02-25 2900
如何在初始化时，设置一个默认的字体、字号
wangEditor富文本编辑器的配置以及一些坑
zhangjiayu88的博客
04-26 3976
因为我写的项目当中这个需求是新加的，所以绑定的值很可能为null，也有可能会出现这个报错。监听了v-model绑定的值后发现，本来是能正确拿到数据的，但是在显示之前wangEditor将绑定到的值进行了一次重置，导致报错。解决：让富文本组件随着弹框的关闭进行销毁，使用v-if。
在react中使用wangeditor富文本
最新发布
outstanding木槿
07-29 565
在react中使用wangeditor富文本
关于文本编辑器设置值和获取值
03-03
这个是详细讲解怎么获取文本编辑器中的值 以怎么将值赋值给文本编辑器
vue wangEditor富文本编辑器 默认显示与自定义工具栏配置
老段的CSDN的博客
09-26 3201
3.怎么拿到编辑器里边的DOM元素通过。：来修改菜单栏和编辑器的配置。2.自定义显示 根据。
wangEditor内容赋值
兰颜的博客
08-30 4000
接上文 ，https://blog.csdn.net/qq_39704057/article/details/119993871?spm=1001.2014.3001.5501 需要把已经存起来的内容在编辑器里面显示 关键代码 this.editor.txt.html(res.msg[0].content) 括号里面的值，就是存储起来的数据，根据个人的项目的字段不同，需要变化 完整代码 <el-form-item label="内容" class="block"> &lt
wangeditor(Vue 3 初始化配置 文字的 字体大小 、样式、)
weixin_55896343的博客
05-13 1009
这里是设置初始化的文字信息的配置 :defaultContent=“jsonContent”
vue 使用 wangEditor
sunlizhen的专栏
12-13 673
1，vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2. 创建组件 <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <...
Vue集成WangEditor的初次使用
weixin_44119790的博客
12-13 1054
作为一个菜鸟表示真的很难吖。 这个插件就一个字：小巧！好用！ 首先我是Vue+springboot的前后端分离 所以在查的时候结合文档和网上的一些例子，在此感谢帮助到我的大佬们！ 因为富文本编辑框之后会在很多地方用到，所以我采用了把WangEditor单独拎出来做一个组件然后用父子模块通信的方式来实现富文本的编辑。 项目的文件结构如图： 然后这个WangEditor.vue可以把它理解成子模块，...
wangeditor 一个好用的编辑器
03-18
wangeditor 一个好用的编辑器，
vue使用wangEditor(富文本编辑器)时，异步获取数据，后端返回数据无法显示问题（已解决）
F_fengzilin的博客
07-22 4399
关于异步获取数据，富文本编辑器无法显示1.解决方案：一定要在使用到wangEditor的组件中进行网络请求。原因，mounted()生命周期中，虽然可以操作data中的变量，但是不可以进行赋值操作解决办法，将wangEditor的实例创建在网络请求到后台数据的函数中。代码如下：(我进行了网络请求request的封装，需要的话自取)request文件,使用时记得导入 1.解决方案：一定要在使用到wangEditor的组件中进行网络请求。 大多数wangEditor创建实例是在mounted()中,而异步获取后
wangEditor中使得光标处于文本末端的方法记录
m0_45059466的博客
12-17 4027
wangEditor中使得光标处于文本末端的方法记录问题描述前言解决方法位置示例 问题描述 最近在使用vue写前端项目中有个需求是从父组件给wangEditor赋值后光标自动处于文本末端。 前言 wangEditor在默认情况下，父组件给其设置内容后光标会处于首端，不符合需求。网上找的直接通过js操作的方法经过尝试没有作用(也可能是没写对)，官方文档也没找到合适的方法。最终经过一番尝试后成功解决，特此记录，希望能帮到有类似需求的人。 解决方法 在父组件与wangEditor通信的双向绑定数据value的wa
wangeditor自定义图片视频上传
JHTMer的博客
10-10 1186
wangeditor自定义图片视频上传
在vue项目中使用wangEditor
源码好优多
11-17 2874
1，vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2，创建公用组件 在components中创建wangEditor文件夹,文件里面新建index.vue 组件index.vue内容为 <template> <div ref="editor"></div> </template> <script> import E from 'wangeditor'; export defau
vue3+vite4+wangEditor5 打印默认工具栏配置
sd_jiade的博客
03-14 1039
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。我的理解是这个响应系统在数据更新后不是立即就更新，要到下一个轮训tick才更新，所以要获取editor这个实例要放在该方法里。1. 安装wangEditor5及wangeditor5-for-vue3。
wangEditor 实现回车p标签默认自带行高1.6
weixin_44179923的博客
05-13 1545
需求： 想实现在富文本里面按回车 生成的p标签带行内样式 搜索源码里面: <code><br></code> 在var $selectionElem = editor.selection.getSelectionContainerElem();后面打印$selectionElem ，浏览器展开看到elems字段 继续展开找到style字段进行修改就行了。 xxxxxx.style.lineHeight='1.6' ...
wangEditor 初始化设置行高、字体和字体大小
weixin_42597632的博客
03-07 7670
wangEditor选择默认行高，wangEditor选择默认字体，wangEditor选择默认大小。
vue3 props设置默认值
12-05
在Vue3中，我们可以使用`defineProps`函数来定义组件的props，并且可以通过`default`属性来设置默认值。以下是两种设置默认值的方法： 1. 使用`default`属性设置默认值 ```vue <script> import { defineProps } from 'vue' export default { props: defineProps({ title: { type: String, default: '默认标题' } }) } </script> ``` 2. 使用`withDefaults`宏设置默认值 ```vue <script setup lang="ts"> import { defineProps, withDefaults } from 'vue' const props = withDefaults(defineProps({ title: { type: String, required: true } }), { title: '默认标题' }) </script> ``` 需要注意的是，如果使用基于类型的声明式，就不能给props声明默认值了。此时可以通过`withDefaults`编译宏来解决这个问题。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值