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>