vue获取编辑器纯文字_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节：项目总结

项目展示:

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

最后：

更多实战项目，点击这里进行查看~

12条技术学习路径，带你零基础入门编程~

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