Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
vue使用富文本编辑器_js富文本编辑器,希望能够帮助你!!!。

之前在Vue-awesome上面找富文本编辑器的插件，找了排名第一的vue-quill-editor，排名第一应该是相对比较好用的。
首先下载到自己的项目中

npm install vue-quill-editor --save -dev 

这个只是富文本编辑器，你使用代码块的话代码是不会高亮的，所以还要装一个highlight.js

npm install highlight.js --save -dev 

注意这个highlight.js中间是有一个点的（不知道发布这个包的作者咋想的）。

然后在引入highlight.js的样式文件

import 'highlight.js/styles/xcode.css' 

我引的主题是xcode，还有其他很多主题，具体可以去他的highlight.js的npm包去查看。

到这里highlight.js的引入就完成了。

vue-quill-editor的配置

modules: { 
    toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 
    'header': 1 }, { 
    'header': 2 }], [{ 
    'list': 'ordered' }, { 
    'list': 'bullet' }], [{ 
    'script': 'sub' }, { 
    'script': 'super' }], [{ 
    'indent': '-1' }, { 
    'indent': '+1' }], [{ 
    'direction': 'rtl' }], [{ 
    'size': ['small', 'medium', 'large', 'huge', 'false'] }], [{ 
    'header': [1, 2, 3, 4, 5, 6, false] }], [{ 
    'font': [] }], [{ 
    'color': [] }, { 
    'background': [] }], [{ 
    'align': [] }], ['clean'], ['link', 'image', 'video'] ], syntax: { 
    highlight: text => { 
    return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方 } } } 

加上语法高亮的配置项貌似就快大功告成了，但是我发现到这里代码块确实有语法高亮了，但是字体还是默认最丑的字体啊，不等宽的英文字体看起来很难受啊有木有。

最后发现问题是不起眼的reset.css把所有的标签都给了默认字体，所以最后把pre和code标签单独拿出来用上自己喜欢的字体就ok啦！

pre, code { 
    font-family: Consolas; } 

Consolas和Monoca我觉得是windows上最好看的字体了。

结束语

第一次写文章，有什么不对的地方还请大家指正批评。告辞~

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。