vue+ckeditor5图片视频上传

1.安装

ckeditor5提供三种方法安装npm、CDN和下载ZIP文件到项目中，这里就使用了npm安装具体看官网文档ckeditor5官网。

安装命令

npm install @ckeditor/ckeditor5-build-decoupled-document --save

卸载命令

npm uninstall @ckeditor/ckeditor5-build-decoupled-document --save

2.引用

在相对应的组件引入

import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' （中文包）

html部分

        <div class="goods-editor">
          <!-- 工具栏容器 -->
          <div id="toolbar-container"></div>
          <!-- 编辑器容器 -->
          <div id="editor">
            <!-- <p>This is the initial editor content.</p> -->
          </div>
        </div>

js 部分

export default {
  data (){
    editor:null
  }
  mounted() {
    this.initCKEditor()
  },
  methods: {
    initCKEditor() {
        CKEditor.create(document.querySelector('#editor'), {
          ckfinder: {
            uploadUrl:''
          }
        }).then(editor => {
          const toolbarContainer = document.querySelector('#toolbar-container');
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor
        }).catch(error => {
          console.error(error);
        });
  }
}

编译器数据的更新

获取数据：this.editor.getData()

更新数据：this.editor.setData()

图片、视频上传

 initCKEditor() {
      class UploadAdapter {
        constructor(loader) {
          this.loader = loader
        }
        async upload() {  // 图片上传
          const data = new FormData();
          data.append('file', await this.loader.file);
          return new Promise((resolve, reject) => {
            upload(data).then(res => {
              resolve({
                default: res.repData
              })
            })
          })
        }
      }
      CKEditor.create(document.querySelector('#editor'), {
        language: 'zh-cn', // 中文包
        ckfinder: {
          'uploaded': 1, 'url': '/'
        },
        link: {
          addTargetToExternalLinks: true,
        }, // a标签跳转打开新窗口
        mediaEmbed: {   // 视频配置
          providers: [
            {
    					name: 'myprovider',
    					url: [
    						/^lizzy.*\.com.*\/media\/(\w+)/,
    						/^www\.lizzy.*/,
    						/(http|https):\/\/([\w.]+\/?)\S*/
    					],
    					html: match => {
    						//获取媒体url
                const input = match['input'];
    						return (
    							'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
    								`<iframe src="${input}" ` +
    									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
    									'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
    								'</iframe>' +
    							'</div>'
    						);
    					}
    				}
          ]
        }
      }).then(editor => {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
          return new UploadAdapter(loader);
        };
        const toolbarContainer = document.querySelector('#toolbar-container');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);        
        this.editor = editor
      })
    },

视频上传之后在页面引入视频页面不展示。因为有这段代码并且标签从来没见过。

<figure class="media">
    <oembed url=""></oembed>
</figure>

解决方法：官网解决方法尝试多次并没有解决对应的问题。后来想了下使用video替换oembed标签

let helpContent = res.repData.helpContent // 后台返回的富文本框数据
let helpContentVideo = helpContent.replace(/<oembed url/ig,"<video controls='controls' src").replace(/oembed>/ig, "video>")