vue3单文件主组件应该怎么使用tinymce

Question

vue3单文件主组件应该怎么使用tinymce

<script setup>
import Editor from '@tinymce/tinymce-vue'
import tinymce_state from "@/utils/tinymce_state";
</script>

<template>
  <div class="MyBody1">
    <Editor api-key="no" :init="tinymce_state.init" v-model="tinymce_state.content" class="editor"/>
    <a v-html="tinymce_state.content"></a>
  </div>
</template>

<style scoped>

</style>

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue3 中使用 TinyMCE 编辑器，你需要正确地配置和初始化组件。根据你给出的代码片段，这里是一个完整的示例来展示如何在单文件组件中使用 @tinymce/tinymce-vue：

首先，请确保已安装依赖：

npm install @tinymce/tinymce-vue

然后，在你的主组件中进行如下设置：

<template>
  <div class="MyBody1">
    <Editor
      :key="'editor'"
      :api-key="apiKey"
      :init="editorInit"
      v-model="content"
      @input="onInput"
      class="editor"
    />
    <!-- 使用v-html显示富文本内容 -->
    <a ref="displayText" v-html="displayContent"></a>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';

// 从tinymce_state导入或直接在这里定义初始编辑器配置
import tinymce_state from "@/utils/tinymce_state";

// 初始化时获取API Key，这里假设你有一个全局变量或者环境变量
const apiKey = process.env.VUE_APP_TINYMCE_API_KEY;

// 初始化编辑器配置
const editorInit = tinymce_state.init || {
  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 forecolor backcolor | \
    alignleft aligncenter alignright alignjustify | \
    bullist numlist outdent indent | removeformat | help',
  content_style: 'body { font-family: Arial, sans-serif; font-size: 14px; }'
};

// 使用ref存储编辑器内容
const content = ref('');

// 监听输入事件更新内容
function onInput(value) {
  content.value = value;
}

// 在组件挂载后初始化编辑器（可选，针对某些情况下需要延迟加载的情况）
onMounted(() => {
  // 若有额外初始化操作可以在此处执行
});

// 显示富文本内容（用于v-html绑定）
const displayContent = ref(content.value);

// 确保在响应式数据变化时更新v-html展示的内容
watch(content, (newValue) => {
  displayContent.value = newValue;
});
</script>

<style scoped>
.MyBody1 {
  /* 添加自定义样式 */
}
.editor {
  /* 添加编辑器自定义样式 */
}
</style>

请替换上述代码中的 apiKey 为你实际申请到的TinyMCE API Key，并根据你的需求调整 editorInit 配置项。

此外，注意对富文本内容的展示部分进行了优化，通过 v-model 绑定编辑器内容并监听其变化，实时更新 displayContent 的值以实现通过 v-html 渲染富文本内容。