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>
|