208 lines
6.8 KiB
Vue
208 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<div v-if="!readonly">
|
||
<!-- <QuillEditor class="ql-editor"
|
||
:disabled="true" theme="snow" contentType="html"
|
||
v-model:content="_value" ref="myQuillEditor" :options="editorOption">
|
||
</QuillEditor> -->
|
||
<Toolbar
|
||
style="border-bottom: 1px solid #ccc"
|
||
:editor="editorRef"
|
||
:defaultConfig="toolbarConfig"
|
||
:mode="mode"
|
||
ref="editorToolbarRef"
|
||
/>
|
||
<Editor
|
||
style="height: 500px; overflow-y: hidden"
|
||
v-model="valueHtml"
|
||
:defaultConfig="editorConfig"
|
||
:mode="mode"
|
||
@onCreated="handleCreated"
|
||
/>
|
||
</div>
|
||
<div v-else v-html="_value"></div>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
||
|
||
import { onBeforeUnmount, ref, shallowRef, onMounted, computed, nextTick } from "vue";
|
||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||
import { DomEditor } from '@wangeditor/editor'
|
||
// import { quillEditor as newQuillEditor } from "vue-quill-editor";
|
||
// import "quill/dist/quill.core.css"; // import styles
|
||
// import "quill/dist/quill.snow.css"; // for snow theme
|
||
// import "quill/dist/quill.bubble.css"; // for bubble theme
|
||
// import { QuillEditor } from '@vueup/vue-quill'
|
||
// import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||
|
||
const props = defineProps({
|
||
formProps: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
modelValue: Object,
|
||
readonly: Boolean,
|
||
});
|
||
|
||
const _value = computed({
|
||
get() {
|
||
return props.modelValue ? props.modelValue : "11223344";
|
||
},
|
||
set(val) {
|
||
emits("update:modelValue", val);
|
||
},
|
||
});
|
||
|
||
// 编辑器实例，必须用 shallowRef
|
||
const editorRef = shallowRef();
|
||
|
||
const mode = ref("default"); // or 'simple'
|
||
// 内容 HTML
|
||
const valueHtml = ref("<p>hello</p>");
|
||
|
||
const toolbarConfig = {};
|
||
const editorConfig = { placeholder: "请输入内容..." };
|
||
toolbarConfig.toolbarKeys = [
|
||
"headerSelect",
|
||
"blockquote",
|
||
"|",
|
||
"bold",
|
||
"underline",
|
||
"italic",
|
||
{
|
||
"key": "group-more-style",
|
||
"title": "更多",
|
||
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
|
||
"menuKeys": [
|
||
"through",
|
||
"code",
|
||
"sup",
|
||
"sub",
|
||
"clearStyle"
|
||
]
|
||
},
|
||
"color",
|
||
"bgColor",
|
||
"|",
|
||
"fontSize",
|
||
"fontFamily",
|
||
"lineHeight",
|
||
"|",
|
||
"bulletedList",
|
||
"numberedList",
|
||
"todo",
|
||
{
|
||
"key": "group-justify",
|
||
"title": "对齐",
|
||
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
|
||
"menuKeys": [
|
||
"justifyLeft",
|
||
"justifyRight",
|
||
"justifyCenter",
|
||
"justifyJustify"
|
||
]
|
||
},
|
||
{
|
||
"key": "group-indent",
|
||
"title": "缩进",
|
||
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
|
||
"menuKeys": [
|
||
"indent",
|
||
"delIndent"
|
||
]
|
||
},
|
||
"|",
|
||
// "emotion",
|
||
"insertLink",
|
||
{
|
||
"key": "group-image",
|
||
"title": "图片",
|
||
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
|
||
"menuKeys": [
|
||
"insertImage",
|
||
"uploadImage"
|
||
]
|
||
},
|
||
// {
|
||
// "key": "group-video",
|
||
// "title": "视频",
|
||
// "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
|
||
// "menuKeys": [
|
||
// "insertVideo",
|
||
// "uploadVideo"
|
||
// ]
|
||
// },
|
||
"insertTable",
|
||
"codeBlock",
|
||
"divider",
|
||
"|",
|
||
"undo",
|
||
"redo",
|
||
"|",
|
||
// "fullScreen"
|
||
]
|
||
// 组件销毁时，也及时销毁编辑器
|
||
onBeforeUnmount(() => {
|
||
const editor = editorRef.value;
|
||
if (editor == null) return;
|
||
editor.destroy();
|
||
});
|
||
|
||
const handleCreated = (editor) => {
|
||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||
};
|
||
const editorToolbarRef = ref(null)
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
console.log(113344, editorRef.value.getConfig());
|
||
console.log(113344, editorRef.value.getAllMenuKeys());
|
||
})
|
||
});
|
||
|
||
const emits = defineEmits(["update:modelValue"]);
|
||
|
||
const editorOption = {
|
||
// modules: {
|
||
// toolbar: [
|
||
// 'bold', 'italic', 'underline'
|
||
// // ["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" }], // 文本方向
|
||
|
||
// // [{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||
// // [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
|
||
|
||
// // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
|
||
// // [{ font: [] }], //字体
|
||
// // [{ align: [] }], //对齐方式
|
||
|
||
// // ["clean"], //清除字体样式
|
||
// // ["image"], //上传图片、上传视频
|
||
// ],
|
||
// },
|
||
// theme: "snow",
|
||
};
|
||
|
||
function onEditorBlur(event) {
|
||
// 失去焦点事件
|
||
console.log("blur", event);
|
||
}
|
||
|
||
function onEditorFocus(val) {}
|
||
function onEditorChange(val) {}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ql-editor {
|
||
padding: 0;
|
||
}
|
||
</style>
|