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

您的项目需求