ckeditor5开发

最新推荐文章于 2025-05-01 02:20:37 发布
最新推荐文章于 2025-05-01 02:20:37 发布
阅读量1k 收藏 18
点赞数 18
分类专栏： js 文章标签： ckeditor 富文本编辑器 ckeditor5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36437991/article/details/145158206
版权

node v22.13.0
pnpm 9.5.0

快速入门

初始化

pnpm init

在这里插入图片描述

安装依赖包

pnpm add @ckeditor/ckeditor5-build-classic --registry http://registry.npm.taobao.org

pnpm add -D vite --registry http://registry.npm.taobao.org

编写代码

修改package.json

"type": "module",
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

新建vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
    server:{
        host: '127.0.0.1',
        port: 3000,
    }
})

src下新建index.js

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

ClassicEditor
    .create(document.querySelector('#editor'),{
        licenseKey:'GPL',
    })
    .then(editor => {
        window.editor = editor;
    })
    .catch(error => {
        console.error('There was a problem initializing the editor.', error);
    });

新建index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CKEditor5</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .editor-container {
            width: 100%;
            height: 100%;
        }
        #editor{
            width: 100%;
            height: 90%;
        }
    </style>
</head>
<body>
<div class="editor-container">
    <textarea id="editor"></textarea>
</div>
<script type="module" src="/src/index.js"></script>
</body>
</html>

运行

pnpm run dev

结果
在这里插入图片描述

自定义tabbar以及安装需要的组件

新建package.json

{
  "name": "study03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "44.1.0",
    "@ckeditor/ckeditor5-alignment": "^44.1.0",
    "@ckeditor/ckeditor5-autoformat": "44.1.0",
    "@ckeditor/ckeditor5-basic-styles": "44.1.0",
    "@ckeditor/ckeditor5-block-quote": "44.1.0",
    "@ckeditor/ckeditor5-ckbox": "44.1.0",
    "@ckeditor/ckeditor5-ckfinder": "44.1.0",
    "@ckeditor/ckeditor5-cloud-services": "44.1.0",
    "@ckeditor/ckeditor5-easy-image": "44.1.0",
    "@ckeditor/ckeditor5-editor-classic": "44.1.0",
    "@ckeditor/ckeditor5-essentials": "44.1.0",
    "@ckeditor/ckeditor5-heading": "44.1.0",
    "@ckeditor/ckeditor5-image": "44.1.0",
    "@ckeditor/ckeditor5-indent": "44.1.0",
    "@ckeditor/ckeditor5-link": "44.1.0",
    "@ckeditor/ckeditor5-list": "44.1.0",
    "@ckeditor/ckeditor5-media-embed": "44.1.0",
    "@ckeditor/ckeditor5-paragraph": "44.1.0",
    "@ckeditor/ckeditor5-paste-from-office": "44.1.0",
    "@ckeditor/ckeditor5-table": "44.1.0",
    "@ckeditor/ckeditor5-typing": "44.1.0"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-core": "44.1.0",
    "@ckeditor/ckeditor5-dev-translations": "^45.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^45.0.0",
    "@ckeditor/ckeditor5-theme-lark": "44.1.0",
    "css-loader": "5.2.7",
    "esbuild-loader": "4.2.2",
    "postcss-loader": "4.3.0",
    "raw-loader": "4.0.2",
    "style-loader": "3.1.0",
    "terser-webpack-plugin": "^5.0.0",
    "typescript": "5.0.4",
    "webpack": "^5.94.0",
    "webpack-cli": "^5.1.4"
  }
}


pnpm install --registry http://registry.npm.taobao.org
# pnpm add @ckeditor/ckeditor5-alignment --registry http://registry.npm.taobao.org

新建tsconfig.json

{
  "compilerOptions": {
    "types": [],
    "lib": [
      "ES2019", // Must match the "target"
      "ES2020.String",
      "DOM",
      "DOM.Iterable"
    ],
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "strict": true,
    "module": "es6",
    "target": "es2019",
    "sourceMap": true,
    "allowJs": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/*"
  ]
}

新建webpack.config.mjs

/**
 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

/* eslint-env node */

import path from 'path';
import module from 'module';
import { fileURLToPath } from 'url';
import webpack from 'webpack';
import { bundler, loaders } from '@ckeditor/ckeditor5-dev-utils';
import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
import TerserPlugin from 'terser-webpack-plugin';

const require = module.createRequire( import.meta.url );
const __filename = fileURLToPath( import.meta.url );
const __dirname = path.dirname( __filename );

export default {
	devtool: 'source-map',
	performance: { hints: false },

	entry: path.resolve( __dirname, 'src', 'index.ts' ),

	output: {
		// The name under which the editor will be exported.
		library: 'ClassicEditor',

		path: path.resolve( __dirname, 'build' ),
		filename: 'ckeditor.js',
		libraryTarget: 'umd',
		libraryExport: 'default'
	},

	optimization: {
		minimizer: [
			new TerserPlugin( {
				terserOptions: {
					output: {
						// Preserve CKEditor 5 license comments.
						comments: /^!/
					}
				},
				extractComments: false
			} )
		]
	},

	plugins: [
		new CKEditorTranslationsPlugin( {
			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
			language: 'en',
			additionalLanguages: 'all'
		} ),
		new webpack.BannerPlugin( {
			banner: bundler.getLicenseBanner(),
			raw: true
		} )
	],

	module: {
		rules: [
			loaders.getIconsLoader( { matchExtensionOnly: true } ),
			loaders.getStylesLoader( {
				themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
				minify: true
			} ),
			loaders.getTypeScriptLoader()
		]
	},

	resolve: {
		extensions: [ '.ts', '.js', '.json' ],
		extensionAlias: {
			'.js': [ '.js', '.ts' ]
		}
	}
};

src下新建index.ts

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

export default class ClassicEditor extends ClassicEditorBase {
    public static override builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation,
        Alignment
    ];

    public static override defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading','alignment',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        // This value must be kept in sync with the language defined in webpack.config.js.
        language: 'en'
    };
}

打包

pnpm build

测试

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CkEditor5</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body{
            width: 100%;
            height: 100%;
            background: rgba(247, 247, 247, 1);
        }
        .editor-container {
            width: 100%;
            height: 100%;
        }
        #editor{
            width: 100%;
            height: 100%;
        }
    </style>
    </style>
</head>
<body>
<div class="editor-container">
    <textarea  id="editor">
        <p>Hello World!</p>
    </textarea>
</div>
<script src="../build/ckeditor.js"></script>
<script src="../build/translations/zh-cn.js"></script>
<script>
    ClassicEditor.create(document.querySelector('#editor'),{
        licenseKey:'GPL',
        language:'zh-cn',
    })
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error('There was a problem initializing the editor.', error);
        });
</script>
</body>
</html>

在这里插入图片描述

参考

https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic
https://blog.youkuaiyun.com/zz00008888/article/details/125737119
https://www.cnblogs.com/wisewrong/p/14325817.html
https://www.cnblogs.com/wp-leonard/p/17903768.html

富文本编辑器CKEditor 5开发环境搭建
oscar999的专栏
02-24 1764
CKEditor 5常见的使用方式有两种 传统方式，直接引用编译后的ckeditor.js 文件。详细使用可以参考： CKEditor快速介绍与入门示例 包的导入方式： 基于Node.js 和npm 导入CKEditor 5依赖包。 除了包的使用方式之外，在导入ckeditor.js文件的时候， 虽然可以在ckeditor官方网页选择需要的功能进行编译和打包，但有时候如果需要自行客制一些按钮或功能，就需要基于ckeditor的源码开发和打包了。 开发和编译CKEditor 5需要的环境 CKEditor
ckeditor5编辑器
11-17
对官方代码进行了再次构建，该包包含字体设置，字体大小，代码块，字体高亮等等
强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者
gitblog_00027的博客
06-16 1371
???? 强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者 项目地址:https://gitcode.com/gh_mirrors/ck/ckeditor5-build-classic 在当今数字化时代，一款优秀的文本编辑器不仅可以提高工作效率，还能为用户提供更佳的创作环境。在此背景下，我们向大家隆重推荐 CKEditor 5 的经典编辑器构建（以下简称“CKEditor 5”）...
【Vue3&Ckeditor5】Ckeditor5使用
最新发布
此人太懒，没有任何简介
05-01 1201
使用 注意 LOGO 是为了隐藏logo
编译CKEditor5
07-30 766
6、如果出现build后Ckedit编译提示包重复，无法使用ckedit。打开文件packages\ckeditor5-build-classic\src\ckeditor.js，添加以下代码。2、切换到目录\ckeditor5\packages\ckeditor5-build-classic。4、修改代码以支持图片以Base64的方式本地上传[可选]...
CKEditor5 自定义构建富文本编辑器！
悠悠清闲人的技术博客
06-17 832
CKEditor5的编辑是一个非常好的编辑器，但其英文文档比较绕眼睛，所以特地记录一下，如何使用自定义构建。此次，使用的工具为vite+solid，ui不一样无所谓，构建方式都一样。
探索CKEditor 5经典编辑器构建：高效、灵活的富文本编辑解决方案
gitblog_00697的博客
10-10 1071
探索CKEditor 5经典编辑器构建：高效、灵活的富文本编辑解决方案 ckeditor5-build-classic The classic editor build of CKEditor 5. 项目地址: https://g...
CKEditor5开发环境-javascript
06-21
目录 快速入门 CKEditor 5 构建 CKEditor 5 框架 文档和常见问题 贡献和项目组织 想法和讨论 开发 报告问题和功能请求 发布包 核心库 构建功能 编辑器 主题许可证 快速入门 CKEditor 5 构建 CKEditor 5 构建是一组...
CKEditor5开发环境
08-10
CKEditor5的开发环境搭建是JavaScript开发者需要掌握的一项重要技能，特别是对于那些致力于创建交互式内容或需要在网页上提供高质量文本编辑体验的项目来说。 首先，让我们深入了解CKEditor5的核心特性。它提供了...
ckeditor5-dev:CKEditor 5开发工具包
05-14
CKEditor 5开发工具包 配套 该存储库是一个monorepo。 它包含多个npm软件包。 包裹 版本 依存关系 @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/jsdoc-plugins 克隆...
ckeditor5:CkEditor5自定义构建
03-26
CK编辑器5 包括用于设置外部方法以将内容插入编辑器的自定义插件： 插入连结 插入图片 插入片段 < textarea class =" editor " > </ textarea > < script src =" ../build/ckeditor.js " > </ script > < script > CkEditor . Editor . create ( document . querySelector ( '.editor' ) , { insertLinks : { handler : ( write ) => write ( { title : 'Custom Link' , url : '/my-url/' } ) } , insert
CKEditor5-Custom-Build
09-06
集成了以下模块： Essentials,UploadAdapter,Autoformat,Bold,Italic,BlockQuote,EasyImage,Heading,Image,ImageCaption,ImageStyle,ImageToolbar,ImageUpload,Link,List,Paragraph,Alignment,Font,Highlight,Table,Underline,Strikethrough,Code
ckeditor5
02-11
使用在线生成器生成的CKEditor 5编辑器 该存储库显示了由生成的CKEditor 5编辑器版本 快速开始 在浏览器中打开sample/index.html页面。 如果您选择了实时协作插件： 使用正确的令牌，websocket和上载URL端点填充对话框。 如果您还没有这些或不知道它们的含义，请。 复制并共享URL或粘贴到另一个选项卡中，以享受实时协作编辑功能。 如果您选择了非实时协作插件： 在许可证提示中填写许可证密钥。 如果您还没有许可证密钥，请。 配置构建 诸如更改工具栏项目，更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意：如果您对浏览器缓存有任何问题，请根据系统使用Ctrl + R或Cmd + R快捷方式。 但是，如果要删除插件或
ckeditor5:CKEditor 5自定义构建
03-25
CKEditor自定义版本 与运行 npm run-script build 样本（./sample/index.html）
CKEditor5 classic for .net core Demo
11-09
CKEditor 是富文本编辑器，也就是以前大名鼎鼎的 FCKEditor 。以前也出过几个版本，但现在到 5 之后变了许多， 网上的许多教程都没办法用了。于是写这篇博客。 https://blog.youkuaiyun.com/yenange/article/details/83894916
CKEditor5导入并解析word功能的集成，实现word转html
zhang_hai_cheng的博客
09-19 3974
这是一个高级功能，虽然不是很常用，但是有一些特殊的场景或者需求，我们可能希望从编辑好的word中，通过导入的方式来让用户在网页中继续编辑它，并尽可能的保留内容和格式。用CKEditor5的导入word功能，把这个word导入到编辑器中，解析完成之后就看到了效果，它的还原度很高了，里边包含了段落、列表、图片、表格等等多个技术点
富文本编辑器的使用1——CKEditor5编辑器
weixin_43259189的博客
11-24 1803
在项目中遇到要类似编辑Word表格内容样式的需求，运用了CKEditor5编辑器，可对编辑器里面内容进行编辑
CKEditor 5：必须拿下，GitHub上的一款强大的富文本编辑器框架，用它能解决你的所有富文本编辑需求，最主要是颜值还非常的不错
11-04 3084
CKEditor 5无疑是富文本编辑器领域的一个强大竞争者。它的模块化设计、丰富的功能和广泛的集成支持使其成为各种应用场景的理想选择。如果你正在寻找一个功能全面、易于定制的富文本编辑器，CKEditor 5绝对值得考虑。
CKEditor5开发环境深度配置指南
### CKEditor5开发环境 CKEditor5是目前市面上较为先进的基于Web的富文本编辑器之一，它的开发环境为开发者提供了一个高效、现代化且易于使用的环境，用于构建和定制富文本编辑功能。与旧版的CKEditor相比，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

假装我不帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值