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

最新推荐文章于 2024-09-27 16:08:46 发布
最新推荐文章于 2024-09-27 16:08:46 发布
阅读量3.4k 收藏
点赞数
分类专栏： 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元/天 解锁文章
王三十二
关注
专栏目录
Vue集成WangEditor的初次使用
weixin_44119790的博客
12-13 1078
作为一个菜鸟表示真的很难吖。 这个插件就一个字：小巧！好用！ 首先我是Vue+springboot的前后端分离 所以在查的时候结合文档和网上的一些例子，在此感谢帮助到我的大佬们！ 因为富文本编辑框之后会在很多地方用到，所以我采用了把WangEditor单独拎出来做一个组件然后用父子模块通信的方式来实现富文本的编辑。 项目的文件结构如图： 然后这个WangEditor.vue可以把它理解成子模块，...
vue使用wangEditor(富文本编辑器)时，异步获取数据，后端返回数据无法显示问题（已解决）
F_fengzilin的博客
07-22 4480
关于异步获取数据，富文本编辑器无法显示1.解决方案：一定要在使用到wangEditor的组件中进行网络请求。原因，mounted()生命周期中，虽然可以操作data中的变量，但是不可以进行赋值操作解决办法，将wangEditor的实例创建在网络请求到后台数据的函数中。代码如下：(我进行了网络请求request的封装，需要的话自取)request文件,使用时记得导入 1.解决方案：一定要在使用到wangEditor的组件中进行网络请求。 大多数wangEditor创建实例是在mounted()中,而异步获取后
vue3下富文本编辑器@wangeditor的一些配置
就是个弟弟的博客
01-26 389
【代码】vue3下富文本编辑器@wangeditor的一些配置。
关于文本编辑器设置值和获取值
03-03
这个是详细讲解怎么获取文本编辑器中的值 以怎么将值赋值给文本编辑器
wangEditorV4版本基本食用说明书
最新发布
m0_54343635的博客
09-27 231
v5版本发布有些东西不一定适用，自己看看自己的依赖package.json里面是不是。记得创建自己的变量this.editor和html的id元素#editor哦~增加，修改，里面没有传参就是新建，有传参就是修改。
wangeditor富文本编辑器如何设置默认字体，字体大小...
sinat_40292249的博客
02-25 3385
如何在初始化时，设置一个默认的字体、字号
vue wangEditor富文本编辑器 默认显示与自定义工具栏配置
老段的CSDN的博客
09-26 3295
3.怎么拿到编辑器里边的DOM元素通过。：来修改菜单栏和编辑器的配置。2.自定义显示 根据。
wangEditor内容赋值
兰颜的博客
08-30 4081
接上文 ，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 1458
这里是设置初始化的文字信息的配置 :defaultContent=“jsonContent”
VUE-NEXT-ADMIN为wangEditor在vue3环境中配置上传文件
永乐的博客
03-10 584
vue-next-admin后台管理模板是vue3+ts实现的，对于后端开发小白来说需要了解vue和ts的简单语法才能大致看懂。模板的编辑器使用的是wangEditor，所以如何配置编辑器的文件上传配置首先还是要先了解wangEditor官方文档。里提供了详细的上传图片相关可用配置项，由官方给的配置项可以知道我们只需要给上面的。配置里添加上传文件的相关配置就行，那可配置的属性就继续从官方文档找了。根据标注的内容可以发现我们只要在这个。属性，就可以实现配置上传文件了。官方文档关键代码片段。
wangEditor中使得光标处于文本末端的方法记录
m0_45059466的博客
12-17 4120
wangEditor中使得光标处于文本末端的方法记录问题描述前言解决方法位置示例 问题描述 最近在使用vue写前端项目中有个需求是从父组件给wangEditor赋值后光标自动处于文本末端。 前言 wangEditor在默认情况下，父组件给其设置内容后光标会处于首端，不符合需求。网上找的直接通过js操作的方法经过尝试没有作用(也可能是没写对)，官方文档也没找到合适的方法。最终经过一番尝试后成功解决，特此记录，希望能帮到有类似需求的人。 解决方法 在父组件与wangEditor通信的双向绑定数据value的wa
wangeditor 一个好用的编辑器
03-18
wangeditor 一个好用的编辑器，
vue3+ts 绑定props 默认值的方式：withDefaults
m0_67265464的博客
03-01 2391
withDefaults 作用是给defineProps绑定默认值的api 父组件 <template> <TsSample :msg='msg' @on-updated='onUpdated' title='title' @on-delete='onDelete'/> </template> 子组件 <template> <h1>ts sample</h1> <p>{{ msg }}</p>
vue3+vite4+wangEditor5 打印默认工具栏配置
sd_jiade的博客
03-14 1085
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。我的理解是这个响应系统在数据更新后不是立即就更新，要到下一个轮训tick才更新，所以要获取editor这个实例要放在该方法里。1. 安装wangEditor5及wangeditor5-for-vue3。
Vue3+wangEditor富文本组件报错无效节点
weixin_64863035的博客
04-05 677
所以建议大家如果代码绝对没问题的情况下，碰到这个问题，可以卸载重装这个版本（全文其他都是废话）
在vue项目中使用wangEditor
源码好优多
11-17 2899
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
wangeditor使用
风吹过的博客
03-31 141
引入项目 npm install wangeditor -S 代码使用 HTML <div ref="editorElem"></div> JS import import E from 'wangeditor' mounted中初始化 data () { return { editor: null } } mounted () { this.editor = new E(this.$refs.editorElem) // 编辑器的事件，每次
Vue3中使用富文本编辑器之wangEditor
Salange1的博客
10-12 4750
之前公司项目有一个需求是在PC端发布文章，然后会在h5端推送文章，但是公司用到的富文本编辑器居然是UEditor,这款由百度提供的富文本编辑器已经停止维护几年了，个人感觉不好用，而且感觉样式也不太好看，最近新项目的富文本编辑器我果断选择了wangEditor,虽说是个人维护的项目，用起来还是挺顺手的，没有遇到大的问题。
wangEditor 修改 “视频”菜单，二次修改，实测可行，可参考
前端小狮的博客
11-02 4075
// 构造函数 function UploadVideo(editor) { this.editor = editor; } // 原型 UploadVideo.prototype = { constructor: UploadVideo, // 根据 debug 弹出不同的信息 _alert: function _alert(alertInfo, debugIn...
vue3 interface设置默认值
09-26
在 Vue.js 3 中，如果你想要在一个接口（通常用于描述组件的props或model的属性结构）中设置默认值，可以这样做： ```typescript interface MyComponentProps { name?: string; // 这里设置了name属性的默认值为undefined，表示该属性是可选的，默认未提供值 age: number; // age属性有明确的类型并设置了默认值，比如`age: number = 0` } // 或者，如果你想给整个对象设置默认值 interface MyObject { property1: string; property2: boolean; // 使用默认值的对象字面量 defaultValues: { property3: number } = { property3: 123 }; } ``` 当你创建这个接口实例，并传递到组件中时，如果省略了某些属性，它们就会使用这些默认值。例如： ```javascript const propsData: MyComponentProps = { // 如果不提供name，则会使用默认值（这里未提供） age: 30, }; new Vue({ components: { MyComponent: { props: MyComponentProps, template: `<div>年龄：{{ age }}，姓名：<span>{{ name }}</span></div>`, // name会在渲染时自动取自propsData }, }, data() { return {}; }, mounted() { this.$mount('#app'); }, }); ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值