轻量级Web富文本编辑器——wangEditor

最近在CSDN上写博文时,对它的内置富文本编辑器感到不太满意,于是就去看了其他富文本编辑器。在这个过程中,关注到了一款由国人创作开源的富文本编辑器——wangEditor。在国内投身开源项目实属不易,尤其在经济效益上往往难以维系其发展。遗憾的是,这款编辑器也因成本与收益问题,暂时停止了维护更新。毕竟,背后涉及到的开发、调试、优化升级等工作,都需要付出大量的时间和精力。

wangEditor 是一个基于 JavaScript 构建的轻量级富文本编辑器,以其简洁的设计和强大的功能而广受好评。它特别注重易用性和快速集成特性,开发者仅需寥寥数行代码就能轻松地在 Web 应用中实现一个功能完善的富文本编辑区域。该编辑器预置了诸如标题设置、加粗、斜体、列表、图片上传等丰富的基础编辑功能,使得用户无需进行复杂的二次开发即可直接投入使用。

wangEditor 具备良好的现代前端框架兼容性,如 Vue 和 React,并且官方提供了针对这些框架定制设计的组件,确保在基于 Vue 或 React 构建的应用程序中能够无缝接入和顺畅使用。不仅如此,在非第三方框架环境下,比如 jQuery 等场景下,也能顺利整合 wangEditor。

在浏览器兼容性方面,与主流 PC 浏览器的有良好适配,包括但不限于 Google Chrome、Mozilla Firefox、Apple Safari 以及 Microsoft Edge。但需要注意的是,当前 wangEditor 5并不支持移动端直接进行内容编辑操作(尽管用户能够在移动设备上查看已编辑完成的内容)。同时,鉴于技术迭代,已不再对 Internet Explorer(IE)浏览器提供支持。希望未来能形成更加健康的开源生态环境,让有价值的开源项目能够持续成长和发展。

开源富文本编辑器 wangEditor 暂停维护 (但仍可继续使用) - 掘金

wangEditor官网:wangEditor         

wangEditor作者:前端双越老师(王福朋)

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器,它具有轻量级、简洁、易用的特点。相比于普通的文本编辑器富文本编辑器可以输入超越文本的数据内容,包括上传图片、输入表情、字体大小字号调整、颜色设置、对齐方式等功能操作。[1] 在使用wangEditor富文本编辑器时,首先需要在代码中引入相关的文件。可以在editor.vue文件中添加以下代码: ```html <template> <div> <div ref="editor" style="text-align:left"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'MyEditor', data() { return { editorContent: '', editor: null } }, props: { value: { type: String, required: true } }, model: { prop: 'value' }, methods: { getContent: function () { alert(this.editorContent) }, _initEditor(that) { var editor = new E(this.$refs.editor) editor.config.zIndex = 100 editor.create() that.editor = editor } }, mounted() { this._initEditor(this) setTimeout(() => { this.editor.txt.html(this.value) }, 1000) } } </script> <style scoped> </style> ``` 然后,可以在需要使用富文本编辑器的地方注册组件,并创建编辑器。可以使用以下代码: ```html <!-- 首先给出一个div,并设id属性 --> <div id="div1"></div> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') // 创建编辑器 editor.create() </script> ``` 以上是使用wangEditor富文本编辑器的基本介绍和使用方法。[1][2][3]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值