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>

Answer 3

如果您只是将 TinyMce zip 文件的内容托管在服务器上的公共目录中，那么有一个简单的解决方案 - tinymce-vue 编辑器组件有一个

tinymce-script-src

属性，您可以指向

tinymce.min.js

文件：

<template>
    <editor
        tinymce-script-src="/js/tinymce/tinymce.min.js"
    />
</template>

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

在此示例中，编辑器将从

[domain]/js/tinymce/tinymce.min.js

位置加载