To cut to the quick, rich text editors are a big hole. Next record Vue2 how to integrate CKEditor5, we have a better way to welcome to exchange

I. Installation environment

  1. Vue 2.6.11
  2. Vue/CLI 3.6.0(3.x or later is required to use source code integration scaffolding)

Ii. Quick installation using the integration solution of the official website (Classic as an example)

  1. Fast installation

Vue2. X Quick Start

npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-adapter-ckfinder
Copy the code
  1. The introduction of the project

The official website recommendation is introduced globally, but it is more recommended by individualsLocal introductionAfter all, rich text editors are only used on one or two pages

  1. Create ykeditor. Vue in the Components directory
<template>
  <div id="ykEditor">
    <ckeditor id="ckeditor" 
    :editor="editor" 
    v-model="editorData" 
    :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue2'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'

export default {
  name: 'ClassicEditor'.components: {
    // Local registration
    ckeditor: CKEditor.component
  },

  props: {
    content: {
      type: String.default: ' '
    },
    placeholder: {
      type: String.default: 'Please enter content'}},data() {
    return {
      // Use the <ckeditor> component in this view.
      editor: ClassicEditor,
      editorData: this.content,
      editorConfig: {
        placeholder: this.placeholder,
        language: 'zh-cn'.// I have not used this method before, so pay attention to the returned format when uploading using ckFinder
        {" matches ":1,"url":"/"}
        / / or {" uploaded ": true," url ":"/"}
        ckfinder: {
          uploadUrl: '/'.options: {
                resourceType: 'Images'},},}},methods: {

    getContent(){
      return this.editorData
    },

    setContent(val){
      this.editorData = val
    },
  },

}
</script>

<style>
.ck-editor__editable {
  min-height: 400px;
}
</style>


Copy the code
  1. use
<template>
  <div id="app">
    <yk-editor ref="editorRef"></yk-editor>
    <button @click="setContent">Set the content</button>
    <button @click="getContent">Access to content</button>
  </div>
</template>

<script>
  import ykEditor from "@/components/ykeditor";

  export default {
    name: 'ClassicEditor'.components: {
      ykEditor
    },

    data() {
      return{}},methods: {
      setContent(){
        this.$refs.editorRef.setContent("< h1 > this is ykEditor < / h1 >")},getContent(){
        console.log(this.$refs.editorRef.getContent())
      }
    }

  }

</script>
Copy the code

rendering

You’ve got almost everything you need

3. Custom Installation (relative)

The customization here is just to control some of the functions that are in the classic integration scheme and print it out. It’s about CKFinderUploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKFinder, EasyImage, Heading, ImageCaption ImageStyle ImageToolbar ImageUpload Indent Link List PasteFromOffice Table TableToolbarTextTransformation this some

  1. Add a static directory and create uploadimageAdapter.js
export default class uploadImageAdapter {
    constructor(loader) {
        this.loader = loader
    }

    async upload() {
        // Obtain the file uploaded by the user
        const image = await this.loader.file;
        const formData = new FormData();

        formData.append('file', image)
        /*** * axios implements upload logic ** /

        // Format the result and pass the URL to the following JSON
        let resultJson = {"uploaded":1."url":"/"}

        return resultJson
    }
    
    abort(){}}Copy the code
  1. Create a custom (relative) classicEditor
<template>
  <div>
    <! -- Toolbar container -->
    <div id="toolbar-container"></div>
    <! Editor container -->
    <div id="ykEditor"></div>
  </div>
</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import uploadImageAdapter from "@/static/uploadImageAdapter";

export default {
  name: 'ClassicEditor'.props: {
    content: {
      type: String.default: ' '}},data() {
    return {
      editor: null,}},mounted() {
    this.initEditor()
  },

  methods: {
    initEditor() {
      ClassicEditor.create(document.querySelector('#ykEditor'), {
        language: 'zh-cn'.toolbar: [
          'heading'.'|'.'bold'.'italic'.'Link'.'bulletedList'.'numberedList'.'|'.'imageUpload'.'blockQuote'.'|'.'undo'./ / cancel
          'redo'./ / redo
        ],
      }).then(editor= > {
        const toolbarContainer = document.querySelector('#toolbar-container');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        // Initialize the editor formally
        this.editor = editor

        // Use the image upload adapter
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) = > {
          return new uploadImageAdapter(loader)
        };

        // Listen for data changes
        editor.model.document.on('change:data'.() = > {
          this.content = editor.getData();
        });

      }).catch(e= > {
        console.log(e)
      });
    },

    getContent() {
      return this.content
    },

    setContent(val) {
      this.editor.setData(val)
    },
  }

}
</script>

<style>
.ck-editor__editable {
  min-height: 400px;
}
</style>

Copy the code

  1. The toolbar allows you to select the functionality from the Classic integration solution, which is the one at the beginning of point 3, except that this installation method would have a reference to such a thing, but it doesn’t necessarily have one, so look at the console message after adding it and install one by one if it doesn’t

  2. There is also a pit problem, if you use such an integration scheme, even if the custom is only defined in the integration scheme of the existing functions, if the inheritance scheme does not have functions, such as ImageReset… There seems to be no way to add more.