沙雕程序员（二）——教你如何在vue项目中引用ckeditor的富文本编辑器

 

发表文章，或者评论啊啥的，就需要一个好使又强大的富文本编辑器，开始的时候我用的mavonEitor，这个编辑器，不能说他不好使，但他跟最代码官方的这个编辑器就是个弟弟！！！没有字体啊，颜色啊，这些个设置都没有，想要还得给他里边单独添加一些插件，忒麻烦了。

那最代码的富文本编辑器怎么才能在咱的vue项目里使用呢？好吧！老牛忙啊，不教大家怎么用，让我这个寂寞又帅气的菜逼，发扬一波！

1.先给你贴个地址，https://ckeditor.com/，去看看这编辑器的文档。别跟我说你不看，虽然我也没细看！

2.它目前俩个版本，4和5。这里咱们就死跟最代码，跟它用一样的，多逼逼一句，5应该是不能被商用的，想用你得买！，你说气人不？不气，4可以zashi咋使都行！

3.这个首页啊有个4和5的概述

 

4.大哥们进了下载页，会见到四个小兄弟！

这里小弟多说一句，基本套餐，和标准套餐很调皮，没有调节文字颜色和大小。然后你就下载，也不知道他官方干啥吃的，下载俩字只漏出个刘海！好在点击不耽误下载！

5.下载完以后，文件是这个样子。

6.然后你把下载好的ckeditor这个文件夹整体x+v，c+v复制到你vue项目的static下，看下图，找不到就不赖我咯！饭到嘴边了，求求你别吐了！

7.大哥动动手，在index.html中加入

8.在build下找到webpack.base.conf.js这个鸡儿，改不对就报错！

9.改完之后去你要使用文本编辑器的页面，咱们开始使用它咯！！！！大哥们再动动手！

引入

import CKEDITOR from 'CKEDITOR'

使用

name: 'edtiText',
mounted  () {
  CKEDITOR.replace('editor', {height: '300px', width: '100%', toolbar: 'full'})
}

为了大哥们更好的学习，和保护您的视力，我上图，高清无码图！

10.咱们到页面上看看效果

11.什么！！！大哥你因为小玩意太多了，您的真实需求不需要用到这么写！！！！ojbk，小弟给你解决，哎呀妈呀，这百度上也没有啊！可能是我笨，没查到！

但怎么解决呢，好办，官方文档，写的明明白白的！

具体它怎么教的，咱们再看看！

自定义的我试过了，进入它的测试页之后发现，啥也没有，说明下载安装失败！所以我还是选择最全的！！！先下载下来再说，管求它！！

12.你下载了最全的以后呢，进入他那个测试页，也就是index.html。它是这样的！

点击获取配置工具栏配置之后是这样的！

复制好了，恭喜你，就差最后一步咯！，把它粘贴到

13.运行你的项目，到页面上瞜一眼！！！！

完事！拜拜！！！

 

 

 

 

 

加入我们群

如果有需要，欢迎可以加入我们的QQ群！（QQ搜索 816175200，加入我们的QQ群吧！）
有任何问题，也可以加入我们的QQ群，欢迎交（che）流（dan）！也欢迎参观我的博客www.aquestian.cn！