前端技术更新快，好玩的东西特别多，想做好个好用的文字编辑器可真心不容易。尤其是那种边做边玩的轻量化编辑器，超受欢迎。现在，咱们聊聊前端大热的Vue工具，真的很好使，而且功能也全乎，用来开发轻量化的编辑器绝对搞得定！那么今天，我就教你们怎么利用Vue和Quill两个神器搞定一款轻量化带格式的文字编辑器，快点来学！
安装并引入富文本编辑器库
其实咧，Vue这家伙可不带富文本编辑器得咱们自己找库。这里给你们介绍几个不错的库，比如Quill、TinyMCE和CKEditor这些都挺好使的，尤其是Quill，看着顺眼用着也舒心！装起来超快，npm一下就好。用的话更加简单，直接在vue文件里面用import地址接进来就搞定了嘛～
npm install quill
创建富文本编辑器组件
import Quill from 'quill' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'
想要Vue上的富文本编辑器稳妥又顺手？直接封装！首先你得熟练掌握Quill，然后轻松地把它架进一个空dⅤ里去，就在mounted（）中搞定！
用上Quill的那一套options和modules，轻松打扮你的富文本编辑器，让它拥有独特的秀色。接着，别忘了敲一敲getContent()这个按钮，轻轻一点，文章里的所有内容都能马上被你捞出来~
配置富文本编辑器
export default {
name: 'RichTextEditor',
mounted () {
this.quill = new Quill(this.$refs.editor, {
modules: { /* 配置 Quill 的 options 和 modules */ },
theme: 'snow' /* 选择一个主题 */
})
},
methods: {
// 导出 HTML 或纯文本格式化后的内容
getContent () {
return this.quill.root.innerHTML.trim()
}
}
}
/* 在样式中设置组件宽度和高度 */
.ql-container {
width: 300px;
height: 200px;
}
.ql-editor {
height: 150px;
}
觉得Quill使着不习惯？别急，咱们给它调调配置就好。里面有好多自定义的选项，比如工具栏呀、版式设计，甚至语言等等。直接在modules那儿选上钩就行了！
这款小玩意儿能让你随心改侧边栏设计，简单又炫酷!想加点粗体、斜体、下划线啥的都行，轻轻松松搞定。配上Syntax和History这两个得力助手，体验更赞！Syntax让看代码舒服多了；而History能记住你每次操作，随时撤回或恢复到之前的状态，超好用！
说说那些OPTIONS功能，就两个参数，简单得很，分别是placeholder和readOnly。提示一下，placeHolder就是让那小方框有点儿意思，至于readOnly，就是看看得了，不让动手。再说些别的，别忘了language这个重要参数，设定文本的默认语言用滴~
this.quill = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
['clean']
],
syntax: {
highlight: text => hljs.highlightAuto(text).value
},
history: {
delay: 1000,
maxStack: 50,
userOnly: true
}
},
theme: 'snow',
placeholder: '请输入内容 ...',
readOnly: false,
scrollingContainer: '.ql-editor',
language: 'zh-CN'
})
使用富文本编辑器组件
这个东西确实挺好，就像贴纸一样用起来方便，一丢就搞定。再加上$refs，你想要怎么用都成。
别急！依我看，只要睇下上面介绍嘅步骤就简简单单可以搭建出一个Vue版的轻量级富文本。要是用上Quill这款牛逼的插件，你还能搞个高大上、自定义程度高得让人眼花缭乱的顶级富裕文本，真是佩服死了！
评论0