富文本编辑器CKEditor 5开发环境搭建

CKEditor 5常见的使用方式有两种

传统方式，直接引用编译后的ckeditor.js 文件。详细使用可以参考：
CKEditor快速介绍与入门示例
包的导入方式：基于Node.js 和npm 导入CKEditor 5依赖包。

除了包的使用方式之外，在导入ckeditor.js文件的时候，虽然可以在ckeditor官方网页选择需要的功能进行编译和打包，但有时候如果需要自行客制一些按钮或功能，就需要基于ckeditor的源码开发和打包了。

开发和编译CKEditor 5需要的环境

CKEditor 基于Node.js和npm开发，使用webpack打包，所以需要的环境包括：

Node.js 和 npm
Node.js 版本12.0.0+
npm 5.7.1+
webpack
CKEditor 的源码包

CKEditor 5 开发环境搭建与测试步骤

这里基于Windows 10系统开发。具体步骤包括：

安装Node.js 与npm
关于Node.js安装，参考：
Node.js介绍及安装
初始项目
此处创建ckeditor目录作为项目目录，在该目录下创建src子目录和webpack.config.js 文件。
webpack.config.js 的内容如下：

// webpack.config.js'use strict';const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );module.exports = {entry: './src/app.js',output: {path: path.resolve( __dirname, 'dist' ),filename: 'bundle.js'},module: {rules: [{test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,use: [ 'raw-loader' ]},{test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,use: [{loader: 'style-loader',options: {injectType: 'singletonStyleTag',attributes: {'data-cke': true}}},{loader: 'postcss-loader',options: styles.getPostCssConfig( {themeImporter: {themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )},minify: true} )}]}]},// Useful for debugging.devtool: 'source-map',// By default webpack logs warnings if the bundle is bigger than 200kb.performance: { hints: false }
};

安装构建CKEditor需要的包，包括webpack等
命令行切换到上面创建的ckeditor目录，执行如下命令：

npm install --save postcss-loader@3 raw-loader@3 style-loader@1  webpack@4 webpack-cli@3

安装CKEditor 5框架（经典编辑器）需要的包
命令行切换到上面创建的ckeditor目录，执行如下命令：

npm install --save @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph  @ckeditor/ckeditor5-basic-styles  @ckeditor/ckeditor5-theme-lark

以上安装的工具和依赖包会放入项目目录的node_modules(该目录是自动创建，位于项目路径下，也可以全局安装)。

创建项目入口文件src/app.js，该文件的文件名和地址是在上面webpack.config.js配置的，内容如下：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';ClassicEditor.create( document.querySelector( '#editor' ), {plugins: [ Essentials, Paragraph, Bold, Italic ],toolbar: [ 'bold', 'italic' ]} ).then( editor => {console.log( 'Editor was initialized', editor );} ).catch( error => {console.error( error.stack );} );

编译打包
这里打包开发模式的文件（开发环境打包后的js 不会压缩，方便调试，正式环境模式会打包成最小化的文件），打包命令如下：

node_modules\.bin\webpack --mode development

以上命令执行完成，会产生 dist 目录以及bundle.js文件，该文件即打包后的js文件。

测试
在项目目录下创建index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>CKEditor 5 Framework – Quick start</title></head><body><div id="editor"><p>Editor content goes here.</p></div><script src="dist/bundle.js"></script></body>
</html>

在浏览器中查看该文件的效果如下：

项目的完整目录结构如下：

本篇完整源码地址

https://github.com/osxm/demoworkspace/tree/master/nodejs/ckeditor

富文本编辑器CKEditor 5开发环境搭建相关推荐

富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
富文本编辑器CKeditor文件上传下载SmartUpload插件
目录富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
富文本编辑器CKEditor配置及使用 - 转载篇
文章目录配置教程配置教程原文地址:富文本编辑器CKEditor配置及使用
富文本编辑器CKEditor 5的使用
富文本编辑器CKEditor 5的使用记录了使用CKEditor的过程, 特殊强调,这里使用的是CKEditor5 向网页中添加CKEditor 只是向页面中添加该编辑器不需要什么特殊的操作,遵从以 ...
富文本编辑器 CKeditor 配置使用（带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
富文本编辑器CKeditor的配置和图片上传，看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器:自定义粘贴,去除复制word或网页html冗余样式代码的解决方案 1.环境说明 2.解决方案 3.完整代码总结在使用wangEditor富文本编辑器时,当从wor ...
富文本编辑器CKeditor的基本使用
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用?大象装冰箱总共分三步 1.官网下载https://ckedito ...
富文本编辑器ckeditor的使用
Ckeditor下载地址:http://ckeditor.com/download 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <sc ...

富文本编辑器CKEditor 5开发环境搭建

开发和编译CKEditor 5需要的环境

CKEditor 5 开发环境搭建与测试步骤

本篇完整源码地址

富文本编辑器CKEditor 5开发环境搭建相关推荐

最新文章

热门文章