当前位置: 首页 > news >正文

快速搭建开源网页编辑器(vue+TinyMCE)

文章目录

  • 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
temp.png
下载打开默认安装即可

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>
      
    • 适合需要动态渲染逻辑复杂的场景。
  • ✅ 推荐:大多数项目不需要,Vue 更推荐使用 .vue 单文件组件 + 模板语法。
  • ❌ 建议:除非你有特殊需求(如封装组件库),否则可以关闭

Vue Router

  • ✅ 含义:是否集成官方的路由管理器 Vue Router。
  • 📌 作用:
http://www.xdnf.cn/news/1255231.html

相关文章:

  • 【RabbitMQ面试精讲 Day 13】HAProxy与负载均衡配置
  • 深度学习的视觉惯性里程计(VIO)算法优化实践
  • 七、Linux Shell 与脚本基础
  • C语言memmove函数详解:安全高效的内存复制利器
  • 使用Spring Boot + Angular构建安全的登录注册系统
  • 自动化办公革命:3小时完成8小时工作量
  • 每日算法刷题Day58:8.7:leetcode 单调栈5道题,用时2h
  • Python 基础详解:数据类型(Data Types)—— 程序的“数据基石”
  • 超高车辆如何影响城市立交隧道安全?预警系统如何应对?
  • 鸿蒙网络编程系列61-仓颉版基于TCP实现最简单的HTTP服务器
  • 计算机网络:固定网络位长度子网划分flsm和可变长子网掩码划分vlsm的区别
  • 【C++】哈希表原理与实现详解
  • 代码随想录day58图论8
  • Mysql数据仓库备份脚本
  • Android视图状态以及重绘
  • 快速开发实践
  • 内网穿透原理和部署教程
  • 【Kubernetes】部署 kube-bench 实现 K8s 最佳实践
  • tcpdump问题记录
  • Linux下动态库链接的详细过程
  • 【数据结构初阶】--排序(五)--计数排序,排序算法复杂度对比和稳定性分析
  • Python Socket 脚本深度解析与开发指南
  • MySQL梳理四:事务日志机制和多版本并发控制(MVCC)
  • SpringMvc的原理深度剖析及源码解读
  • 前端页面直接生成PDF下载文件
  • “物联网+职业本科”:VR虚拟仿真实训室的发展前景
  • 物联网架构全解析:华为“1+2+1”与格行随身WiFi,技术如何定义未来生活?
  • 基于开源AI智能名片链动2+1模式S2B2C商城小程序的微商产品经营策略研究
  • 技术优势铸就行业标杆:物联网边缘计算网关凭何引领智能变革?
  • 008 前端vue