Implemented Editor Component

package.json

@@ -29,6 +29,7 @@
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.5.17",
     "primeicons": "1.0.0",
-    "primeflex": "1.0.0-rc.1"
+    "primeflex": "1.0.0-rc.1",
+    "quill": "1.3.3"
   }
 }

src/AppMenu.vue

@@ -10,6 +10,7 @@
                 <div>
                     <router-link to="/checkbox">&#9679; Checkbox</router-link>
                     <router-link to="/chips">&#9679; Chips</router-link>
+                    <router-link to="/editor">&#9679; Editor</router-link>
                     <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>

src/main.js

@@ -7,6 +7,7 @@ import Button from './components/button/Button';
 import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
+import Editor from './components/editor/Editor';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
@@ -36,6 +37,7 @@ Vue.component('p-button', Button);
 Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
 Vue.component('p-chips', Chips);
+Vue.component('p-editor', Editor);
 Vue.component('p-inputSwitch', InputSwitch);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);

src/router.js

@@ -36,6 +36,11 @@ export default new Router({
         name: 'chips',
         component: () => import('./views/chips/ChipsDemo.vue')
     },
+    {
+        path: '/editor',
+        name: 'editor',
+        component: () => import('./views/editor/EditorDemo.vue')
+    },
     {
         path: '/fieldset',
         name: 'fieldset',

src/views/editor/EditorDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Editor</h1>
+                <p>Editor is rich text editor component based on Quill.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Default</h3>
+            <p-editor v-model="value1" editorStyle="height: 320px"/>
+
+            <h3>Customized</h3>
+            <p-editor v-model="value2" editorStyle="height: 320px">
+                <template slot="toolbar">
+                    <span class="ql-formats">
+                        <button class="ql-bold"></button>
+                        <button class="ql-italic"></button>
+                        <button class="ql-underline"></button>
+                    </span>
+                </template>
+            </p-editor>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
+            value2: ''
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>