@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
146 lines (143 loc) • 4.78 kB
JavaScript
import { defineComponent, shallowRef, reactive, onBeforeUnmount, watch, createElementBlock, openBlock, createVNode, unref, normalizeStyle } from 'vue';
import { ElMessage } from 'element-plus';
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
import '../../../../../node_modules/.pnpm/@wangeditor_editor@5.1.23/node_modules/@wangeditor/editor/dist/css/style.css.mjs';
import '../../../api/index.mjs';
import { useBaseApi } from '../../../api/base/index.mjs';
const _hoisted_1 = { class: "editor-container" };
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
// 是否禁用
disable: {
type: Boolean,
default: () => false
},
// 内容框默认 placeholder
placeholder: {
type: String,
default: () => "\u8BF7\u8F93\u5165\u5185\u5BB9..."
},
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
// 模式，可选 <default|simple>，默认 default
mode: {
type: String,
default: () => "default"
},
// 高度
height: {
type: String,
default: () => "310px"
},
// 双向绑定，用于获取 editor.getHtml()
getHtml: String,
// 双向绑定，用于获取 editor.getText()
getText: String
},
emits: ["update:getHtml", "update:getText"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const editorRef = shallowRef();
const state = reactive({
editorConfig: {
placeholder: props.placeholder,
// 菜单配置
MENU_CONF: {
uploadImage: {
fieldName: "file",
customUpload(file) {
useBaseApi("sysFile").uploadFile({ file, data: null }, "uploadFile").then(({ data }) => {
if (data.type == "success" && data.result) {
editorRef.value.insertNode({ type: "image", src: data.result.url, alt: data.result.fileName, href: data.result.url, children: [{ text: "" }] });
} else {
ElMessage.error("\u4E0A\u4F20\u5931\u8D25\uFF01");
}
});
}
},
insertImage: {
checkImage(src) {
if (src.indexOf("http") !== 0) {
return "\u56FE\u7247\u7F51\u5740\u5FC5\u987B\u4EE5 http/https \u5F00\u5934";
}
return true;
}
},
//上传附件
uploadAttachment: {
fieldName: "file",
customUpload(file, insertFn) {
},
onInsertedAttachment(elem) {
}
},
//视频上传
uploadVideo: {
fieldName: "file",
customUpload(file, insertFn) {
useBaseApi("sysFile").uploadFile({ file, data: null }, "uploadFile").then(({ data }) => {
if (data.type == "success" && data.result) {
editorRef.value.insertNode({ type: "video", src: data.result.url, alt: data.result.fileName, href: data.result.url, children: [{ text: "" }] });
} else {
ElMessage.error("\u4E0A\u4F20\u5931\u8D25\uFF01");
}
});
}
}
}
},
editorVal: props.getHtml
});
const handleCreated = (editor) => {
editorRef.value = editor;
};
const handleChange = (editor) => {
emit("update:getHtml", editor.getHtml());
emit("update:getText", editor.getText());
};
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
watch(
() => props.disable,
(bool) => {
const editor = editorRef.value;
if (editor == null) return;
bool ? editor.disable() : editor.enable();
},
{
deep: true
}
);
watch(
() => props.getHtml,
(val) => {
state.editorVal = val;
},
{
deep: true
}
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(Toolbar), {
editor: editorRef.value,
mode: __props.mode
}, null, 8, ["editor", "mode"]),
createVNode(unref(Editor), {
mode: __props.mode,
defaultConfig: state.editorConfig,
style: normalizeStyle({ height: __props.height }),
modelValue: state.editorVal,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.editorVal = $event),
onOnCreated: handleCreated,
onOnChange: handleChange
}, null, 8, ["mode", "defaultConfig", "style", "modelValue"])
]);
};
}
});
export { _sfc_main as default };