vue项目使用富文本加高亮效果

1.下载关联包

npm install vue-quill-editor --save -dev // 富文本npm install highlight.js --save -dev // 代码高亮

2.引入并注册

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'/* * 注册 - 业务模块 */// 注册富文本 
import { quillEditor } from 'vue-quill-editor'
import 'highlight.js/styles/xcode.css'
import hljs from 'highlight.js'
export default {  components: { quillEditor }

3.使用组件并添加配置项

<quillEditor :options="editorOption" />data () {    
return {      
editorOption: {        
placeholder: '请在这里输入',        modules: {          
toolbar: [            
['bold', 'italic', 'underline','strike'],            
[{ list: 'ordered' }, { list: 'bullet' }], // toggled buttons            ['blockquote', 'code-block', 'image', 'link']          ],          syntax: {            highlight: text => {              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方            }          }        }      }    }  }

4.富文本具体配置

1.只需要填写功能名的
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了
 
2.需要有默认值的
标题 - header  
[{ 'header': 1 }, { 'header': 2 }] 值字体大小
 
列表 - list 
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
 
上标/下标 - script 
 [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super
 
缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
 
文本方向 - direction
[{ 'direction': 'rtl' }],    值rtl

————————————————
版权声明：本文为CSDN博主「JingG459」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JINGinC/article/details/121058461