先贴个官网,防止迷路
官方怕一形式单调,又给了几种(classic、balloon、balloon block、lnline、document)
再来个效果
首先我们先介绍基本模式(classic)
我们先引入CKEditor5
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
接着创建dom
<div id="editor"></div>
然后初始化
<script>
ClassicEditor.create(document.querySelector('#editor'))
.then((editor)=>{
console.error(editor);
})
.catch(error => {
console.error(error);
}); </script>
保存代码 刷新代码,奇迹出现了👏👏👏👏
输入一下文本,完全ok,我们再来搞个图片进去,图片也可以成功的添加进入(注意:这里图片上传需要配置,后面会讲到,这里可以找一个在线图片然后复制进去),效果如下:
what?😰🤥😲😯😯😧🤭我的图片去哪了。后来找了好久也没找到为什么,不过发现他可以定制😀😀😀
定制链接:ckeditor.com/ckeditor-5/…
既然如此,我们先来看看定制的吧
选择一种模式,然后下一步,我这里选择的是Classic,原谅我电脑太小截不全吧
下一步之后,我们会看到让我们选择想要的功能,我这里是把关于图片的都选择上了,选择好之后我们就可以下一步
进入下一步后我们看到了编辑器的模样👏,然后我们添加删除一些功能,接着下一步,选择一下语言(选择中文哦),再下一步,然后start吧
等待它完成
激动人心的时刻来了,完成之后点击Download your custom CKEditor 5 build下载吧
打开我们刚刚下载的文件,把build里面的ckeditor.js 复制到我们demo里面,然后在html中引入,这个还没有完哦,还需要改一下代码,加入toobar,定义一下我们需要的功能,然后就可以刷新了
ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: {
items: ['heading','|','bold','link','bulletedList','numberedList', '|','imageUpload','|','fontSize','fontColor','fontBackgroundColor','fontFamily','undo','redo']
}, l
anguage: 'zh',
image: {
toolbar: [ 'imageTextAlternative','imageStyle:full','imageStyle:side']
},
licenseKey: '',
})
.then((editor)=>{
console.error(editor);
})
.catch(error => {
console.error(error);
});
哎呀,没问题👏👏
搞一个图片进去试试,ok,可以缩放,不过要注意他这个缩放是按百分比的,这个不是很友好
接下来,我们说说图片上传
看了官网的上传,搞了半天不对,还是自定义上传适配器吧ckeditor.com/docs/ckedit…
啥也不说,上代码
// 上传适配器,格式官网上有,以一种Promise 的方式。Promise好像是有阻塞的意思在里面。
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
this.loader.file.then((res) => {
data.append('file', res);
data.append('token', '122');
$.ajax({
url: '/upload',
type: 'POST',
data: data,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data) {
resolve({
default:data.url
});
} else {
reject(data.msg);
}
}
})
});
});
}
abort() {
}
}
// 然后,我们在初始化then里面写 加载了适配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
console.log(loader, './/loader/')
return new UploadAdapter(loader);
};
运行,上传成功了
总结
这里主要就介绍classic,其他模式的都是同理。
如果有不足或者不对的地方,欢迎留言补充👻