LaravelLaravel & VueJsVueJs

Playing around with a custom Vue CKEditor component



CKEditor v4 & Vue.js v2

Playing around with a custom Vue CKEditor component.

The battle-tested WYSIWYG HTML editor, when you need even more features and legacy compatibility.

Install

yarn add vueckeditor

Usage

VueCkeditor is using ckeditor external.

To start using CKEditor on your website, add a single tag to your HTML page:


Or visit the official CKEditor Download site. And click the Download CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Package instead.

Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.

http://vuejsexamples.com/path/to/ckeditor.js

Import VueCkeditor to your page

Single ckeditor

<template lang="pug">
  #app
    vue-ckeditor(v-model="content")
</template>


  import VueCkeditor from 'vueckeditor';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        content: 'Hello World!',
      };
    }
  }

Multi ckeditor

<template lang="pug">
  #app
    vue-ckeditor(v-model="contentA" id="editor-a")
    vue-ckeditor(v-model="contentB" id="editor-b")
</template>


  import VueCkeditor from '../src/vueckeditor.vue';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        contentA: 'Hello World!',
        contentB: 'Hello World!',
      };
    }
  }

Props

id

  • Type: String
  • Required: false
  • Default: null

height

  • Type: String
  • Required: false
  • Default: 300px

toolbar

You can find toolbar list of Toolbar Configurator.

  • Type: Array
  • Required: false
  • Default:
[
  'Format',
  ['Bold', 'Italic', 'Strike', 'Underline'],
  ['BulletedList', 'NumberedList', 'Blockquote'],
  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  ['Link', 'Unlink'],
  ['FontSize', 'TextColor'],
  ['Image'],
  ['Undo', 'Redo'],
  ['Source', 'Maximize']
]

language

  • Type: String
  • Required: false
  • Default: 'zh-cn'
  • Type: String
  • Required: false
  • Default: ''

TIP!!

Update components value with id:
https://jsfiddle.net/zhuowenli/okx75cem/

★ READ ALSO ★  Setting up Laravel Horizon with Forge and Envoyer

Folder structure

  • src/: Source files for this component
    • vueckeditor.vue The component itself
  • example/: Example for demonstrating this component
    • index.js: Entry for the example
    • App.vue: The root component which we use to load this component
  • vbuild.example.js: Config file for your example
  • vbuild.component.js: Config file for your component
  • vbuild.unit.js: Config file for vbuild to run unit tests
  • package.json: App manifest
  • .editorconfig: Ensure consistent editor behaivor
  • .gitignore: Ignore files we don’t need to push

GitHub




Source link

1 thought on “Playing around with a custom Vue CKEditor component”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close