精华内容
下载资源
问答
  • 富文本编辑器  富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史...

    富文本编辑器

     富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

     作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

     下面是我收集的一些业界比较受欢迎的富文本编辑器,喜欢的朋友、用过的朋友可以一起看看,一起探讨。

    1、TinyMCE

     TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。

     而且这么好的东西还是开源免费的,目前一直有人维护,这款编辑器使用的人非常多。

     更多介绍及下载:https://www.tiny.cloud/docs/demo/full-featured/

     

    2、CKEditor

     Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本,FckEditor的用户现在基本都转移到Ckeditor了。

     Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。

     更多介绍及下载:https://ckeditor.com/

     

    3、UEditor

     UEditor 是由百度出品的富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源免费。这款编辑器用过的人也非常多,功能非常全面,插件很多,还可以很方便插入百度地图,接入十分简单。

     16年之后百度没有怎么更新了,不过现有的功能也足够用了。UEditor分为UE版(全功能版)和UM版(精简版),大家可以根据自己使用环境选择不同的版本。

     更多介绍及下载:http://ueditor.baidu.com/website/

     

    4、wangEditor

     wangEditor轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。

     更多介绍及下载:http://www.wangeditor.com/

     

    5、kindeditor

     KindEditor历史也很长了,用户数也不少,国内某公司出品。免费开源。界面类似于office word,界面和功能中规中矩,文档齐全,使用还算方便。

     更多介绍及下载:http://kindeditor.net/demo.php

     

    6、simditor

     simditor是Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。

     虽然是国内出品,但文档是英文的。开源免费。

     更多介绍及下载:https://simditor.tower.im/

     

    7、bootstrap-wysiwyg

     bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器,界面简洁大方。使用需要先引入bootstrap。

     个人觉得bootstrap-wysiwyg这一长串像乱码一样的名字影响了它的推广和使用~ ~毕竟轻型使用环境还是很多的。

     更多介绍及下载:http://mindmup.github.io/bootstrap-wysiwyg/

     

    8、summernote

     summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。summernote开源免费,该项目一直比较活跃,一直都有人在维护。

     summernote同样依赖于jquery和bootstrap,使用前先引入这两项。

     更多介绍及下载:https://summernote.org/

     

    9、Froala

     Froala是一款功能丰富的富文本编辑器,界面分类清晰,容易集成,容易升级,支持主流浏览器,具有行内编辑功能。Froala代码示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于扩充功能。

     Froala是收费的,不过前端是开源的,如果要使用后台是要交费的(如果你使用国人强大的crack技能那就是另外一回事了~ ~)。目前有三个定价方式:基础版(239美元)、专业版(1199美元)和企业版(1999美元)。

     更多介绍及下载:https://www.froala.com/wysiwyg-editor

     

    10、Quill

     Quill是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。

     开源免费,项目活跃,一直有人维护。

     更多介绍及下载:https://quilljs.com/

     

    11、FreeTextBox

     FreeTextBox功能强大,前端支持主流浏览器,但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制,运行速度一般。FreeTextBox分为免费版和pro收费版,一般情况免费版本功能已经足够用了。

     更多介绍及下载:http://freetextbox.com/

     

    12、dhtmlxEditor

     DHTMLX组件是一整套基于JS的UI库,功能强大,其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular,React和Vue.js框架中,该编辑器还同时支持Markdown和富文本。

     支持普通视图和类似word一样的页面视图,支持全屏幕,工具支持自定义,包括工具条颜色和样式等。

     dhtmlxEditor分为免费版和收费版,免费版具有绝大多数功能,而且免费版是开源的你可以在代码级别随便扩充。

     更多介绍及下载:https://dhtmlx.com/docs/products/dhtmlxRichText/

     

    13、eWebEditor

     eWebEditor外观和使用风格都和微软 Word很类似,功能很多。工具条可以定制,运行速度很快。导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

     eWebEditor有很长的历史了,是典型的传统富文本编辑器,不论是界面,还是功能都比较传统。

     eWebEditor是收费的,但也有免费的精简版,精简版没有后台功能。

     更多介绍及下载:http://www.ewebeditor.net/demo/

     

    最后

     富文本编辑器产品真的非常多,以上只是本人接触过的一些,相信还有很多很好的富文本存在,其实也没必要全都试一遍,只有最适合自己的,才是最好的。

     如果你用过其中的一种,或者你用过其他好用的富文本编辑器,欢迎交流分享。

     如果你还喜欢现在流行的markdown编辑器,请看我的另一篇文章《几款主流好用的markdown编辑器介绍》

     如果想了解markdown编辑器和富文本编辑器的区别,请参考《markdown编辑器与富文本编辑器优缺点比较,哪个更好用》

     

    转载请注明原文地址:https://blog.csdn.net/davidhzq/article/details/100842866

     

     

    展开全文
  • 推荐几个非常不错的富文本编辑器

    万次阅读 多人点赞 2019-08-29 07:35:42
    1、wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。 界面截图:官网地址 2、TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript...

    1、wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。

    界面截图:官网地址

    ubang_image_20190810152679.png

    2、TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。

    界面截图:官网地址

    ubang_image_20190810307255.png

    3、百度ueditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,缺点是已经没有更新了

    界面截图:官网地址

    ubang_image_20190810334791.png

    4、kindeditor——界面经典。

    界面截图:官网地址

    ubang_image_20190810963511.png

    5、Textbox——Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。

    界面截图:官网地址

    ubang_image_20190810316724.png

    6、CKEditor——国外的,界面美观。

    界面截图:官网地址

    ubang_image_20190810353138.png

    6、quill——功能强大,还可以编辑公式等

    界面截图:官网地址

    ubang_image_20190810756980.png

    7、simditor——界面美观,功能较全。(个人博客考虑使用)

    界面截图:官网地址(网址打开较慢)

    ubang_image_20190810213989.png

    8、summernote——UI好看,精美

    界面截图:官网地址

    ubang_image_20190810530752.png

    9、jodit——功能齐全

    界面截图:官网地址

    ubang_image_20190914841422.png

    10、Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费

    界面截图:官网地址

    ubang_image_20190914403262.png

    11、froala Editor——界面非常好看,功能非常强大,非常好用(非免费,可破解)

    界面截图:官网地址

    ubang_image_20190925148837.png

    12、syncfusion

    界面截图:官网地址

    ubang_image_20191026771553.png

    13、dhtmlxEditor

    界面截图:官网地址

    目前可用的富文本编辑器很多,笔者挑出其中一些常用的,仅供参考。

    原文链接:https://www.qsp.net.cn/art/168.html

    展开全文
  • layui富文本同步 -layui富文本同步到textarea

    layui富文本官方文档:https://www.layui.com/doc/modules/layedit.html

    1、创建一个layui富文本编辑器

    <form>
        <textarea id="content" name="content" style="display: none;"></textarea>
    </form>
    <script>
    layui.use('layedit', function(){
      var layedit = layui.layedit;
      layedit.build('content'); //建立编辑器
    });
    </script>

    实际上我们写到页面上的是一个隐藏的textarea控件(文本域,我们给这个文本域添加name属性,便于表单提交),layui在这个textarea下面为我们创建了富文本。所以,我们在富文本中填写的内容并没有直接填写到textarea中,

    • 表单提交(异步)时,我们需要将富文本内容同步到textarea;
    • 数据回显时,我们需要将textarea的内容同步到富文本;

    2、新增页面,保存提交时将富文本内容同步到textarea,保证form提交正常获取数据

    以下是layui官网提供的方法:

    LayEdit提供了相当精简的方法,如下:

    方法名 描述
    var index = layedit.build(id, options) 用于建立编辑器的核心方法
    index:即该方法返回的索引
    参数 id: 实例元素(一般为textarea)的id值
    参数 options:编辑器的可配置项,下文会做进一步介绍
    layedit.sync(index) 用于同步编辑器内容到textarea(一般用于异步提交)
    参数 index: 同上

    更多方法参考官方文档:https://www.layui.com/doc/modules/layedit.html#base

    其中的layedit.sync(index)方法用于同步,但是直接摆到js文件对于form表单提交获取值没什么用

    可用的使用方式:利用表单提交时需要表单验证的特性,我们自定义对textarea的验证,在验证时进行同步操作,然后获取表单内容时,就能够取到富文本的值了

    代码片段

    <form class="layui-form"> 
      <div class="layui-form-item">
        // 自定义lay-verify=""属性
        <textarea id="content" name="content" lay-verify="content" style="display: none;"></textarea>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <script>
     layui.use(['form', 'layedit'], function () {
        var form = layui.form;
        var $ = layui.$;
        var layedit = layui.layedit;
    
        var index = layedit.build('content'); //建立编辑器
    
        //获取表单前进行验证,此时已经同步了
        form.verify({
            content: function (value) {   
                layedit.sync(index);
            }
        });
    
        form.on('submit(*)', function(data){
          console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
          console.log(data.field.content) //此时content就可以获取到我们写在富文本中的值
          return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
    }
    </script>

    要点:在textarea控件中添加lay-verify属性用来表单验证,在表单验证中进行同步

    3、修改页面,富文本内容如何正常回显

    其实我们可用直接给富文本赋值,但是并不推荐这样做,而且这个富文本本身就不是我们写出来的,是layui创造出来的,所以还是不要想着去获取富文本控件,正常的方式是将textarea内容同步到富文本中。

    大多数情况下我们是整个表单进行回显,此时就可以用layui的表单赋值方法(form.val('filter', object),官方文档:https://www.layui.com/doc/modules/form.html#val

    但是此时富文本可能无法回显,关于富文本回显要注意的是:先表单赋值,再创建富文本。即在执行form.val('filter', object)之后创建富文本。

    代码片段

    <script>
    layui.use(['form', 'layedit'], function () {
        var form = layui.form;
        var $ = layui.$;
        var layedit = layui.layedit;
    
        //先 给表单赋值
        form.val("formTest", data); //data就是表单的json数据,其中也包括content(富文本的name)属性
        
        //再 创建富文本编辑器
        var index = layedit.build('content'); //建立编辑器
         
        //==============以下提交表单时使用====================
    
        //获取表单前进行验证,此时已经同步了
        form.verify({
            content: function (value) {   
                layedit.sync(index);
            }
        });
    
        form.on('submit(*)', function(data){
          console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
          console.log(data.field.content) //此时content就可以获取到我们写在富文本中的值
          return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
    }
    </script>

     

    展开全文
  • markdown与富文本在线转换

    万次阅读 2020-10-24 10:28:53
    背景:工作中已经习惯markdown,但是有的网站还是使用富文本编辑,就需要将原本的markdown修改为富文本; 1,按照google插件 在谷歌商店应用商店搜索“Markdown Here”并下载安装,如下图 2,在线转换 在富文本...

    背景:工作中已经习惯markdown,但是有的网站还是使用富文本编辑,就需要将原本的markdown修改为富文本;

    1,概念

    Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。
    富文本格式(Rich Text Format, 一般简称为RTF)是由微软公司开发的跨平台文档格式。最大的特点是:所见即所得,你把格式调整成什么样子,就会直接显示出什么样的效果。这一点和words类似。对于习惯“所见即所得”的写作者来说,比较直观,而且省掉预览再返回调整这一步。

    2,markdown—>富文本

    2.1 安装google插件

    在谷歌商店应用商店搜索“Markdown Here”并下载安装,如下图
    在这里插入图片描述

    2.2 在线转换

    在富文本编辑窗口,选择需要转换的markdown内容,然后点击“markdown here”
    在这里插入图片描述

    2.3 效果展示

    在这里插入图片描述

    3,富文本—>markdown

    打开 https://www.bejson.com/convert/ueditor2markdown/,左边粘贴富文本,右边就会同步出现markdown,将右侧内容拷贝到你的富文本编辑框即可。

    在这里插入图片描述

    展开全文
  • 测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD测试MD
  • 富文本处理

    千次阅读 2019-01-29 22:08:00
    富文本(Rich Text)或者叫做富文本格式,简单来说就是在文档中可以使用多种格式,比如字体颜色、图片和表格等等。它是与纯文本(Plain Text)相对而言的,比如Windows上的记事本就是纯文本编辑器,而Word就是富文本...
  • 富文本插件推荐

    万次阅读 2017-09-01 14:27:25
    富文本 管理后台富文本也是一个非常重要的功能,楼主在这里也踩了不少的坑。楼主在项目里最终选择了tinymce这里在简述一下推荐使用tinymce的原因:tinymce是一家老牌做富文本的公司(这里也推荐ckeditor,也是一家...
  • 富文本与纯文本

    千次阅读 2019-03-08 12:31:03
    富文本与纯文本 引言 你是否曾经话费大量时间在写Word文档上,同时Word上的很多功能我们平常并用不上。写Word时,内容往往不是难点,难住我们的总是排版问题,行间距,首行缩进以及该选用什么字体。 若你费尽心思写...
  • taro 渲染富文本,多个富文本切换

    千次阅读 2019-04-17 02:21:46
    官网demo: ... 多个富文本切换,主要用到display:none,当显示的时候,重新生成富文本 import Taro, { Component } from "@tarojs/taro" import { View...
  • 旅游自助系统项目之百度富文本编辑器使用

    万次阅读 多人点赞 2016-04-10 16:54:30
    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文本...
  • 富文本

    2019-09-29 19:15:39
    富文本框 由于html中原生的textarea功能太弱,无法完成一些字体,颜色等功能,因此我们在开的时候经常会使用富文本框 UEditor, CKEditor,wangEditor 市面用得比较多的富文本框 使用是的wangEditor,要学习的话可以去看它...
  • 页面使用了Summernote富文本编辑器 在富文本编辑器里面可以上传图片上传音频也可以对文章内容进行排版 想把富文本编辑器里面的所有编辑的内容(包括格式)存到后台数据库里。 ![图片说明]...
  • 文本 只有文字且无颜色、插画等,并且文本...富文本 具有普通文本的特性;并有插画,对文字颜色等定义;还能调整页面,文本布局,插入音视频等 超文本 具有富文本的特性并能通过超链接进行跳转、导航回溯等操作 ...
  • 获取富文本编辑器内容,赋值对象,保存到数据库: 声明layui组件 layedits = layui.layedit; 设置富文本编辑器的样式,绑定富文本编辑器标签id ,返回值indexs layedit和layedit.build()声明全局变量 将获取...
  • 添加富文本 首先添加富文本的代码 然后就可以直接看到效果了 操作上边的前提是你的标签必须是textarea,并且设置有id 02 富文本上传图片 这里文档也写的很清楚,需要添加上传图片的接口 最后...
  • 使用步骤: 1、页面加入组件 2、js中 ...3、获取到富文本内容,并修改其中图片的样式 this.setData({ html:str.replace(/<img/g,’<img style=“width:100%;height:auto;display:block” ') })
  • 富文本编辑器 一、vue与UEditor集成 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点 1.前端实现 1.1.下载最新编译的 UEditor并放入项目对应目录 将...
  • TextView显示富文本的三种方案 背景 ​ 在做Android开发的时候,大家可能会经常遇到这种需求:一个textview控件上想展示一段声明,声明的大部分内容是正常的很色字体,书名号引用的各种文件条款,使用蓝色字体显示,...
  • 若该文为原创文章,未经允许不得转载 原博主博客地址:...本文章博客地址: 各位读者,知识无穷而人力有穷,要么改需求,要么找专业人士,要么自己研究 目录 前话 富文本处理 概述 富文本文档结构 ...
  • 仿简书富文本编辑器

    热门讨论 2016-10-17 17:00:03
    仿简书富文本编辑器,完美重现
  • Android 富文本TextView

    千次阅读 2019-09-16 19:32:31
    前段时间公司需求需要做TextView支持带图片的富文本功能,网上很多TextView 富文本的第三方库,不过大多都太繁琐了,并且我们的需求很简单,就是需要加载富文本富文本有可能带有图片)。于是就在网上找相关方法。...
  • 富文本编辑器

    2020-11-03 22:10:59
    富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱. 原理: ...
  • 由于项目中需要使用到富文本显示和编辑,这方面手机还真是不如前端,一查富文本编辑几乎都是前端的,目前富文本显示主要有3种方案,先简单介绍下: 1. 使用Html.fromHtml Html.fromHtml解析 TextView显示解析结果 ...
  • 笔者最近在负责公司项目中的富文本编辑器的部分,由于是自己公司的产品,为了性能等方面的考虑要求笔者自己写原生代码实现。过程当中遇到了很多坑,现在来与大家一起交流一下。 目录: 要完成的功能: 富文本编辑...
  • 计算富文本的高度 在app中我们最常见的就是把一段文字要设置行间距、所占宽度、字体大小。并且这些都是我们来计算富文本高度和设置富文本样式必须的元素。当然可能还有首行缩进等元素。我们这里就不考虑了。 设置...
  • unity富文本

    千次阅读 2017-05-21 16:15:30
    富文本Rich Text: 这种文本用于GUI元素和文本网格可以结合多种字体类型和大小。 GUIStyle, GUIText 和 TextMesh类都有富文本设置,能指示unity寻找文本内含有的标记标签。Dubug.Log也可以用这些标记标签来增强...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,431
精华内容 10,972
关键字:

富文本