ckeditor实现自定义上传视频和图片

记录

官网下载文件夹之后放在publick下，引入在index.html中

修改内容：（为了展示上传图片的按钮）

config.js

CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
[‘Save’,‘Preview’,‘-’],
[‘Cut’,‘Copy’,‘Paste’,‘-’, ‘SpellChecker’, ‘Scayt’],
[‘Undo’,‘Redo’,‘-’,‘Find’,‘Replace’,‘-’,‘SelectAll’,‘RemoveFormat’],
[‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’],
‘/’,
[‘Bold’,‘Italic’,‘Underline’,‘Strike’,‘-’,‘Subscript’,‘Superscript’],
[‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’,‘Blockquote’],
[‘JustifyLeft’,‘JustifyCenter’,‘JustifyRight’,‘JustifyBlock’],
[‘Link’,‘Unlink’,‘Anchor’],
[‘Image’,‘Html5video’,‘Flash’,‘Table’,‘HorizontalRule’,‘SpecialChar’],
‘/’,
[‘Styles’,‘Format’,‘Font’,‘FontSize’],
[‘TextColor’,‘BGColor’]
],
config.image_previewText=’ '; //预览区域显示内容
config.filebrowserImageUploadUrl= “/api/file/upload”; //图片上传接口地址
config.filebrowserUploadUrl = “/api/file/upload” //文件上传接口地址
config.fileTools_requestHeaders = {
‘X-Requested-With’: ‘XMLHttpRequest’,
‘Custom-Header’: ‘header value’
};
config.extraPlugins = ‘html5video’;
config.isFileUploadSupported = true
config.font_names = ‘宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;’ + config.font_names;
};

富文本组件

<template>
  <div>
    <textarea :id="id" name="content"></textarea>
  </div>
</template>
<script>
import StorageHandler from '@/utils/StorageHandler'
export default {
 name:"ckeditor",
  props: ["content","isEdit"],//从父组件转递的内容
  mounted: function() {
    const self = this;
    // 渲染编辑器
    self.ckeditor = window.CKEDITOR.replace('content',
    {
      height:'280px'
    }
    );//定义编辑器的高度
    self.ckeditor.on('fileUploadRequest', evt => {
      console.log('-----------',evt)
      const { fileLoader } = evt.data;
      const { xhr } = fileLoader;
      const formData = new FormData();
      formData.append('file', fileLoader.file, fileLoader.fileName);
      xhr.open('POST', fileLoader.uploadUrl, true);
      xhr.setRequestHeader('Authorization', this.storageHandler.getStorage("token").token);
      xhr.send(formData);
      evt.stop();
		})
    self.ckeditor.on('fileUploadResponse', evt => {
			evt.stop();
			const data = evt.data
			const fileLoader = data.fileLoader
			const res = JSON.parse(fileLoader.xhr.responseText)
			if (res.code !== 200) {
				data.message = '上传失败'
				evt.cancel();
				return
			}
			data.fileName = fileLoader.fileName
			data.url = res.data.fileUrl
			data.message = '上传成功'
		})

    // 设置初始内容
    self.ckeditor.setData(self.content);
 
    // 监听内容变更事件
    self.ckeditor.on("change", function() {
      self.$emit("sendContnet", self.ckeditor.getData());
    });
    if(this.isEdit != 'new' && this.isEdit != 'edit'){
      self.ckeditor.on('instanceReady', function (ev) {
        this.isloadingFlag = true;
        var ed = ev.editor;
        ed.setReadOnly(true);
      });
    }
    
  },
  methods:{
    setDataFn(){
      setTimeout(()=>{
        this.ckeditor.setData(this.content);
      },800)
    }
  },
  data: function() {
    return {
      id: parseInt(Math.random() * 10000).toString(),
      ckeditor: null,
      isloadingFlag:false,
      storageHandler:new StorageHandler()
    };
  },
  watch: {
    // 监听prop的变化，更新ckeditor中的值
    content: function() {
      if (this.content !== this.ckeditor.getData()) {
        // this.ckeditor.setData(this.content);
        this.setDataFn()
      }
    }
  }
};
</script>
<style scoped>
</style>