当前位置: 首页 > 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.dtcms.com/a/319037.html

相关文章:

  • 大屏数据展示页面,数据可视化可以用到的框架和插件
  • 剧本杀小程序系统开发:推动社交娱乐产业创新发展
  • requests模块
  • Web3.0引领互联网未来,助力安全防护升级
  • 基于django的非物质文化遗产可视化网站设计与实现
  • 重学React(三):状态管理
  • Java如何快速实现短信登录?
  • 【指南版】网络与信息安全岗位系列(三):安全运维工程师
  • 农作物优选,耕耘希望的田野
  • Vue3获取当前页面相对路径
  • 008 前端vue
  • Android-Kotlin基础(Jetpack①-ViewModel)
  • 【遥感图像入门】近三年遥感图像建筑物细粒度分类技术一览
  • 前端开发(HTML,CSS,VUE,JS)从入门到精通!第七天(Vue)(二)
  • Tiger任务管理系统-10
  • vue打包号的文件如何快速查找文件打包后的位置
  • 聚水潭API数据接口开发手机端网页查询商品仓位库位库存工具,支持扫描识别,预览图片
  • Numpy科学计算与数据分析:Numpy线性代数基础与实践
  • 决策树技术详解:从理论到Python实战
  • RabbitMQ-日常运维命令
  • 华为开源CANN,再次释放“昇腾转向”信号
  • 【数据结构初阶】--排序(五)--计数排序,排序算法复杂度对比和稳定性分析
  • C语言memmove函数详解:安全高效的内存复制利器
  • ELK基础环境安装准备
  • 飞算JavaAI深度解析:Java开发者的智能革命
  • 构建一个简洁优雅的 PHP 参数验证器 —— php-schema-validator
  • 大疆前端笔试题目详解
  • FPGA开发技能(11)用iperf测试网络性能
  • 【unity知识】unity使用AABB(轴对齐包围盒)和OBB(定向包围盒)优化碰撞检测
  • JavaSE---异常的经典面试题