简单的实现一个富文本编辑器

使用过 office 文档的同学一定知道他的便捷，不仅可以很好的编辑文档，还可以赋予它一定的格式、段落、缩进，还可以使用图片等等。

如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？

我们可以在网上找到已经封装好的插件，例如：draft 或者 pell，这些插件都是开箱即用的，也可以在此之上进行封装。

当然，我们也可以选择自己封装一个我们需要的插件。

那怎么才能实现一个富文本编辑器呢？

我们可以选择 document.execCommand 来实现一个简易的富物春文本编辑器。

下面先来看下 document.execCommand 语法：

我们分别看看参数的含义：

既然知道了语法，那我们现在封装一个执行函数用来执行指令：

接下来，我们来做下工具栏乱姿的设计和封装。

假设工具栏有很多哗蚂绝格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。

我们使用 actions 作为工具栏按钮的集合，即：

现在，我们来讲解下字段：

我们已经完成了工具栏的部分，现在我们实现下完整的页面和编辑区域吧！

首先创建富文本容器，在容器内分别放置工具栏和编辑区域：

我们最后来看一下实现的效果吧：

应用效果怎么样呢？我们看下面：

我们已经简单的实现了一个富文本编辑器，但是这个编辑器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。

富文本即具备丰富样式差蔽格式的文本。可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够友庆卜在页面中编辑带html格式的文本，引入富文本编辑器。

富文本编辑器：ueditor、ckeditor、好穗kindeditor

在INSTALLED_APPS中添加

在settings/dev.py中添加

在总路由中添加

ckeditor提供了两种类型的Django模型类字段

修改应用/models.py里面的字段信息,记得要重新数据迁移

效果图

在项目需要用到富文本编辑器时，自己也筛选过不少插件，最终选择了froala-editor，UI简单功能强大，官网也列出了很多国外大佬在使用，自己实战后确实感觉比其他的富文本编辑器好。

官网： https://froala.com/

main.js 或者写在其他js文件再从main.js引入

1.新建froalaEditor.vue文件

2.自定义上传图片

3.小坑

该编辑器属于付费使用，不付费默认会带上他的标语，所以保存内容的时候要过滤

4.官网文档

https://froala.com/wysiwyg-editor/键没docs/framework-plugins/vue/#model

用了这链亮丛个富文本编辑器后，感觉我很嫌弃以前用过的编辑器，哈哈，还有，我添加了自定义棚樱上传图片的案例，小伙伴们可以按照自己的实际情况来修改，上传视频的话也是如此。拜拜

——By kkc_hq

---