美文网首页
如何使用wangEditor富文本?

如何使用wangEditor富文本?

作者: web3d开发工程师 | 来源:发表于2018-09-18 10:24 被阅读0次

    1.背景介绍

    富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,提供类似于 Microsoft Word 的编辑功能。

    富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。

    2.知识剖析

    WANGEDITOR

    wangEditor是用javascript编写的,轻量级web富文本编辑器 ,依赖于jQuery和fontAwesome字体库, 支持所有浏览器 。

    3.常见问题

    1、如何使用WANGEDITOR

    使用方法

    因为wangEditor是轻量的,所以不需要引入任何的CSS,只需要引入一个脚本文件 //unpkg.com/wangeditor/release/wangEditor.min.js

    在JS中定义:

    var E = window.wangEditor

    var editor = new E('#editor')

    editor.create()

    2、如何禁用富文本

    // 禁用编辑功能editor.$textElem.attr('contenteditable',false)

    // 开启编辑功能editor.$textElem.attr('contenteditable',true)

    3、如何读取内容

    4.解决方案

    5.编码实战

    6.扩展思考

    富文本编辑器比较

    wangEditor

    优点:轻量简洁,最重要的是开源且中文文档齐全。设计的UI漂亮。

    缺点:缺少各种功能Demo。

    UEditor

    优点:插件多,基本满足各种需求 由百度web前端研发部开发。

    缺点:图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。

    CKEditor

    优点:编辑能力极强,基本和word差不多了。

    缺点:网站访问速度一般,文档英文,需要花时间开发。

    7.参考文献

    wangEditor3使用手册

    富文本编辑器比较

    8 更多讨论

    相关文章

      网友评论

          本文标题:如何使用wangEditor富文本?

          本文链接:https://www.haomeiwen.com/subject/uipynftx.html