Vue - Vue3 集成编辑器功能

<template>
  <div>
    <editor v-model="content" :init="editorInitOptions" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue'; // 引入TinyMCE Vue组件
import 'tinymce/models/dom/Sizzle'; // 解决TinyMCE的依赖项缺失问题
 
export default {
  components: {
    Editor
  },
  setup() {
    const content = ref(''); // 使用ref创建响应式数据
 
    const editorInitOptions = {
      height: 500,
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | removeformat | help'
    };
 
    return {
      content,
      editorInitOptions
    };
  }
};
</script>

这个代码实例展示了如何在Vue 3应用中集成TinyMCE编辑器。首先，引入了必要的TinyMCE Vue组件，并定义了编辑器的初始化选项。然后，创建了一个响应式的content变量，用于绑定编辑器的内容，并在模板中使用editor组件进行展示。这个例子简洁明了，并且注重于实现核心功能，而不失去可读性。