vue-quill-editor (好用的富文本编辑器，带表格编辑)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
安装依赖
npm i vue-quill-editor@"^3.0.6" //3版本以上
组件QuillEditor.vue文件：
<template>
<keep-alive>
<div class="vue-quill-editor">
<div class="editor"></div>
</div>
</keep-alive>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.snow.css";
// 设置字体大小
const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = [
"12px",
"14px",
"16px",
"18px",
"20px",
"24px",
"28px",
"32px",
"36px",
];
Quill.register(fontSizeStyle, true);
// 设置字体样式
const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"];
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);
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": "清除字体样式",
"ql-upload": "文件",
"ql-table": "插入表格",
"ql-table-insert-row": "插入行",
"ql-table-insert-column": "插入列",
"ql-table-delete-row": "删除行",
"ql-table-delete-column": "删除列",
};
export default {
name: "Editor",
props: {
value: Object,
},
data() {
return {
quill: null,
options: {
theme: "snow",
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ align: [] }], // 对齐方式-----[{ align: [] }]
[
{
size: fontSizeStyle.whitelist,
},
], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ font: fonts }], // 字体种类-----[{ font: [] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
[{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
[{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
["clean"], // 清除文本格式-----['clean']
// ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
[
{ table: "TD" },
{ "table-insert-row": "TIR" },
{ "table-insert-column": "TIC" },
{ "table-delete-row": "TDR" },
{ "table-delete-column": "TDC" },
],
],
handlers: {
table: function (val) {
this.quill.getModule("table").insertTable(2, 3);
},
"table-insert-row": function () {
this.quill.getModule("table").insertRowBelow();
},
"table-insert-column": function () {
this.quill.getModule("table").insertColumnRight();
},
"table-delete-row": function () {
this.quill.getModule("table").deleteRow();
},
"table-delete-column": function () {
this.quill.getModule("table").deleteColumn();
},
},
},
table: true,
},
placeholder: "",
},
};
},
methods: {
addQuillTitle() {
const oToolBar = document.querySelector(".ql-toolbar");
const aButton = oToolBar.querySelectorAll("button");
const 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]];
});
},
getContentData() {
return this.quill.getContents();
},
},
mounted() {
const dom = this.$el.querySelector(".editor");
this.quill = new Quill(dom, this.options);
// this.quill.setContents(this.value)
this.quill.on("text-change", () => {
// console.log(this.quill.getContents())
// this.$emit('contentData', this.quill.getContents())
// console.log(this.quill.root.innerHTML)
this.$emit("contentData", this.quill.root.innerHTML);
});
this.$el.querySelector(
".ql-table-insert-row"
).innerHTML = `<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`;
this.$el.querySelector(
".ql-table-insert-column"
).innerHTML = `<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`;
this.$el.querySelector(
".ql-table-delete-row"
).innerHTML = `<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`;
this.$el.querySelector(
".ql-table-delete-column"
).innerHTML = `<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`;
this.addQuillTitle();
},
activated() {
this.quill.setContents({});
},
};
</script>
<style lang="scss">
.vue-quill-editor {
line-height: normal;
.ql-container.ql-snow {
line-height: normal !important;
height: 460px !important;
font-size: 14px;
}
.ql-snow {
.ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-picker.ql-size {
.ql-picker-label[data-value="12px"]::before,
.ql-picker-item[data-value="12px"]::before {
content: "12px";
}
.ql-picker-label[data-value="14px"]::before,
.ql-picker-item[data-value="14px"]::before {
content: "14px";
}
.ql-picker-label[data-value="16px"]::before,
.ql-picker-item[data-value="16px"]::before {
content: "16px";
}
.ql-picker-label[data-value="18px"]::before,
.ql-picker-item[data-value="18px"]::before {
content: "18px";
}
.ql-picker-label[data-value="20px"]::before,
.ql-picker-item[data-value="20px"]::before {
content: "20px";
}
.ql-picker-label[data-value="24px"]::before,
.ql-picker-item[data-value="24px"]::before {
content: "24px";
}
.ql-picker-label[data-value="28px"]::before,
.ql-picker-item[data-value="28px"]::before {
content: "28px";
}
.ql-picker-label[data-value="32px"]::before,
.ql-picker-item[data-value="32px"]::before {
content: "32px";
}
.ql-picker-label[data-value="36px"]::before,
.ql-picker-item[data-value="36px"]::before {
content: "36px";
}
}
.ql-picker.ql-header {
.ql-picker-label::before,
.ql-picker-item::before {
content: "文本";
}
.ql-picker-label[data-value="1"]::before,
.ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-picker-label[data-value="2"]::before,
.ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-picker-label[data-value="3"]::before,
.ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-picker-label[data-value="4"]::before,
.ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-picker-label[data-value="5"]::before,
.ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-picker-label[data-value="6"]::before,
.ql-picker-item[data-value="6"]::before {
content: "标题6";
}
}
.ql-picker.ql-font {
.ql-picker-label[data-value="SimSun"]::before,
.ql-picker-item[data-value="SimSun"]::before {
content: "宋体";
font-family: "SimSun" !important;
}
.ql-picker-label[data-value="SimHei"]::before,
.ql-picker-item[data-value="SimHei"]::before {
content: "黑体";
font-family: "SimHei";
}
.ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-picker-item[data-value="Microsoft-YaHei"]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.ql-picker-label[data-value="KaiTi"]::before,
.ql-picker-item[data-value="KaiTi"]::before {
content: "楷体";
font-family: "KaiTi" !important;
}
.ql-picker-label[data-value="FangSong"]::before,
.ql-picker-item[data-value="FangSong"]::before {
content: "仿宋";
font-family: "FangSong";
}
}
}
.ql-align-center {
text-align: center;
}
.ql-align-right {
text-align: right;
}
.ql-align-left {
text-align: left;
}
}
</style>
父组件使用：
// 编辑状态
<QuillEditor v-if="isEdit" ref="QuillEditor" />
// 展示状态（为保证格式正确，要命名为"ql-editor",外面盒子要命名为"ql-container ql-snow"）
<div v-else class="ql-container ql-snow">
<div
class="ql-editor"
style="height: 500px; padding: 20px 20px; width: 100%"
v-html="content"
/>
</div>main.js:
import VueQuillEditor from 'vue-quill-editor' // 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)