文章目录
- Tiny MCE 安装方法
-
- 1. 安装node.js
- 2. 创建vue3项目
- 3. 安装TinyMCE依赖并使用
-
- (1)在component文件夹创建Editor.vue文件
- (2)编辑App.vue文件
- (3)运行项目
- (4)获取并设置API key
- (5)设置中文菜单
Tiny MCE 安装方法
1. 安装node.js
下载地址:https://nodejs.org/en/download
下载打开默认安装即可
2. 创建vue3项目
打开项目上级文件夹,执行npm create vue@3,选择你需要的配置,无要求可以全部默认,此命令会在当前目录创建一个vue3项目
项目创建参数解释:
TypeScript
- ✅ 含义:是否在项目中使用 TypeScript(JavaScript 的超集,提供类型检查)。
- 📌 作用:
- 提供更强的类型安全
- 更好的代码提示和错误检查
- 更适合大型项目或团队协作
- ✅ 推荐:如果你希望代码更健壮、易于维护,建议开启。
- ⚠️ 注意:开启后
.vue
文件中的<script>
会使用<script lang="ts">
。
JSX Support
- ✅ 含义:是否支持在 Vue 中使用 JSX/TSX 语法(类似 React 的写法)。
- 📌 作用:
- 允许你用 JavaScript 函数式的方式写模板,例如:
const MyComponent = () => <div>Hello JSX!</div>
- 适合需要动态渲染逻辑复杂的场景。
- 允许你用 JavaScript 函数式的方式写模板,例如:
- ✅ 推荐:大多数项目不需要,Vue 更推荐使用
.vue
单文件组件 + 模板语法。 - ❌ 建议:除非你有特殊需求(如封装组件库),否则可以关闭。
Vue Router
- ✅ 含义:是否集成官方的路由管理器 Vue Router。
- 📌 作用:
- 实