富文本编辑器开发,比较好的开源富文本编辑器有哪些_富文本编辑器是做什么的详细介绍

本文目录一览： 比较好的开源富文本编辑器有哪些_富文本编辑器是做什么的

Notepad优于Windows记事本的一个文本编辑器，完全免费且开源，对于不同的编程语言可以实现语法高亮，代码折叠以及宏，起可定制性非常强。
PSPad编辑器PSPad是一个Windows平台上免费的适合程序员使用的编辑器。
EmacsEmacs文本编辑器深受高级程序员的喜爱，具有内置的宏功能以及强大的键盘命令，这对于编辑代码来说真是一种享受，这个程序几乎被移植到了每一个平台，并有多个发行版，其中最流行的是GNUEmacs和XEmacs，它们是跨平台、完全免费并且开源。
Sublime
Text3(Windows)SublimeText3支持但不限于C,C,C#,CSS,D,Erlang,HTML，Groovy,Haskell,HTML,Java,JavaScript,LaTeX,Lisp,Lua,Markdown，Matlab,OCaml,Perl,PHP,Python,R,Ruby,SQL,TCL,TextileandXML
等主流编程语言的语法高亮。拥有优秀的代码自动完成功能(自动补齐括号，大括号等配对符号；自动补全已经出现的单词；自动补全函数名)，非常智能。
VimVim是从vi发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。和Emacs并列成为类Unix系统用户最喜欢的编辑器。
TextMateMac平台下一款强大的文本编辑器（目前已经提供Windows版本），代码自动完成、可直接在文档中运行SHELL命令、支持宏。
是一款由韩国SangilKim（ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
GeditLinux下的一个纯文本编辑器,但你也可以把它用来当成是一个集成开发环境(IDE),它会根据不同的语言高亮显现关键字和标识符。
是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII码，完全可以取代记事本（如果电脑配置足够强大），内建英文单字检查、C及VB指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。
如果有其他好用的的文本编辑软件，欢迎大家留意评论。

怎样操作Vue项目内引入tinymce富文本编辑器

这次给大家带来怎样操作Vue项目内引入tinymce富文本编辑器，操作Vue项目内引入tinymce富文本编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。项目中原本使用的富文本编辑器是 wangEditor，这是一个很轻量、简洁编辑器但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap jQuery...kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了wangEditor：轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发。不过作者很勤奋，广义上和我是一家人，打个callquill：本身功能不多，不过可以自行扩展，api 也很好懂，如果能看懂英文的话...summernote：没深入研究，UI挺漂亮，也是一款小而美的编辑器，可是我需要大的在有这么参考的情况下，我最终还是选择了 tinymce 这个不搭梯子连官网都打不开的编辑器（简直是自讨苦吃），主要因为两点：1. GitHub 上星星很多，功能也齐全；2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器；3. 不需要找后端人员扫码改接口，前后端分离；4. 说好的两点呢！一、资源下载tinymce 官方为 vue 项目提供了一个组件 tinymce-vuenpm install @tinymce/tinymce-vue -S在 vscode、webstorm 的终端运行这段代码可能会报错，最好使用操作系统自带的命令行工具如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce像我这样没购买的，还是要老老实实下载 tinymcenpm install tinymce -S安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下// 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理tinymce 默认是英文界面，所以还需要下载一个中文语言包（记得搭梯子！搭梯子！搭梯子！）然后将这个语言包放到 static 目录下，为了结构清晰，我包了一层 tinymce 目录二、初始化在页面中引入以下文件import tinymce from 'tinymce/tinymce'import 'tinymce/themes/modern/theme'import Editor from '@tinymce/tinymce-vue'tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用这里的 init 是 tinymce 初始化配置项，后面会讲到一些关键的 api，完整 api 可以参考官方文档编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300}// vue-cli 3.x 创建的 typescript 项目，将 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'同时在 mounted 中也需要初始化一次：如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象三、扩展插件完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能tinymce 通过添加插件 plugins 的方式来添加功能比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件同时还需要在页面引入这些插件：添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义贴一下完整的组件代码：

tinymce

import tinymce from 'tinymce/tinymce'import 'tinymce/themes/modern/theme'import Editor from '@tinymce/tinymce-vue'import 'tinymce/plugins/image'import 'tinymce/plugins/link'import 'tinymce/plugins/code'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/contextmenu'import 'tinymce/plugins/wordcount'import 'tinymce/plugins/colorpicker'import 'tinymce/plugins/textcolor'export default { name: 'tinymce', data () { return { tinymceHtml: '请输入内容', init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300, plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', branding: false } } }, mounted () { tinymce.init({}) }, components: {Editor}}四、上传图片tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法这个方法会提供三个参数：blobInfo, success, failure其中 blobinfo 是一个对象，包含上传文件的信息：success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：如何使用vue裁切预览组件怎样使用Vue在页面右上角实现可悬浮/隐藏菜单
简单的实现一个富文本编辑器

使用过 office 文档的同学一定知道他的便捷，不仅可以很好的编辑文档，还可以赋予它一定的格式、段落、缩进，还可以使用图片等等。
如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？
我们可以在网上找到已经封装好的插件，例如：draft 或者 pell，这些插件都是开箱即用的，也可以在此之上进行封装。
当然，我们也可以选择自己封装一个我们需要的插件。
那怎么才能实现一个富文本编辑器呢？
我们可以选择 document.execCommand 来实现一个简易的富文本编辑器。
下面先来看下 document.execCommand 语法：
我们分别看看参数的含义：
既然知道了语法，那我们现在封装一个执行函数用来执行指令：
接下来，我们来做下工具栏的设计和封装。
假设工具栏有很多格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。
我们使用 actions 作为工具栏按钮的集合，即：
现在，我们来讲解下字段：
我们已经完成了工具栏的部分，现在我们实现下完整的页面和编辑区域吧！
首先创建富文本容器，在容器内分别放置工具栏和编辑区域：
我们最后来看一下实现的效果吧：
应用效果怎么样呢？我们看下面：
我们已经简单的实现了一个富文本编辑器，但是这个编辑器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。

layedit富文本编辑器中如何添加显示源码功能（代码）

本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。由于项目需要用到富文本编辑器，并且要有显示源码功能，但layui现在没有这个功能，所以自己想办法添加了这个功能，基本实现了有这方面需要的，大家可以参考效果如下: 实现步骤如下:1。在自己的页面上添加以下两个方法代码 //动态添加编辑器源码查看编辑功能 function setHtmlCodeToEdit(ele,id) { $("#" ele).next().find('div.layui-layedit-tool').append(''); $("#" ele).next().find('div.layui-layedit-tool').append(' '); } //显示原代码 function getHtml(boj,index) { layui.use('layedit',function() { var layedit = layui.layedit, $ = layui.jquery; var context = layedit.getContent(index); if ($(boj).hasClass('layui-icon-code-circle')) { $(document.getElementById("LAY_layedit_" Number(index))).contents().find("body") .html(HtmlUtil.htmlEncode(context)); $(boj).removeClass("layui-icon-code-circle"); $(boj).addClass("layui-icon-layouts"); $(boj).attr("title","查看HTML"); } else if($(boj).hasClass('layui-icon-layouts')){ $(document.getElementById("LAY_layedit_" Number(index))).contents().find("body") .html(HtmlUtil.htmlDecode(context)); $(boj).removeClass("layui-icon-layouts"); $(boj).addClass("layui-icon-code-circle"); $(boj).attr("title","查看源码"); } }); }2。通过官方的layedit创建方法获取到index后，调用以下方法添加显示源码功能 index = layedit.build('Introduction', opt1);//初始化 setHtmlCodeToEdit('Introduction',index);//设置源码菜单3。在提交数据时，需要判断一下，如果是HTML编码的，解码后再提交数据到后台 var context = layedit.getContent(index);//这里是前面获取到index if (context.length > 0) { if (context.indexOf('<') >= 0) {//需要进行解码 $(document.getElementById("LAY_layedit_" index)).contents().find("body") .html(HtmlUtil.htmlDecode(context)); } //同步到编辑框 layedit.sync(index);4。编码，解码方法（也可以用自己的库，或者自己网上找）var HtmlUtil = { /*1.用浏览器内部转换器实现html转码*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元素，如DIV var temp = document.createElement ("div"); //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持) (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html); //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了 var output = temp.innerHTML; temp = null; return output; }, /*2.用浏览器内部转换器实现html解码*/ htmlDecode:function (text){ //1.首先动态创建一个容器标签元素，如DIV var temp = document.createElement("div"); //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持) temp.innerHTML = text; //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。 var output = temp.innerText || temp.textContent; temp = null; return output; }};

秀米怎么结合python

秀米是一款富文本编辑器，可以帮助用户快速制作出漂亮的文档。如果要结合Python使用，可以使用Python的web框架，如Flask或Django，来创建一个Web应用程序。同时，秀米也提供了一个API，使得开发者可以通过Web API将秀米编辑器集成到他们的应用程序中，从而在应用程序中实现富文本编辑功能。因此，结合Python和秀米，用户可以在Web应用程序中实现自定义的富文本编辑器，并对生成的文档进行保存和编辑。

使用富文本编辑器如何调用云盘的图片文件（代码分析）

本篇文章给大家带来的内容是关于富文本编辑器如何调用云盘的图片文件（代码分析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在开发一个多用户系统，由于在发布文章的时候需要用到编辑器。 UEditor是很多网友推荐的一个，强大，我下载之后，发现这个编辑器代码已经达到2万多行，受不了这种臃肿。对此我发现了layui有一个自带的编辑器，好像是被雪藏了，不知道是不是官方不太推荐了？文档地址： http://www.layui.com/doc/modules/layedit.html LayEdit仍旧遵循极简的设计风格，无论是UI上，还是接口使用上，是我喜欢的一个编辑器，代码只有几百行。当我需要在编辑器上传图片，还有曾经上传过的图片直接调用，这样就需要自己写一个获取远程图片，对此百转千回，直接点吧，付费找人帮忙吧 也没遇到接单，也没得到啥有用的信息。于是我就想编辑器表情不就是图片么？于是找到编辑器js文件，查看到表情带js代码，代码不多就几十行这算是第一次真正接触LayEdit，表情用的是layui.layer，tips层，而我需要的是支持tab的页面层layer.open，这算是加深了layer的认识于是我把页面付出层搭建好之后，在用ajax请求应该就好了吧，于是发了一个文http://www.gxlcms.com/js-tutorial-409066.html结果我又遇到问题了，请求回来的数据页面加载不了，对于菜鸟来说还是比较坑，这是因为dom顺序问题。后来能加载图片了，进行拼接function myphoto(tabid) { var html = ""; html = '

'; //图片资源 $.get("/api", { limit:10, }, function(data){ var list=data.data layui.each(list,function(index, item) { // 用了format加载数据 html ='

'.format(item.title,item.src,item.alt); }); html = '

'; document.getElementById("yun-" tabid).innerHTML=html; //监听li点击事件 $("#yun").on("click",'li',function(e){ //获取点击的图片 var ehtml=e.currentTarget.innerHTML 参考下面 监听点击图片事件部分 //关闭云盘 layer.close(index); }) }); $(document).off('click', yunpan.hide).on('click', yunpan.hide); }又不会把图片插入到编辑器，于是又发了一文http://www.gxlcms.com/js-tutorial-409068.html结果还是没人关注，又开始对表情部分进行摸索，发现表情有一段代码如下 //表情 ,face: function(range){ face.call(this, function(img){ insertInline.call(iframeWin, 'img', { src: img.src ,alt: img.alt }, range); }); }我想我应该从这个地方入手了我把捕获到的li事件进行修改类似方法,yunpan:function(range){ yunpan.call(this, function(img){ insertInline.call(iframeWin, 'img', { src: img.src ,alt: img.alt }, range); }); }测试成功对于监听点击图片事件部分代码如下//监听li点击事件 $("#yun").on("click",'li',function(e){ //获取点击的图片 var img=e.target.src var alt=e.target.alt callback && callback({ src: img ,alt: alt }); //关闭云盘 layer.close(index); })最终效果图如下： 点击编辑器云盘，弹出页面层，通过tab切换，不同栏目，再选择图片，关闭云盘，插入编辑器。
vue哪个富文本编辑器是style的

vue的css和less富文本编辑器是style的。1、使用css富文本编辑器。.content>>>img{max-width:100%;}。2、使用less富文本编辑器.@import'~@/assets/css/base.less';.content{/deep/img{width:1rem;}}。

踩坑---使用Draft.js进行开发富文本编辑器

又来了

https://www.draft-js-plugins.com/plugin/image

draft.js：不要使用redux来管理editorState

draft.js：让光标显示在最后面

draft.js：内容清空之后，光标的位置会错乱

draft.js：如何改变 draft.js 编辑框的高度

draft.js：getPlainText 对换行符的修改 (填坑篇)

draft.js：onChange改装，判断文字内容是否修改

draft.js--富文本编辑器框架的实践（一）

draft.js--富文本编辑器框架的实践（二）

原 1.Draftjs 学习笔记
原 2.Draftjs 学习笔记-Rich Styling
原 3.Draftjs 学习笔记-Entities
原 4.Draftjs 学习笔记-Decorators
原 5.Draftjs 学习笔记-自定义控件（多媒体）
原 6.Draftjs 学习笔记-聊聊自定义样式
原 7.Draftjs 学习笔记-StateToHtml

Draftjs中文翻译1 - 概观
Draftjs中文翻译2 - API Basics API基础
Draftjs中文翻译3 - Rich Styling丰富的造型
Draftjs中文翻译4- 实体
Draftjs中文翻译5 - v0.10 API迁移

Draft.js文档
使用 Draft.js 来构建一个现代化的编辑器
draft.js在知乎的实践
基于Draft.js自定义富文本编辑器

基于Draftjs实现的Electron富文本聊天输入框
基于Draftjs实现的Electron富文本聊天输入框(一) —— 群@功能
基于Draftjs实现的Electron富文本聊天输入框(二) —— 图文输入
基于Draftjs实现的Electron富文本聊天输入框(三) —— Emoji
基于Draftjs实现的Electron富文本聊天输入框(四) —— 自定义快捷键
基于Draftjs实现的Electron富文本聊天输入框(五) —— 问题总结与解决

完美解决问题！
还有下一个问题：光标位置错乱 待解决！！！

完全可定制的富文本编辑框架——Slate.js

Slate 是一个完全可定制的富文本编辑框架。通过 Slate，你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富交互、体验也已成为 Web 应用标杆的编辑器。Slate 本身并不是一个编辑器，而是一套在 React 和 Immutable 的基础上，用于操作富文本数据的框架。基于 Slate 实现一个富文本编辑器，相当于是使用 React（视图层） Immutable（数据层）开发一个普通 Web 应用,Slate相当于Controller。

Github：

文档:

在线示例：

使用npm包管理

Slate 开放了一套用于构建编辑器的模块。其中，最重要的是 Editor 组件:

启动的时候我第一次失败了，然后重新启动下就行了，然后打开浏览器localhost:8080

通过简单的语法实现Markdown的编写

你可以从别的网站直接粘贴带有样式的文本

写过html标签的都知道

类似

可以在应用某些更改后保存新版本，然后随时回滚到以前的版本

以下是开发者的一些说明（文档有中文版）：

类似加粗和斜体的结构可以开箱即用，但评论、嵌入内容以及更多的定制性需求呢？

用户的编写体验可能不错，但在执行编程式变更时却不必要地复杂，而这对于构建高级的编辑行为至关重要。

这是一个非常常见的使用场景，但要实现将文档转换为 HTML 或 Markdown 的简单功能都需要编写大量的模板代码。

各种编辑器在重新发明视图层的轮子，而非使用 React 这样已有的技术方案。你必须学习一套带着自有限制和陷阱的新系统。

编辑器内部的数据结构使其无法用于实时、协作的编辑场景中，除非重写编辑器。

许多编辑器没有对外开放本应为开发者所复用的内部工具，以至于不得不重新发明轮子。

不少编辑器是围绕简单的【扁平】文档结构设计的，这使得表格、嵌入内容和字幕等内容难以理解，有时甚至无法实现。

Slate是一个可以高度定制化博众家之所长的富文本编辑器框架，其强大之处远不是本文所展现的这一点，你可以使用它来创建复杂且优雅的富文本编辑器，相对其他很多编辑器本身来说非常的灵活，文档也非常的详细，目前也正在不断地迭代当中，对富文本编辑器定制化需求比较高的可以尝试，希望能对你有所帮助！

开源的Android富文本编辑器

基于原生EditText span实现的Android富文本编辑器
github地址： https://github.com/yuruiyin/RichEditor

该组件是基于原生EditText span的方式实现的，旨在提供一个功能齐全且使用方便的Android富文本编辑器。主要支持了加粗斜体等行内样式、标题引用等段内样式以及插入图片视频甚至自定义View等。

Step 1. Add the JitPack repository in your root build.gradle at the end of repositories:

Step 2. Add the dependency in your app build.gradle:

说明：各个样式按钮的layout由调用方自行完成

说明：其中ivBold为加粗ImageView，由调用方在layout中定义；R.mipmap.icon_bold_normal和R.mipmap.icon_bold_light是加粗按钮正常状态和点亮状态图片的资源id。

说明：插入自定义布局最终也是通过bitmap以ImageSpan的形式插入到编辑器中的。

再次附上github地址： https://github.com/yuruiyin/RichEditor
欢迎star、fork、提issue~