文章目錄
- 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。
- ?? 作用:
- 實