Vue.js 实现富文本编辑器

富文本编辑器

起富文本编辑器这个名字，可能对于一些同学来说是陌生的，因为在这个markdown流行的时代，富文本编辑器的作用已经没有那么重要了。不过对于使用过富文本编辑器的同学来说，我相信大部分的人都只是停留在工具使用的阶段，未曾想过去了解编辑器的实现原理，更不会想到自己亲自动手实现一个类似的富文本编辑器。

​富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。在很多开发者看来，富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话，确实如此。但是它的基本原理并不复杂，入门也不难。 --- 摘自百度百科

​虽然说富文本编辑器的基本实现原理并不复杂，但是如果要做成一个大而全的项目，往往需要一个团队的共同协作来完成，比如百度的 UEditor，是一个非常棒的开源项目。如果是个人开发者，就算具有一定的功底，开发周期也是比较长的，其中优秀的开源项目有 wangEditor。

本训练营项目是使用Vue.js实现一个简易的富文本编辑器应用。通过本项目的实战学习，你将获得以下技能：Vue.js框架进阶学习，数据绑定操作，组件式开发。

• 资源打包工具的了解与使用，以webpack讲解为主。
• Vuex的使用，让你了解全局状态管理的作用与优势，并学习掌握。
• Range/Selection的讲解与实践，带你深入探索富文本编辑器背后的原理。

与其他Vue项目不同，这是一个纯前端的项目，主要学习Vue框架的使用与原生Js编写，同时了解DOM的相关知识。

实验列表:

• 第1节：项目搭建
• 第2节：WebPack 基础
• 第3节：Vue 基础讲解
• 第4节：配置文件
• 第5节：Vuex 使用
• 第6节：组件整合
• 第7节：字体与字号
• 第8节：颜色与图片
• 第9节：Selection/Range 讲解
• 第10节：表格与链接
• 第11节：编辑区(一)
• 第12节：编辑区(二)
• 第13节：项目总结

项目展示:

此项目包含了大部分文本操作功能，包括字体，字号，前景色／背景色，图片，超链接等，基本满足日常需求。如果你愿意，学完本程程之后，你完全可以自己扩展功能。

最后：

• 点击【Vue.js 实现富文本编辑器】查看教程详细信息~
• 更多实战项目，点击这里进行查看~
• 12条技术学习路径，带你零基础入门编程~

---

训练营是实验楼推出的专注实战应用的、有老师指导的实验教程，一般课程选题来自优秀的开源技术或仿知名网站，非常适合已学基础技术却迷茫不知道如何运用的同学。