refactor: use setup refactor

This commit is contained in:
xiaoxian521
2021-09-16 23:16:54 +08:00
parent 8f6986608d
commit d4302627e8
13 changed files with 462 additions and 600 deletions

View File

@@ -1,47 +1,40 @@
<script lang="ts">
export default {
name: "reEditor"
};
</script>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, unref } from "vue";
import WangEditor from "wangeditor";
// eslint-disable-next-line no-undef
const editor = ref<ComponentRef>(null);
const html = ref<HTMLElement>(null);
let instance: WangEditor;
onMounted(() => {
instance = new WangEditor(unref(editor));
Object.assign(instance.config, {
onchange() {
html.value = instance.txt.html();
}
});
instance.create();
});
onBeforeUnmount(() => {
instance.destroy();
});
</script>
<template>
<div>
<div ref="editor"></div>
<div :innerHTML="content.html"></div>
<div :innerHTML="html"></div>
</div>
</template>
<script>
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
import WangEditor from "wangeditor";
export default {
name: "reEditor",
setup() {
const editor = ref();
const content = reactive({
html: "",
text: ""
});
let instance;
onMounted(() => {
instance = new WangEditor(editor.value);
Object.assign(instance.config, {
onchange() {
content.html = instance.txt.html();
}
});
instance.create();
});
onBeforeUnmount(() => {
instance.destroy();
instance = null;
});
return {
editor,
content
};
}
};
</script>
<style lang="scss" scoped>
:deep(.w-e-text-container) {
z-index: 99 !important;