整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML編輯器

          我們可以使用 HTML 編輯器來編輯 HTML:比如 Dreamweaver(DW)和editplus(小紅本 )編輯器雖然好用但還是建議一開始使用文本編輯器來學(xué)習(xí) HTML,簡稱記事本(就是創(chuàng)建 一個txt文本文件)如下圖:


          文本文件


          通過記事本,依照以下五步來創(chuàng)建您的第一張網(wǎng)頁。

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

          3.在body標(biāo)簽里邊輸入內(nèi)容


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

          1. 打開自己電腦的瀏覽器,這里推薦使用IE瀏覽器360瀏覽器或者火狐瀏覽器還有谷歌瀏覽器,因?yàn)橛行g覽器不兼容代碼,可能造成最后的顯示效果不一樣。

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

          下個文章講解用editplus開發(fā)網(wǎng)頁

          以上就是文章的全部內(nèi)容了,有什么不懂的可以評論或者私信告訴我,喜歡的話可以點(diǎn)個贊和關(guān)注,每天持續(xù)更新。

          家好,很高興又見面了,我是"高級前端進(jìn)階",由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù),大家一起進(jìn)步,也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!

          什么是 CKEditor 5

          CKEditor 5 是一款超現(xiàn)代的 JavaScript 富文本編輯器,具有 MVC 架構(gòu)、自定義數(shù)據(jù)模型和虛擬 DOM。

          CKEditor 5 是用 TypeScript 從頭開始編寫,并具有出色的 webpack 和 Vite 支持,提供了各種類型的所見即所得編輯解決方案以及廣泛的協(xié)作支持。 從類似于 Google Docs 和 Medium 的編輯器到 Slack 或類似 Twitter 的應(yīng)用程序,一切都可以在單個編輯框架內(nèi)實(shí)現(xiàn)。 作為市場領(lǐng)導(dǎo)者,它不斷擴(kuò)展和更新。

          CKEditor 5 的典型特征可以概括為以下幾點(diǎn):

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

          目前 CKEditor 5 在 Github 通過 MIT 協(xié)議開源,有超過 7.8k 的 star、3.5k 的 fork、27.5k 的項(xiàng)目依賴量、代碼貢獻(xiàn)者 120+,妥妥的前端優(yōu)質(zhì)開源項(xiàng)目。

          開始使用 CKEditor 5

          CKEditor 5 在線生成器

          開始使用 CKEditor 5 及其所有功能的最簡單方法是使用在線構(gòu)建器準(zhǔn)備自定義構(gòu)建。 開發(fā)者所需要做的就是選擇首選的預(yù)定義構(gòu)建作為基礎(chǔ),添加所有必需的插件,然后下載即用型軟件包。

          CKEditor 5 預(yù)定義版本

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

          目前可以使用以下 CKEditor 5 預(yù)定義版本:

          • Classic editor
          • Inline editor
          • Balloon editor
          • Balloon block editor
          • Document editor

          使用 CKEditor 5 版本創(chuàng)建編輯器非常簡單,可以通過兩個步驟進(jìn)行描述:

          • 通過 <script> 標(biāo)簽加載所需的編輯器。
          • 調(diào)用靜態(tài) create() 方法來創(chuàng)建編輯器。

          在 HTML 頁面中,添加 CKEditor 應(yīng)替換的元素:

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

          加載經(jīng)典編輯器版本(可以在 CDN、npm 和 zip 下載之間進(jìn)行選擇)

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

          接著調(diào)用 ClassicEditor.create()方法:

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

          上述示例嵌入 CKEditor 5 的完整網(wǎng)頁代碼示例如下所示:

          <!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 與其應(yīng)用程序集成的用戶,官方還準(zhǔn)備了幾種其他高級方法來實(shí)現(xiàn)此目的。

          • 使用 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 構(gòu)建
          • 使用一些與流行 JavaScript 框架的預(yù)制集成,比如: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 版本允許開發(fā)者快速輕松地初始化應(yīng)用程序中多種類型的編輯器之一。 同時,CKEditor 5 也是一個用于創(chuàng)建定制富文本編輯解決方案的框架。

          更多關(guān)于 CKEditor 5 的用法和內(nèi)容可以參考文末的資料,本文不再過多展開。

          參考資料

          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, 是一種可內(nèi)嵌于瀏覽器,所見即所得(WYSIWYG)的文本編輯器。今天就來介紹 10 款式前端開發(fā)常用的富文本編輯器插件!

          1. Draft.js

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

          該富文本編輯器的特點(diǎn)

          • 具有高度可擴(kuò)展性和可定制性;
          • 由 Facebook 支持的龐大且不斷增長的開源開發(fā)者社區(qū)提供了許多教程和支持;
          • 無縫融入 React 應(yīng)用程序,使用熟悉的聲明式 API 抽象出渲染、選擇和輸入行為的細(xì)節(jié);
          • Draft.js 模型使用 immutable-js 構(gòu)建的,提供了一個具有功能狀態(tài)更新的 API,并積極利用數(shù)據(jù)持久性來實(shí)現(xiàn)可擴(kuò)展的內(nèi)存使用。

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

          2. Slate.js

          Slate.js 是受 Draft.js 啟發(fā)的富文本編輯器。它是一個可深度定制的富編輯器框架,專用于 React。與 Draft.js 類似,它具有良好的 API、強(qiáng)大的插件基礎(chǔ)設(shè)施以及與 React 的深度連接。此外,插件生態(tài)系統(tǒng)比 Draft.js 小一些,但它的插件質(zhì)量會更好。

          該富文本編輯器的特點(diǎn)

          • 生成 JSON 輸出,使其更容易與其他模塊集成;
          • 它的嵌套文檔模型支持更復(fù)雜的內(nèi)容結(jié)構(gòu),如表格、分頁符和其他自定義功能;
          • 可使用插件進(jìn)行擴(kuò)展;
          • 提供良好的描述性文檔和交互式演示。

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

          3. Quill.js

          Quill.js 是一個具有跨平臺和跨瀏覽器支持的富文本編輯器。憑借其可擴(kuò)展架構(gòu)和富有表現(xiàn)力的 API,可以完全自定義它以滿足個性化的需求。由于其模塊化架構(gòu)和富有表現(xiàn)力的 API,可以從 Quill 核心開始,然后根據(jù)需要自定義其模塊或?qū)⒆约旱臄U(kuò)展添加到這個富文本編輯器中。它提供了兩個用于更改編輯器外觀的主題,可以使用插件或覆蓋其 CSS 樣式表中的規(guī)則進(jìn)一步自定義。Quill 還支持任何自定義內(nèi)容和格式,因此可以添加嵌入式幻燈片、3D 模型等。

          該富文本編輯器的特點(diǎn)

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

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

          4. TinyMCE

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

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

          該富文本編輯器的特點(diǎn)

          • 實(shí)時協(xié)作支持;
          • 高級表格和復(fù)雜內(nèi)容支持;
          • 增強(qiáng)的媒體嵌入支持;
          • 自動連接檢查器;
          • 編輯器可以在三種模式下使用:經(jīng)典、內(nèi)聯(lián)、無干擾;
          • 提供云安全功能。

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

          5. wangEditor

          wangEditor 是一個使用Typescript 開發(fā)的 Web 富文本編輯器, 輕量、簡潔、易用、開源免費(fèi)。它兼容常見的 PC 瀏覽器:Chrome,F(xiàn)irefox,Safar,Edge,QQ 瀏覽器,IE11。

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

          6. ProseMirror

          ProseMirror 是一個基于 ContentEditable 的所見即所得 HTML 編輯器,功能強(qiáng)大,支持協(xié)作編輯和自定義文檔模式 ProseMirror 庫由多個單獨(dú)的模塊組成。一個理想的富文本編輯器產(chǎn)生結(jié)構(gòu)化的、語義化的、有意義的文檔的同時還要能夠讓用戶能夠容易地理解與使用。ProseMirror 試著在 Markdown 編輯體驗(yàn)和傳統(tǒng)的 WYSIWYG 編輯體驗(yàn)中尋找一種融合的方法。它通過實(shí)現(xiàn)一個比普通的 HTML 具有更多的限制和結(jié)構(gòu)化的 WYSIWYG 風(fēng)格的接口來做到這點(diǎn)。你可以自定義編輯器創(chuàng)建的文檔的結(jié)構(gòu)和內(nèi)容,使它們符合你應(yīng)用的需要。

          該富文本編輯器的特點(diǎn)

          • 實(shí)時協(xié)同編輯:ProseMirror 內(nèi)置了對實(shí)時協(xié)同編輯的堅(jiān)定支持,它允許多個人同時對一個文檔進(jìn)行編輯。
          • 可擴(kuò)展的文檔結(jié)構(gòu):文檔結(jié)構(gòu)(Document schemas)允許使用自定義的文檔結(jié)構(gòu)而無需從頭開始編寫自己的編輯器。
          • 模塊化:模塊機(jī)制確保你只載入自己需要的模塊,同時能夠按需替換已有的模塊。
          • 插件化:插件系統(tǒng)允許你容易地增加額外的功能,同時以一種簡單的方式打包你的插件。
          • 函數(shù)式:一個函數(shù)式和不可變數(shù)據(jù)結(jié)構(gòu)讓 ProseMirror 很容易的與現(xiàn)代 web app 集成,以實(shí)現(xiàn)復(fù)雜的編輯行為。
          • 定制化:核心庫小巧且通用,為構(gòu)建不同類型的編輯器提供基礎(chǔ)支持。

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

          7. Tiptap

          Tiptap 是一個基于 Vue 的無渲染的富文本編輯器,它基于 Prosemirror,完全可擴(kuò)展且無渲染。可以輕松地將自定義節(jié)點(diǎn)添加為Vue組件。使用無渲染組件(函數(shù)式組件),幾乎完全控制標(biāo)記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

          該富文本編輯器的特點(diǎn)

          • 支持 Vue,React,Svelte 等框架;
          • 使用 TypeScript 重構(gòu),支持類型系統(tǒng);
          • 代碼多包發(fā)布,每個模塊的功能更加獨(dú)立,開發(fā)者能更好的按需使用;
          • 提供了更多開箱即用的擴(kuò)展;
          • 完善了文檔細(xì)節(jié),有了文檔站點(diǎn);
          • 更高程度的支持了協(xié)同編輯。

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

          8. CKEditor 5

          CKEditor 是一個強(qiáng)大的富文本編輯器框架,具有模塊化架構(gòu)、現(xiàn)代集成和協(xié)作編輯等功能。它可以通過基于插件的架構(gòu)進(jìn)行擴(kuò)展,從而可以將必要的內(nèi)容處理功能引入。CKEditor 在市場上已有近 15 年的歷史,因其具有廣泛的功能和舊版軟件兼容性而成為最負(fù)盛名的編輯器之一。

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

          該富文本編輯器的特點(diǎn)

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

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

          9. ContentTools

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

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

          該富文本編輯器的特點(diǎn)

          • 只需幾個簡單的步驟,即可在任何 HTML 頁面上安裝編輯器;
          • 可以控制頁面的哪些區(qū)域是可編輯的;
          • 可以通過添加工具進(jìn)行擴(kuò)展。

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

          10. Jodit

          Jodit 是一款使用純 TypeScript 編寫的(無需使用其他庫),美觀實(shí)用的所見即所得開源富文本編輯器,支持中文,超強(qiáng)自定義。

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


          主站蜘蛛池模板: 曰韩人妻无码一区二区三区综合部| 亚洲av午夜福利精品一区| 国产一区二区视频免费| 欧洲亚洲综合一区二区三区| 精品无码中出一区二区| 一区三区三区不卡| 高清一区二区三区免费视频| 欲色aV无码一区二区人妻 | 无码精品人妻一区二区三区免费看 | 久久国产高清一区二区三区| 国产裸体歌舞一区二区| 在线观看亚洲一区二区| 国产精品乱码一区二区三| 老鸭窝毛片一区二区三区| 日韩AV无码一区二区三区不卡毛片| 亚洲AV午夜福利精品一区二区 | 中文字幕亚洲一区二区三区| 99精品国产高清一区二区| 精品日韩一区二区| 久久精品无码一区二区三区| 亚洲香蕉久久一区二区三区四区| 秋霞日韩一区二区三区在线观看| 成人乱码一区二区三区av| 波多野结衣久久一区二区| 亚洲国产成人久久一区WWW| 久久精品午夜一区二区福利| 波多野结衣中文字幕一区| 久久精品一区二区国产| 国产成人一区二区精品非洲| 无码人妻品一区二区三区精99| 在线免费视频一区二区| 午夜福利一区二区三区高清视频 | 色窝窝无码一区二区三区成人网站| 精品久久久久久无码中文字幕一区| 一区二区三区影院| 国产福利精品一区二区| 亚洲图片一区二区| 国产精品亚洲专区一区| 日韩人妻无码一区二区三区久久| 国产在线精品一区二区| 中文字幕AV一区二区三区|