TinyMCE Vue 集成自托管

Question

我在 Vue 项目中集成 TinyMCE 时遇到问题。官方 TinyMCE Vue.js 组件 (tinymce-vue) 可以工作，但只是通过 CDN 请求源的网关。

我想要一个自托管版本，但决不会直接下载源代码。通过 npm 的 tinymce 包无法与 Vue 正确连接。

import tinymce from "tinymce/tinymce";

tinymce.init({ selector: "textarea"}); 抛出错误：

Uncaught SyntaxError: expected expression, got '<' theme.js:1

我在模板中有一个文本区域

我该如何解决这个问题？谢谢

Answer 1

我找到了解决方案

如果项目中没有包含 tinymce，则 tinymce-vue 包会从云端加载 tinymce。

import "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/skins/ui/oxide/skin.css";

import Editor from "@tinymce/tinymce-vue";

加载 tinymce 编辑器的本地设置。

编辑器组件也将可用

Answer 2

 /* Import TinyMCE */
 import tinymce from 'tinymce';

 /* Default icons are required for TinyMCE 5.3 or above */
 import 'tinymce/icons/default';

 /* A theme is also required */
 import 'tinymce/themes/silver';

 /* Import the skin */
 import 'tinymce/skins/ui/oxide/skin.css';

 /* Import plugins */
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/code';
 import 'tinymce/plugins/emoticons';
 import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';

 /* Import premium plugins */
 /* NOTE: Download separately and add these to /src/plugins */
 /* import './plugins/checklist/plugin'; */
 /* import './plugins/powerpaste/plugin'; */
 /* import './plugins/powerpaste/js/wordimport'; */

 /* Import content css */
 import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
 import contentCss from 'tinymce/skins/content/default/content.css';

 /* Initialize TinyMCE */
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
     plugins: 'advlist code emoticons link lists table',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,
     content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
   });
 };

更多信息在这里：https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/webpack/webpack_es6_npm/#procedure

整个 Vue 3 + TinyMCE 6 示例：

<template>
  <editor :init="init" />
</template>

<script>
import { defineComponent } from 'vue'

// TinyMCE
import 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom/model'
import 'tinymce/skins/ui/oxide/skin.css'
import contentUiCss from 'tinymce/skins/ui/oxide/content.css';

// TinyMCE plugins
// https://www.tiny.cloud/docs/tinymce/6/plugins/
import 'tinymce/plugins/lists/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/image/plugin'
import 'tinymce/plugins/table/plugin'
import 'tinymce/plugins/code/plugin'
import 'tinymce/plugins/help/plugin'
import 'tinymce/plugins/wordcount/plugin'

import Editor from '@tinymce/tinymce-vue'

export default defineComponent({
  name: 'App',
  components: {
    'editor': Editor
  },
  setup () {
    return {
      init: {
        skin: false,
        plugins: 'lists link image table code help wordcount',
        content_css: false,
        content_style: contentUiCss.toString(),
      },
    }
  }
})
</script>

TinyMCE Vue 集成自托管

TinyMCE Vue Integration SelfHosted

tinymce

npm

vue.js