Vue+ckeditor5 picture and video upload

1. Install

ckeditor5 provides three methods to install npm, CDN and download ZIP files to the project. Here, npm installation is used. For details, please refer to the official website document ckeditor5 official website .

install command

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

uninstall command

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

2. Quote

Introduce in the corresponding component

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

html part

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

js part

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

Update of Compiler Data

Get data: this.editor.getData()

Update data: this.editor.setData()

Upload pictures and videos

 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
      })
    },

After the video is uploaded, it is not displayed on the page where the video is introduced. Because there is this code and the label is never seen.

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

Solution: The official website solution tried many times and did not solve the corresponding problem. Later, I thought about using video to replace the oembed tag

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