CKEDITOR 5,又來了!之前有一篇文章是介紹 ckeditor5教學-基本安裝-插件安裝教學
前言
有新的project要用上,需要少少特殊的插件,我又回來這邊看自己的舊文章想一步步去build自己的ckeditor,但發現有很多問題,因為當然編寫那篇文章ckeditor5 是v23 現在已到了v35了,官方的安裝指南也有更簡潔的版本
後來也看到ckeditor5 已經有了online builder,與以前ck4的玩法是一樣,對editor要求不高的朋友可去試試: CKEditor 5 Online Builder
而這邊文章當然就是教你自己一步步build 你的ckeditor出來
下面以最常用的Classic editor來做例子
注:npm 是需要用到的
1. 基本安裝
建立你的ckeditor目錄,比如名為ck5
請用 terminal進入
cd ck5
安裝基本依賴
npm install --save \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
建立一個文件名為webpack.config.js
'use strict';
const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
// https://webpack.js.org/configuration/entry-context/
entry: './app.js',
// https://webpack.js.org/configuration/output/
output: {
library: 'ClassicEditor',
libraryExport: 'default',
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
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: 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 }
};
安裝核心文件及demo用到的功能
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
建立一個名為 app.js
文件
import ClassicEditorBase 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';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
Essentials, Paragraph, Bold, Italic
]
ClassicEditor.defaultConfig = {
toolbar: {
items: [ 'bold', 'italic']
},
language: 'zh'
};
編輯 package.json
文件
在最後面的 }
前加入
,
"scripts": {
"build": "webpack --mode development"
}
此時你的文件應該大約是
{
"dependencies": {
"@ckeditor/ckeditor5-basic-styles": "^35.0.1",
"@ckeditor/ckeditor5-dev-utils": "^30.4.0",
"@ckeditor/ckeditor5-editor-classic": "^35.0.1",
"@ckeditor/ckeditor5-essentials": "^35.0.1",
"@ckeditor/ckeditor5-image": "^35.0.1",
"@ckeditor/ckeditor5-paragraph": "^35.0.1",
"@ckeditor/ckeditor5-theme-lark": "^35.0.1",
"css-loader": "^5.2.7",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"scripts": {
"build": "webpack --mode development"
}
}
執行
npm run build
如果你有yarn 也可用 yarn build
你的ckeditor已建立了去 dist/bundle.js
2. 測試
建立一個 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 Quick start guide</title>
</head>
<body>
<div id="editor">
<p>The editor content goes here.</p>
</div>
<script src="dist/bundle.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ))
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
</script>
</body>
</html>
直接使用瀏覽器打開這個文件即可,因為只是一個單純HTML再入了你的ckeditor文件
安裝插件/功能
ckeditor5 的所有功能都變成插件化(模組化?)
我們嘗試加入最基本的「Text alignment 」功能,即文字對齊功能
npm install --save @ckeditor/ckeditor5-alignment
回到app.js
加入
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
plugins: [ Alignment, ... ], //加入Alignment
toolbar: [ 'alignment', ... ] //加入 alignment
此時你的app.js應該是這樣的
import ClassicEditorBase 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';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
ClassicEditor.builtinPlugins = [
Essentials, Paragraph, Bold, Italic,Alignment
]
ClassicEditor.defaultConfig = {
toolbar: {
items: [ 'bold', 'italic','alignment']
},
language: 'zh'
};
再執行一次 npm run build
打開你的html文件瀏覽你會看到
後記
如果你按照官方的安裝指引,將會更簡短,因為官方是教你在app.js
中執行ClassicEditor.create
,這樣當然對一般人沒有問題,但如果你在較複雜的情況下,還想要重新設定一些比如遠程上傳等等的網址,或者每一頁都在指定數值要放在editor的話,則我這個個方法才能解決,不單單是ClassicEditor.create搬到html,因為要在html中運作,還去修改了webpack.config.js
可謂一波三.....四五六七折了....
解決這個問題太心累了,我無力向大家說明我上面做的跟官方有什麼不同,有興趣的大家可自己看看官方的跟我的差別
alignment ref: https://ckeditor.com/docs/ckeditor5/latest/features/text-alignment.html#installation
近期留言