前端富文本编辑器富文本编辑器

简单的实现一个富文本编辑器使用过 office 文档的同学一定知道他的便捷，不仅可以很好的编辑文档，还可以赋予它一定的格式、段落、缩进，还可以使用图片等等。
如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？
我们可以在网上找到已经封装好的插件，例如：draft 或者 pell ，这些插件都是开箱即用的，也可以在此之上进行封装。
当然，我们也可以选择自己封装一个我们需要的插件。
那怎么才能实现一个富文本编辑器呢？
我们可以选择 document.execCommand 来实现一个简易的富文本编辑器。
下面先来看下 document.execCommand 语法：
我们分别看看参数的含义：
既然知道了语法，那我们现在封装一个执行函数用来执行指令：
接下来，我们来做下工具栏的设计和封装。
假设工具栏有很多格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。
我们使用 actions 作为工具栏按钮的集合，即：
现在，我们来讲解下字段：
我们已经完成了工具栏的部分，现在我们实现下完整的页面和编辑区域吧！
首先创建富文本容器，在容器内分别放置工具栏和编辑区域：
我们最后来看一下实现的效果吧：
应用效果怎么样呢？我们看下面：
我们已经简单的实现了一个富文本编辑器，但是这个编辑器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。
富文本编辑器如何实现部分内容不可编辑,部分内容可编辑1、首先打开富文本编辑器并登录自己的账号。
2、其次点击编辑设置。
3、最后店部分内容不可编辑，部分内容可编辑即可。
富文本编辑器是什么意思？富文本编辑器， Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。
1、什么是富文本编辑器？
抛开专业的定义，用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子，大家大多都使用过网上的一些博客系统或者论坛贴吧吧，那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式，此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器，这个就是富文本编辑器的常见应用，如下图：
富文本编辑器不同于我们平时的文本编辑器，但是其功能确实和我们的平时使用的word的是类似的，只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。
2、富文本编辑器的原理和应用
关于富文本编辑器的原理，一些人可能以为富文本编辑器的原理十分的复杂，事实上也并非如此，当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码，其核心的实现技术就是JavaScript和html 、css等前端技术。
富文本编辑器的应用，比如做为一个网站的开发者，当我们需要一个发布文章的功能时候，用户可能不知道html代码，此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。
react-draft-wysiwyg富文本编辑器使用心得第一次使用富文本编辑器，遇到了很多的坑，与大家分享。
因为项目原因，使用了 react-draft-wysiwyg ；
配合使用插件如下：
1 Draft.js
2: draftjs-to-html
3: html-to-draftjs
DEMO1效果图如下：
一：安装所用插件
二：初始化一个空白的编辑器
（4）提交到后台：双方约定接收html字符串（'p12344444/p'）;

前端富文本编辑器 富文本编辑器

秒懂生活扩展阅读

前端富文本编辑器富文本编辑器