脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

在VUE中,关于CKEditor使用

全部内容,希望文章能够帮你解决

在VUE中,关于CKEditor使用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过