在VUE中,關於CKEditor使用

官方文檔

語言配置

代碼以下

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]);