在 vue 项目中使用 tinymce

发布时间：2023-10-11 13:00

vite + vue 项目

使用 tinymce 官方提供的 @tinymce/tinymce-vue。使用的版本要根据 vue 的版本决定，项目中 vue 是 2.7.7，对应的 @tinymce/tinymce-vue 是 ^3

这个组件只提供了 tinymce 对 vue 适配，tinymce 本身的所有功能都需要另行引用。结合官网的说明和自己的尝试，引用 tinymce 有三种方法

一：使用本地的 tinymce（⭐推荐）

下载 tinymce ，放到 public 文件夹中
$\"在这里插入图片描述\"$
在 index.html 中引用：

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="/tinymce_v6/tinymce.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

在 demo.vue 组件中使用：

<template>
	<editor />
</template>

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

二：不手动引用 tinymce

index.html 中不再引用 tinymce

demo.vue ：

<template>
	<editor api-key='your-api-key'/> <!-- **必须提供 api-key** -->
</template>

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

三：使用 tinymce 的 npm 包

上面两种是官方推荐写法，这种是民间写法

demo.vue:

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

<script setup>
import tinymce from 'tinymce/tinymce' 
import 'tinymce/themes/silver/theme.min.js'	//不写这行会报错
import 'tinymce/icons/default/icons' 	//不写这行会报错
import Editor from '@tinymce/tinymce-vue'
const init = {
  skin_url: '/extracontent_for_npm_tinymce/skins/ui/oxide',	 // 不写这行会报错。这里是文件夹路径。public 下必须有相应的文件夹和文件
  content_css: '/extracontent_for_npm_tinymce/skins/content/document/content.css', 	// 不写这行会报错。public 下必须有相应的文件
}
</script>

tinymce 本体在 node_modules 中，但样式和语言包都要放在 public 里（麻烦）：
$\"在这里插入图片描述\"$
相关网络请求：
$\"在这里插入图片描述\"$

要加插件的话，不能放在 tinymce/plugins 里（因为在 node_modules 中）。

解释

@tinymce/tinymce-vue 中有这样一段代码（简化的）：

   mounted: function () {
       if (window.tinymce !== null) {
          // 初始化
       } else {
       	  // 去 cdn 请求 tinymce 资源，然后再初始化
       }
   },

tinymce 的 npm 包（方法三）中也是把 tinymce 暴露到全局作用域了（目瞪口呆，闹半天这个 npm 包根本不是模块化）：

const exportToWindowGlobal = function(tinymce2) {
    window.tinymce = tinymce2;
    window.tinyMCE = tinymce2;
};

总结

tinymce 的 npm 包太鸡肋了，直接往 window 上注册变量。

只推荐第一种写法。

或者干脆别用 @tinymce/tinymce-vue 了，没什么大用。还是在 index.html 中引用本地的 tinymce ， demo.vue 改为：

<template>
  <section id="target"></section>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // eslint-disable-next-line no-undef
  tinymce.init({
    selector: '#target',
  })
})
</script>

在 vue 项目中使用 tinymce

一：使用本地的 tinymce（⭐推荐）

二：不手动引用 tinymce

三：使用 tinymce 的 npm 包

解释

总结

相关推荐