Vue3学习(二十)- 富文本插件wangeditor的使用

这篇具有很好参考价值的文章主要介绍了Vue3学习(二十)- 富文本插件wangeditor的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面

学习、写作、工作、生活,都跟心情有很大关系,甚至有时候我更喜欢一个人独处,戴上耳机coding的感觉。

Vue3学习(二十)- 富文本插件wangeditor的使用

明显现在的心情,比中午和上午好多了,心情超棒的,靠自己解决了两个问题:

  • 新增的时候点击TreeSelect控件控制台会给出报错
  • 分类新增和编辑时,报错父类和电子书iD不能为空的问题

富文本插件wangeditor的使用

官网地址:https://www.wangeditor.com/

1、安装

npm i wangeditor@4.6.3 --save

2、使用 npm 安装

import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

3、在表单中使用

在form中加入标签,示例代码如下:

  <a-form-item label="内容">
    <div id="content"></div>
  </a-form-item>
  setup(){
    const editor = new E("#content")
    const add(){
      editor.create();
    },
    const edit(){
      editor.create();
    }
  }

4、效果:

Vue3学习(二十)- 富文本插件wangeditor的使用

写在最后

这里给广大网友个建议,就是学习要讲究时效性,比如你找的学习资料,看下是否严重超时,要么就会因为版本或者环境差异问题,足够你搞个1-2天了,哈哈,我上午大部份时间就是在搞环境,还好目前没任何遗留问题,感觉在变强中!文章来源地址https://www.toymoban.com/news/detail-837812.html

到了这里,关于Vue3学习(二十)- 富文本插件wangeditor的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue组件封装:基于Vue3+wangeditor富文本组件二次封装

    1.简介         开源 Web 富文本编辑器,开箱即用,配置简单。一个产品的价值,就在于解决用户的问题,提高效率、降低成本、增加稳定性和扩展性。wangEditor 不是为了做而做,也不是单纯的模仿谁,而是经过上述问题分析之后,给出一个系统的解决方案。旨在真正去解决用

    2024年04月08日
    浏览(47)
  • uniapp富文本编辑-editor-vue2-vue3-wangeditor

    不管vue2还是vue3,都推荐官方的editor组件, 官方手册 https://uniapp.dcloud.net.cn/component/editor.html 除了“ 微信小程序 ”,其他小程序想要使用editor组件实现富文本编辑,很难 ​​​​​​​ 第三方组件wangeditor在vue2,vue3在H5表现都很好,但是app环境下直接报错 reportJSException excep

    2024年03月10日
    浏览(53)
  • vue--使用wangEditor富文本

    wangEditor是一个基于jQuery的简单、开源的富文本编辑器,而Vue.js则是一种流行的JavaScript框架。将wangEditor与Vue.js结合使用,可以方便地在Vue应用中实现富文本编辑功能。本文将介绍如何在Vue中使用wangEditor,包括安装和配置wangEditor、在Vue组件中使用wangEditor以及相关的代码说明。

    2024年02月13日
    浏览(32)
  • vue2使用富文本wangeditor

    安装 引用 使用 在data(){}中定义editor: 然后根据需求调用就好了, this.$nextTick(()={})中处理的数据是因为后端返回来的数据结构是数组,遍历赋值标签转字符串的处理操作,如果后端返回来的是字符串直接赋值就好了。 注意: 要使用this.$nextTick(()={}),有时候会有渲染不上报错

    2024年01月22日
    浏览(36)
  • vue中使用wangeditor富文本编辑器

    官方文档  项目中要求实现富文本编辑器取编辑内容 这种编辑器有好多选择了wangeditor富文本编辑器 首先根据文档安装 再按照官方的指引 cv 如下代码 这个时候编辑器的功能已经实现了 如下图  但是目前为止他还不是我想要的 因为这个编辑器我想让他在弹窗中出现,而且我

    2023年04月26日
    浏览(51)
  • vue wangeditor 富文本编辑器的使用

    wangeditor 富文本编辑器,是实现类似CSDN文章编辑功能的插件(CSDN官方使用的是CKEditor 富文本编辑器)。 wangEditor官方文档 根据自己项目使用的框架,采取不同的引入方式,如vue2: npm install @wangeditor/editor-for-vue --save 在vue2中使用wangeditor  (官方文档配置) 上例配置的效果:

    2024年02月14日
    浏览(48)
  • Vue3使用wangEditor

    那么这一节我们在编辑公司信息的弹窗中使用富文本插件wangEditor官网 案例内效果: npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@next --save 文档部分: 代码部分: 后端 需要注意的是,在35集《完成轮播图以及公司介绍接口》中 我们的参数是 set_value ,类型是 v

    2024年02月13日
    浏览(38)
  • 【更新】vue使用 wangeditor4 富文本 + 富文本回显带标签+wangEditor4 加字数,光标会跑到最后 问题 (已解决)

    背景:业务需求,要实现一个富文本框,好方便用户插入图片 问题:百度了一整天,看了n多文章包括官方文档,又花了半天时间实现需求,对于小白来说,真的是大难题,又着急,又害怕,结果就是,越急越搞不定……此处省略我的吐槽 来吧,上步骤: 我这里装的是版本

    2023年04月19日
    浏览(38)
  • vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用

    npm install wangeditor import editorBar from \\\"@/components/ editor/ editor.vue\\\"; Vue.component(\\\'editorBar\\\', editorBar)  editor-bar v-model=\\\"form.nr\\\" :flag=\\\"false\\\" @change=\\\"getcontent\\\" / mothods:{      //获取富文本内容     getcontent (content) {        this.form.nr = content;     }, } editor-bar v-model=\\\"form.nr\\\" :flag=\\\"false\\\" @change=\\\"getc

    2024年02月13日
    浏览(97)
  • 基于Vue+wangeditor实现富文本编辑

    一个网站需要富文本编辑器功能的原因有很多,以下是一些常见的原因: 方便用户编辑内容:富文本编辑器提供了类似于Office Word的编辑功能,使得那些不太懂HTML的用户也能够方便地编辑网站内容。 提高用户体验:富文本编辑器注重用户体验,具有轻量、可定制等特点,使

    2024年02月14日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包