最代码人间蒸发的gravatar头像
最代码人间蒸发2019-05-25 15:32:56
沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

注:首先解释一下沙雕程序员系列属于这个菜逼博主学习前端系列文章

最近我啊,可能就是单身久了,寂寞——然后我准备那vue写个博客出来,后续我会在其他文章里,写我拿boot2.1.4整合各种使用的东西,分享给大家。

言归正传!!!!

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

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

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

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

3.这个首页啊有个4和5的概述,点击进入4的概述里边你会看到下图!

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

引入

import CKEDITOR from 'CKEDITOR'

使用

<div id="edtiText" style="margin-top: 30px">
  <textarea id="editor" rows="10" cols="80" ></textarea>
</div>
name: 'edtiText',
mounted  () {
  CKEDITOR.replace('editor', {height: '300px', width: '100%', toolbar: 'full'})
}

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

具体它怎么教的,咱们再看看!

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

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

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

13.运行你的项目,到页面上瞜一眼!!!!

沙雕程序员(二)——教你如何在vue项目中引用最代码的富文本编辑器

完事!拜拜!!!

 

 

 

 


打赏

已有1人打赏

最代码官方的gravatar头像

分享到:

最近浏览
没猫病 LV51小时前
月亮星星
246815 LV13小时前
星星
jy34521昨天
暂无贡献等级
wzhzuidaima LV3昨天
星星星星星星
271972030 LV8昨天
月亮月亮
qq444716720 LV9前天
月亮月亮星星
lipiao LV3前天
星星星星星星
ahee2018前天
暂无贡献等级
shadow小影 LV66月22日
月亮星星星星
shaoyu0215 LV16月21日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友