npm install vue-quill-editor –save import { quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' - 如果有语言切换的需求，就需要准备语言包按照api的引用方法实现；
- 如果只有一种语言的要求，就可以通过css的content属性更改。
2）按钮多为图标显示，用户使用起来不能清楚明白功能按钮的作用，需要加上一个鼠标停留按钮提示的交互：
const titleConfig = { 'ql-bold': '加粗', 'ql-color': '颜色', 'ql-font': '字体', 'ql-code': '插入代码', 'ql-italic': '斜体', 'ql-link': '添加链接', 'ql-background': '背景颜色', 'ql-size': '字体大小', 'ql-strike': '删除线', 'ql-script': '上标/下标', 'ql-underline': '下划线', 'ql-blockquote': '引用', 'ql-header': '标题', 'ql-indent': '缩进', 'ql-list': '列表', 'ql-align': '文本对齐', 'ql-direction': '文本方向', 'ql-code-block': '代码块', 'ql-formula': '公式', 'ql-image': '图片', 'ql-video': '视频', 'ql-clean': '清除字体样式' } export function addQuillTitle () { const oToolBar = document.querySelector('.ql-toolbar'), aButton = oToolBar.querySelectorAll('button'), aSelect = oToolBar.querySelectorAll('select') aButton.forEach(function (item) { if (item.className === 'ql-script') { item.value === 'sub' ? item.title = '下标' : item.title = '上标' } else if (item.className === 'ql-indent') { item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进' } else { item.title = titleConfig[item.classList[0]] } }) aSelect.forEach(function (item) { item.parentNode.title = titleConfig[item.classList[0]] }) } 其次将quill-title.js引入
import { addQuillTitle } from './modules/quill-title.js' 最后在生命周期mounted中调用方法：
addQuillTitle(); 最终实现了鼠标悬停按钮完成tooltip提示。
'《 虞美人 》
李煜
春花秋月何时了，往事知多少？小楼昨夜又东风，故国不堪回首月明中！
雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。
' 那么问题来了，如何将图片上传到自己的服务器或第三方服务，然后将获得的图片url插入到文本中呢？大致有两个方法，其一是将任务交给服务端，服务端截取base64图片并转化为文件，将其路径或者url替换原来的图片数据；其二是对控件本身下手，首先将图片上传，然后插入到富文本中。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/226141.html原文链接：https://javaforall.net
