vue3+tinymce,显示无效key

Question

vue3+tinymce,显示无效key

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>

Answer 1

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

在您的问题中，您尝试在 Vue3 项目中集成 TinyMCE 富文本编辑器，但在初始化时遇到了“无效的 API key”错误。TinyMCE 在商业版本或高级功能上需要一个有效的 API key 来验证许可证。

解决此问题的方法是确保您拥有并正确设置了 TinyMCE 的 API key：

1. 首先，前往 TinyMCE 官方网站获取 API Key（若尚未获取）：

   • 访问：https://www.tiny.cloud/get-started/
   • 注册或登录以管理您的 API keys

2. 获取到 API key 后，在您的项目中替换现有的 "no" 值：

<template>
  <div class="MyBody1">
    <!-- 更改此处的 'no' 为实际从 TinyMCE 官网获取的有效 API key -->
    <Editor api-key="YOUR_VALID_API_KEY" :init="tinymce_state.init" v-model="tinymce_state.content" class="editor"/>
    <a v-html="tinymce_state.content"></a>
  </div>
</template>

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

// 确保 tinymce_state.init 中包含了正确的配置项
export default {
  // ...
}
</script>

请将 'YOUR_VALID_API_KEY' 替换为您在 TinyMCE 官网上注册后获得的实际 API key。

此外，请检查 @/utils/tinymce_state.js 文件中的 init 对象配置是否正确，它应该包含基本的编辑器设置，并且在必要时可以添加 API key 设置项，尽管通常情况下直接在 <Editor> 标签内提供 API key 即可。