本指南展示了如何使用 TinyMCE Vue.js 组件 将 TinyMCE 打包到 Vue.js 应用程序中。

前提条件

此过程需要：

步骤

  1. 使用 Create Vue Tool 创建一个名为 tinymce-vue-demo 的新 Vue 项目。

    • 从命令行或命令提示符创建一个 Vue.js 3.x 项目：tinymce-vue-demo。

      npm create vue@3

    • 如果需要 Vue.js 2.x 项目，请改用：

      npm create vue@2

      根据 Vue FAQ，Vue 2 将于 2023 年底停止支持。

    • 按照提示操作，并将项目名称输入为 tinymce-vue-demo。

  2. 进入新创建的目录。

    cd tinymce-vue-demo

  3. 安装 tinymce 和 tinymce-vue 包。

    • 对于 Vue.js 3.x 用户：

      npm install tinymce "@tinymce/tinymce-vue"

    • 对于 Vue.js 2.x 用户：

      npm install tinymce "@tinymce/tinymce-vue@^3"

  4. 创建 src/editor.js 并设置其内容为：

    // Add the @tinymce/tinymce-vue wrapper to the bundle
import Editor from '@tinymce/tinymce-vue';

// Ensure TinyMCE is imported to register the global variable required by other components
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
// Include resources that a plugin lazy-loads at the run-time
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/wordcount';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Vue components
export default Editor;

  5. 更新 src/App.vue 以导入并配置 Editor。

    <template>
  <div>
    <h1>TinyMCE Vue Demo</h1>
    <Editor
      v-model="content"
      :init="editorConfig"
      licenseKey="gpl"
    />
  </div>
</template>

<script>
import Editor from './editor.js';

export default {
  name: 'App',
  components: {
    Editor
  },
  data() {
    return {
      content: '<p>This is the initial content of the editor.</p>',
      editorConfig: {
        height: 500,
        plugins: 'advlist autolink lists link image table code help wordcount',
        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
      }
    };
  }
};
</script>

  6. 要启动开发服务器，请运行：

    npm run dev

其他资源