ckedit5代码块插件安装,请跳转到 :
https://blog.csdn.net/weixin_42500714/article/details/104590215
环境要求: 安装nodejs
更改npm地址为国内地址,否则很容易安装失败
设置阿里源 : npm config set registry http://registry.npm.taobao.org
或者: npm install --registry=https://registry.npm.taobao.org
1. 下载源码到本地
git clone https://gitee.com/tbhflxhn/ckeditor5-build-classic.git
// 国内的gitee clone速度更快
// github地址
https://github.com/ckeditor/ckeditor5-build-classic.git2.切换到软件目录
cd ckeditor5-build-classic/3.安裝 package.json 内 devDependencies 指定插件
npm install4.安装 字体,对齐,高亮 插件
1. npm i @ckeditor/ckeditor5-font @ckeditor/ckeditor5-alignment @ckeditor/ckeditor5-highlight -D
2. vi src/ckeditor.js (以下内容如下图所示)
# 添加如下内容到对应位置
import Font from '@ckeditor/ckeditor5-font/src/font';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
Font,
Alignment,
Highlight,
'alignment',
'|',
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'highlight',
3. 编译
npm run build
5.调用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ckeditor</title>
</head>
<body>
<div id="editor">
<p>This is the editor content.</p>
</div>
</body>
<script src="ckeditor5-build-classic/build/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
})
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
</script>
</html>
3143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
