快速搭建開源網頁編輯器(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
英文地址,請注明出處:http://en.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;帶…