wangeditor vue3

<template>
  <div>
    <WangEditor ref="editor" :value="content" @change="updateContent" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import WangEditor from 'wangeditor';

export default {
  name: 'WangEditorComponent',
  setup() {
    const editor = ref(null);
    const content = ref('');

    const updateContent = (newContent) => {
      content.value = newContent;
    };

    onMounted(() => {
      // 初始化编辑器
      editor.value.create();
    });

    return {
      editor,
      content,
      updateContent,
    };
  },
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用 <WangEditor> 组件，并通过 ref 引用它。
   • 绑定 content 数据属性到编辑器的内容，并监听 @change 事件以更新内容。

2. 脚本部分 (<script>):

   • 导入 Vue 的 ref 和 onMounted 钩子，以及 WangEditor 组件。
   • 定义一个名为 WangEditorComponent 的组件。
   • 在 setup 函数中：
     • 创建 editor 和 content 引用。
     • 定义 updateContent 方法来更新 content 的值。
     • 使用 onMounted 钩子在组件挂载后初始化编辑器。

3. 样式部分 (<style scoped>):

   • 可以添加一些自定义样式来美化编辑器。