1.安装quill-html-edit-button
"quill-html-edit-button": "^2.2.7",
直接复制到packjson里面npm安装
2.在使用富文本的页面引入,并注册
import { Quill } from vue-quill-editor
import htmlEditButton from "quill-html-edit-button";
Quill.register({
"modules/htmlEditButton": htmlEditButton
})
3.富文本编辑器的配置代码
editorOption: {
placeholder: 编辑文章内容 ,
modules: {
toolbar: {
container: [
[ bold , italic , underline , strike ], // 加粗 斜体 下划线 删除线
[ blockquote , code-block ], // 引用 代码块
[{
header: 1 }, {
header: 2 }], // 1、2 级标题
[{
list: ordered }, {
list: bullet }], // 有序、无序列表
[{
script: sub }, {
script: super }], // 上标/下标
[{
indent: -1 }, {
indent: +1 }], // 缩进
[{
direction: rtl }], // 文本方向
[ link , image , video ], // 链接、图片、视频
[{
align: [] }], // 添加居中按钮
[{
color: [] }] // 文字颜色按钮
]
},
htmlEditButton:{
debug: true, // logging, default:false
msg: "在这里修改HTML代码,点击完成将替换编辑器的内容", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor s contents will be replaced
okText: "完成", // Text to display in the OK button, default: Ok,
cancelText: "撤销", // Text to display in the cancel button, default: Cancel
buttonHTML: "<>", // Text to display in the toolbar button, default: <>
buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
prependSelector: div#myelement , // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
editorModules: {}
}
},
},
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...


