|
@@ -132,7 +132,7 @@ export default defineComponent({
|
|
bindModelHandlers(editor);
|
|
bindModelHandlers(editor);
|
|
bindHandlers(e, attrs, unref(editorRef));
|
|
bindHandlers(e, attrs, unref(editorRef));
|
|
}
|
|
}
|
|
- function setValue(editor: Recordable, val: string, prevVal?: string) {
|
|
|
|
|
|
+ function setValue(editor: any, val: string, prevVal?: string) {
|
|
if (
|
|
if (
|
|
editor &&
|
|
editor &&
|
|
typeof val === "string" &&
|
|
typeof val === "string" &&
|
|
@@ -142,6 +142,77 @@ export default defineComponent({
|
|
editor.setContent(val);
|
|
editor.setContent(val);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ function bindModelHandlers(editor: any) {
|
|
|
|
+ const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
|
|
|
|
+ const normalizedEvents = Array.isArray(modelEvents)
|
|
|
|
+ ? modelEvents.join(" ")
|
|
|
|
+ : modelEvents;
|
|
|
|
+
|
|
|
|
+ watch(
|
|
|
|
+ () => props.modelValue,
|
|
|
|
+ (val: string, prevVal: string) => {
|
|
|
|
+ setValue(editor, val, prevVal);
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ watch(
|
|
|
|
+ () => props.value,
|
|
|
|
+ (val: any, prevVal: any) => {
|
|
|
|
+ setValue(editor, val, prevVal);
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ immediate: true,
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ editor.on(
|
|
|
|
+ normalizedEvents ? normalizedEvents : "change keyup undo redo",
|
|
|
|
+ () => {
|
|
|
|
+ const content = editor.getContent({ format: attrs.outputFormat });
|
|
|
|
+ emit("update:modelValue", content);
|
|
|
|
+ emit("change", content);
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ function handleDone(name: string, url: string) {
|
|
|
|
+ const editor = unref(editorRef);
|
|
|
|
+ if (!editor) return;
|
|
|
|
+
|
|
|
|
+ const content = editor?.getContent() ?? "";
|
|
|
|
+ const val =
|
|
|
|
+ content?.replace(getImgName(name), `<img src="${url}"/>`) ?? "";
|
|
|
|
+ setValue(editor, val);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function getImgName(name: string) {
|
|
|
|
+ return `[uploading:${name}]`;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ containerWidth,
|
|
|
|
+ initOptions,
|
|
|
|
+ tinymceContent,
|
|
|
|
+ tinymceScriptSrc,
|
|
|
|
+ elRef,
|
|
|
|
+ tinymceId,
|
|
|
|
+ handleDone,
|
|
|
|
+ editorRef,
|
|
|
|
+ };
|
|
},
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped></style>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+.tinymce-container {
|
|
|
|
+ position: relative;
|
|
|
|
+ line-height: normal;
|
|
|
|
+
|
|
|
|
+ textarea {
|
|
|
|
+ z-index: -1;
|
|
|
|
+ visibility: hidden;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|