mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<script lang="ts">
|
||
export default {
|
||
name: "reEditor"
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import WangEditor from "wangeditor";
|
||
import { onMounted, onBeforeUnmount, ref, unref } from "vue";
|
||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||
|
||
const html = ref(null);
|
||
const editor = ref(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>
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium"
|
||
>编辑器组件，采用开源的<el-link
|
||
href="https://www.wangeditor.com"
|
||
target="_blank"
|
||
:icon="useRenderIcon('edit')"
|
||
style="font-size: 16px; margin: 0 4px 5px"
|
||
>wangeditor</el-link
|
||
></span
|
||
>
|
||
</div>
|
||
</template>
|
||
<div ref="editor" />
|
||
<div :innerHTML="html" />
|
||
</el-card>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.w-e-text-container) {
|
||
z-index: 99 !important;
|
||
}
|
||
|
||
:deep(.w-e-toolbar) {
|
||
z-index: 999 !important;
|
||
position: static;
|
||
}
|
||
</style>
|