vue3+ts - wangeditor 富文本编辑器的使用

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>
 
<script lang="ts">
import { onMounted, ref } from 'vue';
import E from 'wangeditor';
 
export default {
  setup() {
    const editorRef = ref<HTMLElement | null>(null);
    let editor: E | null = null;
 
    onMounted(() => {
      if (editorRef.value) {
        editor = new E(editorRef.value);
        // 配置编辑器
        editor.config.menus = [
          // 'bold',
          // 'italic',
          // ...
        ];
 
        // 创建编辑器
        editor.create();
 
        // 设置内容
        editor.txt.html('<p>初始内容</p>');
      }
    });
 
    // 提供给外部的方法来获取编辑器内容
    const getContent = () => {
      if (editor) {
        return editor.txt.html();
      }
      return '';
    };
 
    return {
      editorRef,
      getContent,
    };
  },
};
</script>
 
<style>
/* 这里可以添加wangeditor的样式 */
</style>

这个示例展示了如何在Vue 3和TypeScript项目中集成wangeditor富文本编辑器。代码中使用了setup函数和Composition API，包括onMounted和ref。editorRef是一个响应式引用，指向编辑器的DOM元素，在onMounted钩子中初始化编辑器。提供了getContent方法来获取编辑器内容。