快速搭建开源网页编辑器(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.pswp.cn/diannao/95059.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/95059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ADK【4】内置前端调用流程

文章目录说明ADK内置前端ADK内置前端开启流程说明 本文学自赋范社区公开课&#xff0c;仅供学习和交流使用&#xff0c;不用作任何商业用途&#xff01; ADK内置前端 ADK作为最新一代Agent开发框架&#xff0c;不仅功能特性非常领先&#xff0c;而且还内置了非常多的工具&am…

LLMs之GPT-5:OpenAI 发布更智能、更快速、更有用的 AI 模型—内置思考能力,赋能人人专家级智能—技术突破、性能评估与安全保障全面解读

LLMs之GPT-5&#xff1a;OpenAI 发布更智能、更快速、更有用的 AI 模型—内置思考能力&#xff0c;赋能人人专家级智能—技术突破、性能评估与安全保障全面解读 导读&#xff1a;2025年8月7日&#xff0c;OpenAI 发布了 GPT-5&#xff0c;这是他们目前最智能的 AI 系统。它在编…

Java 中操作 R 的全面指南

Java 中操作 R 的全面指南 引言 Java作为一种广泛使用的编程语言,具有跨平台、高性能、可扩展等特点。随着大数据和机器学习的兴起,Java在处理和分析复杂数据集方面发挥着越来越重要的作用。R语言,作为一种专门用于统计计算和图形展示的语言,同样在数据分析领域有着举足轻…

数据结构——优先级队列(PriorityQueue):一文解决 Top K 问题!

目录 1.优先级队列 2. 堆的概念 3. 堆的存储方式 4. 堆的创建 4.1 向下调整 4.2 堆的创建 4.3 堆的插入 4.4 堆的删除 5.用堆模拟实现优先级队列 6.常用接口的介绍 6.1 PriorityQueue 的特性 6.2 PriorityQueue 的方法 7. Top K问题 1.优先级队列 队列是一种先进先…

C语言自定义类型深度解析:联合体与枚举

在C语言中&#xff0c;自定义类型为数据组织提供了极大的灵活性。除了常用的结构体&#xff0c;联合体&#xff08;共用体&#xff09;和枚举也是非常重要的自定义类型。本文将结合实例&#xff0c;详细解析联合体和枚举的特性、用法及实际应用场景。 一、联合体&#xff08;Un…

Numpy科学计算与数据分析:Numpy数据分析基础之统计函数应用

Numpy统计函数实战&#xff1a;数据的聚合与分析 学习目标 通过本课程的学习&#xff0c;学员将掌握Numpy中用于统计分析的关键函数&#xff0c;如求和(sum)、平均值(mean)、标准差(std)等&#xff0c;能够熟练地在实际数据集中应用这些函数进行数据的聚合与分析。 相关知识…

从引导加载程序到sysfs:Linux设备树的完整解析与驱动绑定机制

摘要本报告旨在为嵌入式Linux开发者详细梳理设备树&#xff08;Device Tree, DT&#xff09;在系统启动中的完整解析流程。报告将从引导加载程序&#xff08;Bootloader&#xff09;如何准备和传递设备树二进制文件&#xff08;DTB&#xff09;开始&#xff0c;逐步深入到内核如…

基于深度学习的污水新冠RNA测序数据分析系统

基于深度学习的污水新冠RNA测序数据分析系统 摘要 本文介绍了一个完整的基于深度学习技术的污水新冠RNA测序数据分析系统&#xff0c;该系统能够从未经处理的污水样本中识别新冠病毒变种、监测病毒动态变化并构建传播网络。我们详细阐述了数据处理流程、深度学习模型架构、训练…

宝塔面板配置Nacos集群

一、环境准备 准备三台及以上的服务器&#xff0c;我这里准备了3台服务器&#xff0c;172.31.5.123&#xff5e;125&#xff1b;分别安装好宝塔面板&#xff0c;软件商店里安装nacos&#xff1b;二、Nacos集群配置 配置数据库连接&#xff1a;​ 进入每台服务器上 Nacos 解压后…

Spring Boot 3.x 全新特性解析

Spring Boot 是企业级 Java 开发中最常用的框架之一。自 Spring Boot 3.x 发布以来&#xff0c;其引入的一系列重大变更与优化&#xff0c;为开发者提供了更现代、更高效的开发体验。本文将重点解析 Spring Boot 3.x 的关键特性及其对项目架构的影响。 一、基于 Jakarta EE 10 …

2025.8.10总结

今天晚上去跑了2公里&#xff0c;跑完还挺爽的&#xff0c;然后花了1.5个小时去公司刷题&#xff0c;没有进行限时练&#xff0c;花了一周的时间才做完这题&#xff0c;共找了20个bug&#xff0c;虽然没有进行限时练&#xff0c;但我仿佛对测试技术掌握得更好了&#xff0c;知道…

qt中实现QListWidget列表

使用最基本的QListWidgetItem来创建列表项&#xff0c;具体使用下面setText、setIcon、addItem这三个方法#include "mainwindow.h" #include "ui_mainwindow.h" #include "QDebug"enum CustomRoles {IdRole Qt::UserRole, // 存储IDPhoneR…

nginx-主配置文件

nginx-主配置文件一、主配置文件nginx.conf内容二、修改配置的文件后的操作三、配置虚拟主机的域名1. 修改nignx.conf配置文件2. 新建域名对应的网页根目录3. 重载nginx配置4. 验证一、主配置文件nginx.conf内容 [rootweb1 conf]# cat nginx.conf#user nobody; # nginx woke…

DBSACN算法的一些应用

以下是 DBSCAN 算法在 Python 中的几个典型应用示例&#xff0c;涵盖了基础使用、参数调优和可视化等方面&#xff1a;import numpy as np import matplotlib.pyplot as plt from sklearn.cluster import DBSCAN from sklearn.datasets import make_moons, make_blobs from skl…

java9学习笔记-part1

G1 成为默认垃圾回收器在 Java 8 的时候&#xff0c;默认垃圾回收器是 Parallel Scavenge&#xff08;新生代&#xff09;Parallel Old&#xff08;老年代&#xff09;。到了 Java 9, CMS 垃圾回收器被废弃了&#xff0c;G1&#xff08;Garbage-First Garbage Collector&#x…

【github.io静态网页 怎么使用 github.io 搭建一个简单的网页?】

这里是一张展示 GitHub Pages 静态网站架构与部署流程的示意图&#xff0c;可以帮助你更直观理解整个流程。 要使用 github.io&#xff08;GitHub Pages&#xff09;搭建一个简单的网页&#xff0c;你可以按照以下步骤操作&#xff1a; 快速入门&#xff1a;个人网站&#xff…

记录一次ubuntu20.04 解决gmock not found问题的过程

在电脑上源码编译moveit&#xff0c;系统是ubuntu20.04&#xff0c;有三个电脑&#xff0c;分别叫做A,B,C好了&#xff0c;A和C都可以很顺畅地走流程编译通过&#xff0c;但是B遇到了gmock not found的问题&#xff0c;一开始没当回事&#xff0c;感觉重装下库&#xff0c;或者…

Java基础编程核心案例:从逻辑到应用

Java编程的核心在于将逻辑思维转化为可执行的代码。本专栏通过8个实用案例&#xff0c;覆盖条件判断、循环结构、数组操作、用户交互等基础知识点&#xff0c;展示如何用Java解决实际问题&#xff0c;从简单游戏到数据计算&#xff0c;逐步构建编程思维。 案例一&#xff1a;剪…

Starlink卫星终端对星策略是终端自主执行的还是网管中心调度的?

以下文章首先来源于Google Gemini的Deep Research的内容,在Deep Research的报告参考了SpaceX公开信息、FCC技术报告、相关专利(如US9906292B2)以及学术研究的综合分析,并参考了RFWirelessWorld和APNIC博客等二次来源。 文章完成之后,前后发给了Grok和deepseek,让Grok和d…

【CDA案例】数据分析案例拆解:解锁数据分析全流程!

在当今数字化时代&#xff0c;数据如同一座座金矿&#xff0c;蕴含着巨大的价值。企业、组织乃至个人都渴望从海量的数据中挖掘出有用的信息&#xff0c;以指导决策、优化运营、提升竞争力。今天我们以一个实际的数据分析案例为蓝本&#xff0c;深入拆解其全过程&#xff0c;带…