精华内容
下载资源
问答
  • 它提供类似于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

     

     

    展开全文
  • 简单模式、默认模式富文本编辑器: 默认模式html页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...

    官方下载地址:http://kindeditor.net/demo.php

    下载插件:

    简单模式、默认模式富文本编辑器:

    默认模式html页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js 
    
    "></script>
        <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
        <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
    
        <script>
            var editor;
            KindEditor.ready(function(K) {
                editor = K.create('textarea[name="content"]');
            });
        </script>
    </head>
    <body>
    <h3>默认模式</h3>
    <textarea id="seditor" name="content" style="width: 800px; height: 400px; visibility: hidden;">KindEditor</textarea>
    <input value="点击获取编辑器的内容" onclick="getContent()" type="button">
    <h3>展示区</h3>
    <div id="show" style="border:1px solid red;width:600px;height:500px;word-break:break-all;">
    
    </div>
    
    <script type="text/javascript">
        function getContent(){
            editor.sync();
            alert($('#seditor').val());
            $('#show').html($('#seditor').val());
        }
    </script>
    
    </body>
    </html>

     

    效果:

    展开全文
  • wangEditor富文本编辑器预览功能

    千次阅读 2019-11-08 16:35:50
    wangEditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费 更多配置请查阅官网文档:https://www.kancloud.cn/wangfupeng/wangeditor3/335782 <!doctype html> <...

    wangEditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

    更多配置请查阅官网文档:https://www.kancloud.cn/wangfupeng/wangeditor3/335782

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="hjl">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>wangEditor</title>
      <!--预览样式-->
      <style>
    	
    		#previewbox {
    			position: fixed;
    			z-index: 999999999;
    			display: none;
    			top: 0px;
    			bottom: 100px;
    			width: 300px;
    			height: 1000px;
    			background: url(../img/phone.png) no-repeat;
    			margin: 0px 650px;
    			background-size: contain;
    			padding: 120px 25px 116px 25px;
    		}
    
    		.preview-title{
    			font-size: 15px; font-weight: 700;
    		}
    		.preview-author{
    			color: rgb(96, 127, 166); font-size: 12px;cursor:pointer;
    		}
    		.preview-date{
    			color: rgb(140, 140, 140); font-size: 12px; font-style: normal;
    		}
    		.preview-content{
    			height: 100%; padding-right: 0px;overflow-y: scroll;overflow-x: hidden;
    		}
    		.preview-close{
    			top: 0px; width: 50px; height: 50px; right: -17px; font-size: 30px; font-weight: 700; position: absolute; cursor: pointer;
    		}
    		.preview-content::-webkit-scrollbar{
    			width:2px;
    		}
    
      </style>
    	<!--只需要导入js  可以到官网下载对应的版本-->
    	<script src="wangEditor.js" type="text/javascript"></script>
     </head>
     <body>
    
    <div id="wangEditor"></div>
    <!-- 预览 -->
    <button type="button" class="btn btn-primary" id="viewButton"><i class="fa fa-eye"></i> 预览</button>
    <div id="previewbox">
        <div id="previewContent" class="preview-content" style="height:50%"></div>
        <div onclick = "previewboxClose()" class="preview-close">X</div>
    </div>
    
    <script type="text/javascript">
    
        var E = window.wangEditor
        var editor = new E('#wangEditor');
    	//定义上传图片名
        editor.customConfig.uploadFileName = 'file'
        // 配置服务器端地址上传图片地址
    	/** 返回格式
    		{
    			// errno 即错误代码,0 表示没有错误。
    			//       如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    			"errno": 0,
    
    			// data 是一个数组,返回若干图片的线上地址
    			"data": [
    				"图片1地址",
    				"图片2地址",
    				"……"
    			]
    		}
    
    	**/
        editor.customConfig.uploadImgServer = "/upload",
        editor.create();
    
    	function previewboxClose(){
            $("#previewbox").hide();
            $("#previewContent").html("");
        }
    
    	$("#viewButton").click(function(){
    		previewboxShow();
    	});
    
    	function previewboxShow(){
            //获取输入的文本代码
    		var sHTML = editor.txt.html();
    		//console.log(sHTML);
            $("#previewContent").html(sHTML);
            $("#previewbox").show();
        }
    
    	
    </script>
    
     </body>
    </html>
    

     

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

    万次阅读 多人点赞 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

    展开全文
  • 1.安装 # npm install tinymce -S 2....纠错 theme.js:1 Uncaught SyntaxError: Unexpected token 设置一下baseURL _this.$tinymce.baseURL = '/static/tinymce' 更多功能配置可以到官方网站上进行查看...
  • braft-editor 富文本编辑器 最近项目中需要使用富文本编辑器,本身项目是基于react+antd 进行开发的,对比常用的富文本编辑器,发现braft-editor和antd的form表单验证更配。记录一下开发过程,共勉。 常见的开源富...
  • Vue tinymce富文本编辑器整合

    万次阅读 多人点赞 2018-10-23 17:54:57
    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…) 下面开始工作: 插件安装 tinymce官方提供...
  • 其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,两者主要区别在于他们的使用方法上,以及不同技术...
  • linux文本编辑器

    万次阅读 多人点赞 2018-04-25 19:18:04
    文本编辑器 vi vim是vi增强版 vim需要安装 sudo apt-get -y install vim vim的三种工作模式 1 编辑模式 命令模式=&gt;编辑模式iaos 按键 作用 i 在光标当前位置插入文本 a 光标的下一...
  • 关于layui富文本编辑器的预览功能

    千次阅读 2019-09-28 10:27:12
    查了好多发现都没有layui.layedit关于预览功能的显示,后来才发现是因为太简单,话不多说,直接贴代码 var layeditDemo= layedit.build('layeditDemo'); $(" .layui-layedit .layui-unselect.layui-layedit-tool") ....
  • 百度富文本编辑器UEditor

    千次阅读 2016-08-30 14:10:01
    百度富文本编辑器介绍 百度富文本编辑器 百度富文本编辑器使用 如何使用百度富文本编辑器 百度 UEditor Ueditor ueditor
  • layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了。 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没了,也是很神秘。 因为上次咱们加了上传加了进度条,所以这回的上传也是有...
  • 以前一直很羡慕别人能开发文本编辑器,后来学了Qt,看了...这个文本编辑器主要实现了以下功能:  (1)文本编辑(包括撤销、恢复、保存、打开文件、导出成pdf、另存为等等)。  (2)Tab页式文档。  (3)行号显示。
  • 一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是:&lt;div class="form-group"&gt; &lt;label class="col-sm-...
  • Python使用wxpython制作简单文本编辑器

    千次阅读 2017-09-18 23:33:03
    下面的python代码实现了一个简单的文本编辑器,可以实现编辑加载和保存操作。真个界面是实用wxpython来构建的。wxpython是一个GUI图形界面...我将在下一代文本编辑器增加各种功能。这个文本编辑器没有什么实用价值,仅
  • Java swing 简易文本编辑器

    千次阅读 2017-10-09 10:39:12
    swing 简易文本编辑器 swing的控件使用
  • 好用的文本编辑器推荐

    千次阅读 2019-04-12 21:13:22
    Sublime Text 是一个跨平台且具有漂亮用户界面和强大功能文本编辑器,支持Windows、MacOS、Linux等操作系统。 主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等...
  • <link href="bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="bootstrap/google-code-prettify/prettify.css" rel="stylesheet"> <link href="bootstrap/css/bootstrap-combined....
  • 文本编辑器Editormd的配置使用

    千次阅读 2020-04-18 00:09:12
    我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器,在富文本编辑器中,我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的,我们只需要在页面中配置一下插件提供的一些API即可。...
  • 改动效果: layui2.4.3并没有视频、音频等上传...根据说明替换layedit.js,直接调用就会出现上面的效果,注意,编辑器中点击html会出错,那是因为少引入了一个ace,js,需要扩展文件中的Content/ace/ace.js,把Cont...
  • 新手,使用百度的ueditor富文本编辑器时图片上传功能无法实现,求帮助,可以的话,请给个相关案例或者推荐一下其他的富文本编辑器,感谢
  • 更换XILINX ISE 文本编辑器

    千次阅读 2017-03-03 00:18:45
    更换XILINX ISE 文本编辑器ISE自带的编辑器...所以本文将介绍如何使用Notepad++ 和 Sublime text 3 来替换ISE的文本编辑器,并且保留错误跳转的功能1. 设置编辑器ISE 集成开发环境中点击左上角Edit -> preferences 在
  • 文本编辑器功能实现 选中后映射属性到属性栏 实现复制粘贴保留样式 涉及到的知识: 富文本编辑器底层实现原理 鼠标选中时获取选中文本的样式集合 过滤粘贴样式 遇到的坑: 获取鼠标选中文本的样式...
  • wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app、小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载 下载好之后找到wangEditor.js文件。然后引入进去。以下是我...
  • 文本编辑器的使用

    千次阅读 2019-07-05 14:35:43
    1.富文本编辑器 2.自己总结 它就是一个别人的框架就像发送邮件一样,别人封装好的我们只需要在它的基础上然后在增加自己想要的东西。别人也有好的但是东西多不好改用。所以自己尽量在创建一个页面,自己需要...
  • 文本编辑器原理 - 学习/实践

    千次阅读 2019-04-14 22:45:00
    文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱. 2....
  • 文本编辑器braft-editor的使用

    万次阅读 2019-08-01 13:05:12
    在写react时需要用到富文本编辑器,找了很多后最后选择了braft-editor富文本编辑器 美观易用的react富文本编辑器 可结合antd使用 本质是封装的draft-js 提供丰富的功能 这里我只介绍常见的一些功能和问题,详情请...
  • linux 文本编辑器Text editors play a major role for Linux users. Whether it is setting up user instructions, editing configuration files or writing code scripts to run on your system, everyone has a ...
  • 最近几天一直在寻找一款在线的文本编辑器,并试用了其中一些,有些体会,现记录于下: 一个国外的网站,记录了一份几乎涵盖所有 WYSIWYG 在线编辑器比较表: http://www.geniisoft.com/showcase.nsf/WebEditors 国内的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 373,481
精华内容 149,392
关键字:

带阅读功能的文本编辑器