Vue3.0 中使用 wangEditor 富文本编辑器

2023-10-05 08:25:34 浏览数 (2)

当使用Vue 3.0版本时,wangEditor的使用方法略有不同。以下是在Vue 3.0中使用wangEditor富文本编辑器的示例代码:

代码语言:javascript复制
<template>
  <div>
    <div ref="editorContainer"></div>
    <button @click="saveContent">保存</button>
  </div>
</template>

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

export default {
  setup() {
    const editorContainer = ref(null);

    onMounted(() => {
      const editor = new WangEditor(editorContainer.value);
      editor.create();
    });

    const saveContent = () => {
      const editor = WangEditor.getEditor(editorContainer.value);
      const content = editor.txt.html();
      // 处理保存逻辑,可以将content发送到服务器或者进行其他操作
      console.log(content);
    };

    return {
      editorContainer,
      saveContent
    };
  }
};
</script>

在这个示例中,使用了Vue 3.0的Composition API来编写组件。通过ref函数创建了一个响应式的editorContainer引用,用于获取编辑器的容器元素。

在onMounted钩子函数中,创建了wangEditor实例,并将其绑定到editorContainer.value上。这里使用.value来访问ref对象的值。

在saveContent函数中,通过WangEditor.getEditor()方法获取编辑器实例,并使用editor.txt.html()获取编辑器中的内容。可以根据需要自行处理保存逻辑。

确保在项目中正确安装了wangEditor,并在使用前进行了引入。

0 人点赞