vue3单文件主组件应该怎么使用tinymce，如何实现自托管而不需要key

Question

vue3单文件主组件应该怎么使用tinymce，如何实现自托管而不需要key

<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富文本编辑器的自托管并避免使用apiKey（由于你提到不需要key），你可以通过以下步骤配置和使用TinyMCE：

1. 首先确保已经安装了@tinymce/tinymce-vue包。如果没有，请运行以下命令进行安装：

   npm install @tinymce/tinymce-vue
   

2. 在你的tinymce_state.js文件或对应的模块中，配置TinyMCE的初始化参数以指向你本地托管的TinyMCE资源（包括CSS、JS等）。这里我们不设置apiKey，并开启必要的插件与主题：

// src/utils/tinymce_state.js
export default {
  init: {
    // 自定义TinyMCE CDN地址或本地路径
    base_url: '/path/to/tiny_mce',
    suffix: '.min', // 使用.min后缀的压缩文件

    // 必要的基本插件
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],

    // 使用的皮肤
    skin: false, // 如果本地有皮肤资源，则指定skin和skin_url；若没有则无需设置，使用默认样式
    // skin_url: '/path/to/skin',

    // 编辑器高度和宽度
    height: 500,
    width: '100%',

    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | forecolor backcolor emoticons | help',
    
    // 禁止加载外部服务（例如apiKey相关验证）
    external_plugins: {},

    // 其他自定义配置...
  },
  content: ''
}

1. 在你的单文件组件中继续使用已配置好的初始化对象：

<template>
  <div class="MyBody1">
    <!-- 引入TinyMCE编辑器 -->
    <Editor :init="tinymce_state.init" v-model="tinymce_state.content" class="editor"/>
    <a v-html="tinymce_state.content"></a>
  </div>
</template>

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

// 将tinymce_state内容绑定到组件状态
defineProps({
  value: {
    type: String,
    default: () => tinymce_state.content
  }
})

// 更新tinymce_state的内容
defineEmits(['update:value'])
const emit = defineEmits(['update:modelValue'])

watch(
  () => props.value,
  (newVal) => {
    tinymce_state.content = newVal;
  }
)

onMounted(() => {
  // 当组件挂载后，更新编辑器模型值
  tinymce_state.content = toRef(props, 'value').value;
});

// 监听编辑器内容变化，同步到组件状态
function onEditorChange(e) {
  tinymce_state.content = e.target.getContent();
  emit('update:modelValue', tinymce_state.content);
}

// 注册事件监听
Editor.component.on('change', onEditorChange);
</script>

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

请根据实际情况调整上述代码中的TinyMCE资源路径以及其他初始化配置项。同时，为了双向数据绑定正常工作，需要适当地处理props和emit。

注意：自托管时需确保正确引入了所有必需的TinyMCE核心文件以及所用到的插件和主题文件。