Ckeditor-vue uses subtotals

The preface

The previous project used a direct download to import ckeditor4 to complete the use of the Vue project. The latest to start doing new projects found that Ckeditor has officially offered its own vue package, so update a wave

The introduction of

This convenience has been written very clearly on the official website without further elaboration. You can invite: ckeditor.com/docs/ckedit… I’m using main.js to register components directly, the way specific pages are used. The code is as follows:

<ckeditor v-model="editorData" :config="editorConfig" />
Copy the code

js:

data() {
    retturn {
        editorData: '',
        editorConfig: {},
    }
}
Copy the code

Standard Package is officially used by default. So a rich text toilet would do the following:Specific introduction can be taken from the official:Ckeditor.com/docs/ckedit…

To upload pictures

editorConfigconfiguration

  • ExtraPlugins: ‘uploadimage’,

  • Define the upload path filebrowserImageUploadUrl: XXX + ‘upload’, (the specific writing your project path)

    After using this method to write to the upload method, an error will be reported because some fields need to be modified with the help of the backend. After the event {” event “:1, “URL “:” event “:0,”error”:{“message”:” event “}} Ckeditor is configured at the end. So you need to borrow other configuration to complete the upload function. If you can adjust it, try this article: topurl.cn/5Tn

  • Use the ready method to get the

    instance to add the fileUploadRequest and fileUploadResponse methods to customize the upload request and return processing methods

    • Access to thereadyThrowing method
    • onEditorReady 中 const editor = this.$refs.ckeditor.instanceGet the Ckeditor instance
    • editorregisteredfileUploadRequestwithfileUploadResponse

    The code is as follows:

    <ckeditor ref="ckeditor" @ready="onEditorReady"/>
Copy the code

    js:

    onEditorReady() { const editor = this.$refs.ckeditor.instance editor.on('fileUploadRequest', function(evt) { const formData = new FormData() const fileLoader = evt.data.fileLoader const { xhr, uploadUrl, file, Open ('post', uploadUrl) xhr.setrequestheader ('token', getToken()) formData.append('file', file, fileName) xhr.send(formData) evt.stop() }) editor.on('fileUploadResponse', Parse (xhr.responseText) function(evt) {evt.stop() const XHR = evt.data.fileloader. XHR const res = json.parse (xhr.responseText (res.ret ! == 0) { evt.data.message = res.message evt.cancel() } else { evt.data.url = res.data.url } }) },Copy the code

    The monitoring method of reference www.jianshu.com/p/51b60d789… Ckeditor group price method can be viewed at ckeditor.com/docs/ckedit…

Add additional features

Problems with Standard Package

Because the official default is Standard Package, some basic rich text functions cannot be configured, such as: font size, font color… Therefore, Full Package is needed to expand functions

  • Use editor-url to introduce Full Package HTML:

     <ckeditor :editor-url="editorUrl" />
Copy the code

    js:

    EditorUrl: 'https://cdn.ckeditor.com/4.16.0/full/ckeditor.js',Copy the code

    The effect is as follows:

    Editor-url documents: ckeditor.com/docs/ckedit… Comparison of different packages: ckeditor.com/cke4/preset… CDN addresses for different packets: cdn.ckeditor.com/

  • Toolbar Settings here I did this by downloading the full package and then fetching the configuration items through the page Settings

    • First download the Full Package Package
    • Unzip package/samples/index.htmlComplete the configuration according to the following screenshot

If there is any error, please correct ~