HTML編輯器

用

我們可以使用 HTML 編輯器來編輯 HTML：比如 Dreamweaver（DW）和editplus（小紅本）編輯器雖然好用但還是建議一開始使用文本編輯器來學習 HTML，簡稱記事本（就是創建一個txt文本文件）如下圖：

文本文件

通過記事本，依照以下五步來創建您的第一張網頁。

首先打開記事本
然后鍵入html的主題代碼

3.在body標簽里邊輸入內容

4.然后把寫完的代碼保存之后找到文件把txt的后綴名改成.html

打開自己電腦的瀏覽器，這里推薦使用IE瀏覽器360瀏覽器或者火狐瀏覽器還有谷歌瀏覽器，因為有些瀏覽器不兼容代碼，可能造成最后的顯示效果不一樣。

上面的頁面就是代碼的效果圖

下個文章講解用editplus開發網頁

以上就是文章的全部內容了，有什么不懂的可以評論或者私信告訴我，喜歡的話可以點個贊和關注，每天持續更新。

家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

什么是 CKEditor 5

CKEditor 5 是一款超現代的 JavaScript 富文本編輯器，具有 MVC 架構、自定義數據模型和虛擬 DOM。

CKEditor 5 是用 TypeScript 從頭開始編寫，并具有出色的 webpack 和 Vite 支持，提供了各種類型的所見即所得編輯解決方案以及廣泛的協作支持。從類似于 Google Docs 和 Medium 的編輯器到 Slack 或類似 Twitter 的應用程序，一切都可以在單個編輯框架內實現。作為市場領導者，它不斷擴展和更新。

CKEditor 5 的典型特征可以概括為以下幾點：

精心設計的用戶界面和完美的用戶體驗：編輯器配備了精心設計的 UI 和完美的 UX，因此用戶可以輕松管理媒體和表格，并使用高級功能，例如：自動格式化、提及、從 Word 粘貼或 Markdown 支持。
現代且最先進：CKEditor 5 可以與 Angular、React 和 Vue.js 進行本機集成。 CKEditor 5 還與 Electron 和移動設備（Android、iOS）兼容。
多人協作：借助協作功能，多個用戶可以編寫、評論、跟蹤更改并查看其內容的修訂歷史記錄，全部都是實時進行。
人工智能助手：將強大的 AI 模型添加到富文本編輯器中。通過預制和自由格式的提示選項，開發者可以編寫、改寫、解釋、翻譯和總結內容，而無需離開編輯器。

目前 CKEditor 5 在 Github 通過 MIT 協議開源，有超過 7.8k 的 star、3.5k 的 fork、27.5k 的項目依賴量、代碼貢獻者 120+，妥妥的前端優質開源項目。

開始使用 CKEditor 5

CKEditor 5 在線生成器

開始使用 CKEditor 5 及其所有功能的最簡單方法是使用在線構建器準備自定義構建。開發者所需要做的就是選擇首選的預定義構建作為基礎，添加所有必需的插件，然后下載即用型軟件包。

CKEditor 5 預定義版本

CKEditor 5 預定義版本是一組即用型富文本編輯器。每個版本都提供單一類型的編輯器，具有一組功能和默認配置。

目前可以使用以下 CKEditor 5 預定義版本：

Classic editor
Inline editor
Balloon editor
Balloon block editor
Document editor

使用 CKEditor 5 版本創建編輯器非常簡單，可以通過兩個步驟進行描述：

通過 <script> 標簽加載所需的編輯器。
調用靜態 create() 方法來創建編輯器。

在 HTML 頁面中，添加 CKEditor 應替換的元素：

<div id="editor"></div>

加載經典編輯器版本（可以在 CDN、npm 和 zip 下載之間進行選擇）

<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>

接著調用 ClassicEditor.create()方法：

<script>
	ClassicEditor
		.create( document.querySelector( '#editor' ) )
		.catch( error => {
			console.error( error );
		} );
</script>

上述示例嵌入 CKEditor 5 的完整網頁代碼示例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

對于更高級的用戶或需要將 CKEditor 5 與其應用程序集成的用戶，官方還準備了幾種其他高級方法來實現此目的。

使用 webpack 或 Vite 從源代碼集成編輯器，比如下面的 Vite 的配置示例：

// vite.config.js
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig({
  plugins: [
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
  ],
});

使用 DLL 構建
使用一些與流行 JavaScript 框架的預制集成，比如：Angular、React、Vue2.x、Vue3.x、Next.js、Laravel、 .NET、Drupal 等等。比如下面是 CKEditor 5 與 React 的集成示例：

// App.jsx / App.tsx
import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// 安裝適用于 React 的 CKEditor 5 WYSIWYG 編輯器組件以及選擇的編輯器版本
class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event) => {
            console.log(event);
          }}
          onBlur={(event, editor) => {
            console.log('Blur.', editor);
          }}
          onFocus={(event, editor) => {
            console.log('Focus.', editor);
          }}
        />
      </div>
    );
  }
}

export default App;

CKEditor 5 版本允許開發者快速輕松地初始化應用程序中多種類型的編輯器之一。同時，CKEditor 5 也是一個用于創建定制富文本編輯解決方案的框架。

更多關于 CKEditor 5 的用法和內容可以參考文末的資料，本文不再過多展開。

參考資料

https://github.com/ckeditor/ckeditor5

https://ckeditor.com/ckeditor-5/

https://ckeditor.com/docs/

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html

https://ckeditor.com/blog/ckeditor-5-v32.0.0-with-new-list-properties-support-for-the-script-tag-and-enhanced-mentions/

家好，我是Echa.

富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 是一種可內嵌于瀏覽器，所見即所得（WYSIWYG）的文本編輯器。今天就來介紹 10 款式前端開發常用的富文本編輯器插件！

1. Draft.js

Draft.js 是 Facebook 的一個開源項目，是 React 項目首選的是文本編輯器框架。這是一個健壯、可擴展和可定制的框架。Draft.js 遵循與 React 中的受控組件相同的范例，并提供了一個 Editor 呈現富文本輸入的組件。它還公開了一個EditorStateAPI 來處理/存儲Editor組件中的狀態更新。

該富文本編輯器的特點：

具有高度可擴展性和可定制性；
由 Facebook 支持的龐大且不斷增長的開源開發者社區提供了許多教程和支持；
無縫融入 React 應用程序，使用熟悉的聲明式 API 抽象出渲染、選擇和輸入行為的細節；
Draft.js 模型使用 immutable-js 構建的，提供了一個具有功能狀態更新的 API，并積極利用數據持久性來實現可擴展的內存使用。

GitHub：https://github.com/facebook/draft-js

2. Slate.js

Slate.js 是受 Draft.js 啟發的富文本編輯器。它是一個可深度定制的富編輯器框架，專用于 React。與 Draft.js 類似，它具有良好的 API、強大的插件基礎設施以及與 React 的深度連接。此外，插件生態系統比 Draft.js 小一些，但它的插件質量會更好。

該富文本編輯器的特點：

生成 JSON 輸出，使其更容易與其他模塊集成；
它的嵌套文檔模型支持更復雜的內容結構，如表格、分頁符和其他自定義功能；
可使用插件進行擴展；
提供良好的描述性文檔和交互式演示。

GitHub：https://github.com/ianstormtaylor/slate

3. Quill.js

Quill.js 是一個具有跨平臺和跨瀏覽器支持的富文本編輯器。憑借其可擴展架構和富有表現力的 API，可以完全自定義它以滿足個性化的需求。由于其模塊化架構和富有表現力的 API，可以從 Quill 核心開始，然后根據需要自定義其模塊或將自己的擴展添加到這個富文本編輯器中。它提供了兩個用于更改編輯器外觀的主題，可以使用插件或覆蓋其 CSS 樣式表中的規則進一步自定義。Quill 還支持任何自定義內容和格式，因此可以添加嵌入式幻燈片、3D 模型等。

該富文本編輯器的特點：

由于其 API 驅動的設計，無需像在其他文本編輯器中那樣解析 HTML 或不同的 DOM 樹；
跨平臺和瀏覽器支持，快速輕便；
通過其模塊和富有表現力的 API 完全可定制；
可以將內容表示為 JSON，更易于處理和轉換為其他格式；
提供兩個主題以快速輕松地更改編輯器的外觀。

GitHub：https://github.com/quilljs/quill/

4. TinyMCE

TinyMCE 是一個熱門的富文本編輯器。它的目標是幫助其他開發人員構建精美的 Web 內容解決方案。它易于集成，可以部署在基于云的、自托管或混合環境中。該設置使得合并諸如 Angular、React 和 Vue 等框架成為可能。它還可以使用 50 多個插件進行擴展，每個插件都有 100 多個自定義選項。

TinyMCE 通過創建和編輯表格、建立字體系列、搜索和替換字體以及更改字體大小等功能，讓你可以完全控制你的設計。它還提供了多種云安全功能，包括 JSON Web 令牌和私有 RSA 密鑰，以更好地保護你的內容。

該富文本編輯器的特點：

實時協作支持；
高級表格和復雜內容支持；
增強的媒體嵌入支持；
自動連接檢查器；
編輯器可以在三種模式下使用：經典、內聯、無干擾；
提供云安全功能。

GitHub：https://github.com/tinymce/tinymce

5. wangEditor

wangEditor 是一個使用Typescript 開發的 Web 富文本編輯器，輕量、簡潔、易用、開源免費。它兼容常見的 PC 瀏覽器：Chrome，Firefox，Safar，Edge，QQ 瀏覽器，IE11。

GitHub：https://github.com/wangeditor-team/wangEditor/

6. ProseMirror

ProseMirror 是一個基于 ContentEditable 的所見即所得 HTML 編輯器，功能強大，支持協作編輯和自定義文檔模式 ProseMirror 庫由多個單獨的模塊組成。一個理想的富文本編輯器產生結構化的、語義化的、有意義的文檔的同時還要能夠讓用戶能夠容易地理解與使用。ProseMirror 試著在 Markdown 編輯體驗和傳統的 WYSIWYG 編輯體驗中尋找一種融合的方法。它通過實現一個比普通的 HTML 具有更多的限制和結構化的 WYSIWYG 風格的接口來做到這點。你可以自定義編輯器創建的文檔的結構和內容，使它們符合你應用的需要。

該富文本編輯器的特點：

實時協同編輯：ProseMirror 內置了對實時協同編輯的堅定支持，它允許多個人同時對一個文檔進行編輯。
可擴展的文檔結構：文檔結構（Document schemas）允許使用自定義的文檔結構而無需從頭開始編寫自己的編輯器。
模塊化：模塊機制確保你只載入自己需要的模塊，同時能夠按需替換已有的模塊。
插件化：插件系統允許你容易地增加額外的功能，同時以一種簡單的方式打包你的插件。
函數式：一個函數式和不可變數據結構讓 ProseMirror 很容易的與現代 web app 集成，以實現復雜的編輯行為。
定制化：核心庫小巧且通用，為構建不同類型的編輯器提供基礎支持。

GitHub：https://github.com/prosemirror/

7. Tiptap

Tiptap 是一個基于 Vue 的無渲染的富文本編輯器，它基于 Prosemirror，完全可擴展且無渲染。可以輕松地將自定義節點添加為Vue組件。使用無渲染組件（函數式組件），幾乎完全控制標記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

該富文本編輯器的特點：

支持 Vue，React，Svelte 等框架；
使用 TypeScript 重構，支持類型系統；
代碼多包發布，每個模塊的功能更加獨立，開發者能更好的按需使用；
提供了更多開箱即用的擴展；
完善了文檔細節，有了文檔站點；
更高程度的支持了協同編輯。

GitHub：https://github.com/ueberdosis/tiptap

8. CKEditor 5

CKEditor 是一個強大的富文本編輯器框架，具有模塊化架構、現代集成和協作編輯等功能。它可以通過基于插件的架構進行擴展，從而可以將必要的內容處理功能引入。CKEditor 在市場上已有近 15 年的歷史，因其具有廣泛的功能和舊版軟件兼容性而成為最負盛名的編輯器之一。

CKEditor 5 是一個超現代的 JavaScript 富文本編輯器，具有 MVC 架構、自定義數據模型和虛擬 DOM。它是在 ES6 中從頭開始編寫的，并且具有出色的 webpack支持。可以使用與Angular、React和Vue.js的原生集成。

該富文本編輯器的特點：

與Electron和移動設備（Android、iOS）兼容；
可以自定義編輯器的顏色、語言、尺寸、工具欄等；
可以通過插件擴展；
支持從 Word、Excel 和 Google Docs 粘貼；
可以通過 Media Embed 插件插入視頻、推文、代碼片段、數學公式等。

GitHub：https://github.com/ckeditor/ckeditor5

9. ContentTools

ContentTools 是一個開源的富文本編輯器，只需幾個步驟即可將其添加到任何 HTML 頁面。添加后，將在 HTML 頁面上看到一個鉛筆圖標。單擊時，會出現一個工具箱和檢查器欄。使用這兩個元素，可以在頁面內編輯、調整大小或拖放文本圖像、嵌入的視頻、表格和其他內容。

ContentTools 旨在提供可開箱即用的全功能內容編輯器和可用于構建您自己的編輯器的類和函數工具包。該工具包包括一組輕量級的用戶界面類、一組用于執行常見編輯任務的工具，以及一個用于管理撤消/重做的歷史堆棧。雖然工具包提供的組件可以很好地協同工作，但它們也可以根據需要使用或更換。

該富文本編輯器的特點：

只需幾個簡單的步驟，即可在任何 HTML 頁面上安裝編輯器；
可以控制頁面的哪些區域是可編輯的；
可以通過添加工具進行擴展。

GitHub：https://github.com/GetmeUK/ContentTools

10. Jodit

Jodit 是一款使用純 TypeScript 編寫的（無需使用其他庫），美觀實用的所見即所得開源富文本編輯器，支持中文，超強自定義。

GitHub：https://github.com/xdan/jodit

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML編輯器

用

什么是 CKEditor 5

開始使用 CKEditor 5

CKEditor 5 在線生成器

CKEditor 5 預定義版本

參考資料

1. Draft.js

2. Slate.js

3. Quill.js

4. TinyMCE

5. wangEditor

6. ProseMirror

7. Tiptap

8. CKEditor 5

9. ContentTools

10. Jodit

您的項目需求