官方文檔
語言配置
代碼如下
ClassicEditor .create( document.querySelector( '#editor' ), {
language: 'de' // 配置語言 , 還需要去引用語言文件 , 在`@ckeditor/ckeditor5-build-decoupled-document/build/translations`下加載對應的文件即可
} ) .then( editor=> {
console.log( editor );
} ) .catch( error=> {
console.error( error );
} );
然后可以在console中使用window.CKEDITOR_TRANSLATIONS查看當前使用的語言 , 遵循ISO 639-1
圖片Upload
下面講解的是如果不需要單獨使用圖片上傳服務器該如何把圖片和文本一起上傳到數據庫
- 第一點 , 需要在實例化之后使用plugins下面的get方法拿到上傳圖片鈎子,具體使用如下
editor.plugins.get('FileRepository' ).createUploadAdapter =function( loader ) {
setTimeout(() => {
var result = loader._reader._reader.result;
result !=='' ? vm.html_image.push(result) :null
}, 1000);
return new UploadAdapter(loader);
};
vm.html_image就是保存當前內容中圖片base64
UploadAdapter文件就是防止報錯,阻攔文件上傳的方法,內容如下
class UploadAdapter {
constructor( loader ) {
// Save Loader instance to update upload progress.
this.loader = loader;
}
upload() {
return new Promise((resole, reject) => {
});
}
}
export default UploadAdapter;
最后在保存文件方法之后拿到文檔內容html,使用indexOf將base64寫入傳給后台,具體代碼如下
String.prototype.splice =function(start, newStr) {
return this.slice(0, start) + newStr +this.slice(start);
};
var data =this.editor.getData();
var current =0, index =0, temp = [data];
this.html_image.forEach((item, i) => {
current = index = data.indexOf('<img>', current) +4;
temp[i +1] = temp[i].splice(index, ` src="${this.html_image[i]}"`);
});
this.$emit('data', temp [temp.length -1]);