{"version":3,"file":"RichTextEditor.cjs","sources":["../../../../../packages/components/editor/RichTextEditor.vue"],"sourcesContent":["<template>\n    <div\n        class=\"rich-text-editor\"\n        :style=\"{\n            ...defaultStyle,\n            ...titleStyle,\n            paddingLeft: slotIcon ? '30px' : '',\n        }\"\n    >\n        <div ref=\"editorContent\" contenteditable=\"true\" class=\"editor-content\" @focus=\"inputFocus\" @blur=\"inputBlur\" v-html=\"content\"></div>\n        <rich-text-type\n            class=\"type\"\n            contenteditable=\"false\"\n            ref=\"richTextType\"\n            v-show=\"typeShow\"\n            @operationDialog=\"operationDialog\"\n            :edit-element=\"editorContent\"\n        />\n        <!-- v-show=\"typeShow\"  -->\n        <slot name=\"icon\" />\n        <slot name=\"operation\" />\n        <!-- 富文本编辑器弹框 -->\n        <el-dialog v-model=\"editorDialogVisible\" title=\"富文本编辑器\" width=\"60%\" center>\n            <div style=\"border: 1px solid #ccc\">\n                <Toolbar style=\"border-bottom: 1px solid #ccc\" :editor=\"editorRef\" :defaultConfig=\"toolbarConfig\" :mode=\"mode\" />\n                <Editor\n                    style=\"height: 400px; overflow-y: hidden\"\n                    v-model=\"valueHtml\"\n                    :defaultConfig=\"editorConfig\"\n                    :mode=\"mode\"\n                    @onCreated=\"handleCreated\"\n                />\n            </div>\n            <template #footer>\n                <span class=\"dialog-footer\">\n                    <el-button @click=\"operationButton(false)\">取消</el-button>\n                    <el-button type=\"primary\" @click=\"operationButton(true)\"> 确定 </el-button>\n                </span>\n            </template>\n        </el-dialog>\n    </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount, useSlots, shallowRef, watch } from \"vue\";\nimport { Editor, Toolbar } from \"@wangeditor/editor-for-vue\";\n// import \"@wangeditor/editor/dist/css/style.css\"; // 引入 css\nimport RichTextType from \"./RichTextType.vue\";\nimport { editorConfig } from \"../../utils/editorConfig.js\";\nimport { keepCursorEnd } from \"../../utils/index\";\nconst props = defineProps({\n    valueData: {\n        type: String || Number,\n        default: \"\",\n    },\n    defaultStyle: {\n        type: Object,\n        default: () => {},\n        required: false,\n    },\n});\nconst emits = defineEmits([\"update:valueData\", \"focus\", \"blur\"]);\nconst slotIcon = useSlots().icon;\nconst content = ref(\"\"); // 编辑器内默认展示值\ncontent.value = props.valueData;\nconst editorRef = shallowRef(); // 富文本编辑器实例\nconst valueHtml = ref(\"\"); // 富文本编辑器内容\nconst toolbarConfig = {};\nconst mode = \"default\";\nlet titleStyle = ref({}); // 鼠标移入和点击时得样式\nlet typeShow = ref(false); //是否展示操作栏\nlet editorContent = ref(null); // 编辑器内容区域元素标签\nlet richTextType = ref(null); // 操作栏得元素\nlet editorDialogVisible = ref(false); //富文本编辑器显示隐藏\nwatch(\n    () => props.valueData,\n    (newValue) => {\n        content.value = newValue;\n    }\n);\ndefineExpose({ editorContent, editorDialogVisible, typeShow });\nonMounted(() => {\n    responsive();\n});\nonBeforeUnmount(() => {\n    // 销毁组件时销毁编辑器\n    const editor = editorRef.value;\n    if (editor == null) return;\n    editor.destroy();\n});\n// 实现响应式\nfunction responsive() {\n    // 动态赋值\n    content.value = editorContent.value.innerHTML;\n    // emits('change',content);\n    emits(\"update:valueData\", content);\n}\n// 输入框聚焦，修改外部样式\nfunction inputFocus(e) {\n    editorContent.value = e.target;\n    titleStyle.value = {\n        background: \"rgba(238, 240, 245, 1)\",\n        border: \"1px solid rgba(155, 173, 252, 1)\",\n    };\n    // 显示顶部操作栏\n    typeShow.value = true;\n    emits(\"focus\", editorContent.value);\n}\n\n// 输入框失去焦点 样式还原\nfunction inputBlur(e) {\n    titleStyle.value = {};\n    typeShow.value = false;\n    emits(\"blur\");\n    // 动态赋值\n    responsive();\n}\n// 弹框取消和确认\nfunction operationButton(status) {\n    editorDialogVisible.value = false;\n    if (status) {\n        content.value = valueHtml.value;\n    }\n    // 指针固定在最后\n    setTimeout(() => {\n        keepCursorEnd(editorContent.value);\n    }, 5);\n}\nfunction operationDialog(status) {\n    editorDialogVisible.value = status;\n    valueHtml.value = content.value;\n}\n// 富文本编辑器实例化\nfunction handleCreated(editor) {\n    editorRef.value = editor; // 记录 editor 实例，重要！\n}\n</script>\n<style lang=\"scss\" scoped>\n@use \"@wangeditor/editor/dist/css/style.css\" as *;\n.rich-text-editor {\n    min-height: 37px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    border: 1px dashed rgba(0, 0, 0, 0);\n    box-sizing: border-box;\n    position: relative;\n    // border-radius: 4px;\n    font-size: 16px;\n    color: rgba(51, 51, 51, 1);\n    .type {\n        position: absolute;\n        top: -47px;\n        left: 0;\n        z-index: 8888;\n    }\n    .editor-content {\n        width: 100%;\n        height: auto;\n        padding: 3px 6px;\n        border: none !important;\n        background-color: rgba(0, 0, 0, 0);\n    }\n    .editor-content:focus {\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:hover {\n        border: 1px solid rgba(155, 173, 252, 1);\n    }\n    // 清除默认样式\n    .ant-input {\n        padding-left: 0;\n        height: 80%;\n        color: rgb(72, 72, 72);\n        font-size: 16px;\n        border: none !important;\n        background-color: rgba(0, 0, 0, 0);\n    }\n    .ant-input:focus,\n    .ant-input-focused {\n        border: none;\n        box-shadow: none;\n    }\n}\n</style>\n"],"names":["slotIcon","useSlots","content","ref","props","editorRef","shallowRef","valueHtml","toolbarConfig","mode","titleStyle","typeShow","editorContent","richTextType","editorDialogVisible","watch","newValue","expose","onMounted","responsive","onBeforeUnmount","editor","emits","inputFocus","e","inputBlur","operationButton","status","keepCursorEnd","operationDialog","handleCreated"],"mappings":"0pBA8DAA,EAAAC,EAAAA,SAAA,EAAA,KACAC,EAAAC,EAAAA,IAAA,EAAA,EACAD,EAAA,MAAAE,EAAA,UACA,MAAAC,EAAAC,EAAA,WAAA,EACAC,EAAAJ,EAAAA,IAAA,EAAA,EACAK,EAAA,CAAA,EACAC,EAAA,UACA,IAAAC,EAAAP,EAAAA,IAAA,CAAA,CAAA,EACAQ,EAAAR,EAAAA,IAAA,EAAA,EACAS,EAAAT,EAAAA,IAAA,IAAA,EACAU,EAAAV,EAAAA,IAAA,IAAA,EACAW,EAAAX,EAAAA,IAAA,EAAA,EACAY,EAAA,MACA,IAAAX,EAAA,UACAY,GAAA,CACAd,EAAA,MAAAc,CACA,CACA,EACAC,EAAA,CAAA,cAAAL,EAAA,oBAAAE,EAAA,SAAAH,CAAA,CAAA,EACAO,EAAAA,UAAA,IAAA,CACAC,GACA,CAAA,EACAC,EAAAA,gBAAA,IAAA,CAEA,MAAAC,EAAAhB,EAAA,MACAgB,GAAA,MACAA,EAAA,QAAA,CACA,CAAA,EAEA,SAAAF,GAAA,CAEAjB,EAAA,MAAAU,EAAA,MAAA,UAEAU,EAAA,mBAAApB,CAAA,CACA,CAEA,SAAAqB,EAAAC,EAAA,CACAZ,EAAA,MAAAY,EAAA,OACAd,EAAA,MAAA,CACA,WAAA,yBACA,OAAA,kCACA,EAEAC,EAAA,MAAA,GACAW,EAAA,QAAAV,EAAA,KAAA,CACA,CAGA,SAAAa,EAAAD,EAAA,CACAd,EAAA,MAAA,GACAC,EAAA,MAAA,GACAW,EAAA,MAAA,EAEAH,GACA,CAEA,SAAAO,EAAAC,EAAA,CACAb,EAAA,MAAA,GACAa,IACAzB,EAAA,MAAAK,EAAA,OAGA,WAAA,IAAA,CACAqB,gBAAAhB,EAAA,KAAA,CACA,EAAA,CAAA,CACA,CACA,SAAAiB,EAAAF,EAAA,CACAb,EAAA,MAAAa,EACApB,EAAA,MAAAL,EAAA,KACA,CAEA,SAAA4B,EAAAT,EAAA,CACAhB,EAAA,MAAAgB,CACA"}