Could you please provide working sample project

[focussing]

Hi,

Burning hours, can't get it to work I am using the vue webpack demo as well..

[dangvanthanh]

If you use vue-cli you can usage:

• $ vue init webpack example
• $ yarn add vue-ckeditor2 --dev
• Open index.html add script before <!-- built files will be auto injected --> such as below:

<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
<!-- built files will be auto injected -->

• In components/Hello.vue update code:

<template>
  <div class="app">
    <ckeditor v-model="content" :config="config"></ckeditor>
  </div>
</template>

<script>
import Ckeditor from 'vue-ckeditor2'

export default {
  name: 'hello',
  data () {
    return {
      content: 'Welcome to Ckeditor with Vue.js',
      config: {
        toolbar: [
          [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ]
        ],
        height: 300
      }
    }
  },
  components: { Ckeditor }
}
</script>

• Running application with $ yarn run dev

[dangvanthanh]

You can reference starting Ckeditor and Vue.js through Getting-Started

[focussing]

Thank you so much Dang!! This helps very much. I want to use this as a base which enables online editing of websites. After authentication several div's must be "inline" enabled.

Any suggestions for this?

[focussing]

1) I would read from SQlite database all content for all divs on the page. 2) Enable inline editing for authorized users 3) After editing save back to SQlite database and update site.

How could I implement 1) in your template?

[dangvanthanh]

If you want use inline with vue-ckeditor2, you add types attribute with value is inline

<ckeditor v-model="content" :config="config" types="inline"></ckeditor>

If you want use dynamic types attribute you can set it after authorized users

<ckeditor v-model="content" :config="config" :types="typeConfig"></ckeditor>

[focussing]

OK thanks, However I get an error message when using the folowing below:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getEditor' of undefined"

found in

---> at /Users/raymond/local/webpack-demo/node_modules/vue-ckeditor2/src/ckeditor.vue

at /Users/raymond/local/webpack-demo/src/components/Axios.vue at /Users/raymond/local/webpack-demo/src/App.vue

this is my application, every content part should be "inline editable" what am I doing wrong?

<template>
<div id="axios-test">
  <div v-if="posts && posts.length" class="fl w-100 w-100-ns pa2 ba">
    <div v-for="post of posts" v-html="post.content">
      <ckeditor v-model="post.content" types="inline"></ckeditor>
    </div>
  </div>
  <div v-else-if="errors && errors.length">
    <p v-for="error of errors">
      {{error.message}}
    </p>
  </div>
</div>
</template>

<style>
</style>

<script>
import axios from 'axios';
import Ckeditor from 'vue-ckeditor2'

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  components: {
    Ckeditor
  },

  // Fetches content from SQlite database when the component is created.
  created() {
    axios.get('http://dadidadida')
      .then(response => {
        // JSON responses are automatically parsed.
        this.posts = response.data
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

[focussing]

update:

<template>
<div id="axios-test">
    <div v-if="posts && posts.length" class="fl w-100 w-100-ns pa2 ba">
        <div v-for="(post, index) of posts" v-html="post.title">
            <ckeditor :id="index.toString()" :value="post.title" :key="index" types="inline"></ckeditor>
        </div>
    </div>
    <div v-else-if="errors && errors.length">
        <p v-for="error of errors">
            {{error.message}}
        </p>
    </div>
</div>
</template>

<style>
</style>

<script>
import axios from 'axios';
import Ckeditor from 'vue-ckeditor2'

export default {
    data: () => ({
        posts: [],
        errors: []
    }),

    components: {
        Ckeditor
    },

    // Fetches posts when the component is created.
    created() {
        axios.get('http://jsonplaceholder.typicode.com/posts')
            .then(response => {
                // JSON responses are automatically parsed.
                this.posts.push(response.data[0]);
            })
            .catch(e => {
                this.errors.push(e)
            })

        // http://www.xplorex.eu/db-sqlite.php/quark_table
        // async / await version (created() becomes async created())
        //
        // try {
        //   const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
        //   this.posts = response.data
        // } catch (e) {
        //   this.errors.push(e)
        // }
    }
}
</script>

gives the following error:

Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getEditor' of undefined"

found in

---> at /Users/raymond/local/webpack-demo/node_modules/vue-ckeditor2/src/ckeditor.vue

at /Users/raymond/local/webpack-demo/src/components/Axios.vue at /Users/raymond/local/webpack-demo/src/App.vue warn @ vue.esm.js?65d7:429 handleError @ vue.esm.js?65d7:512 callHook @ vue.esm.js?65d7:2528 insert @ vue.esm.js?65d7:3352 invokeInsertHook @ vue.esm.js?65d7:5164 patch @ vue.esm.js?65d7:5328 Vue._update @ vue.esm.js?65d7:2293 updateComponent @ vue.esm.js?65d7:2409 get @ vue.esm.js?65d7:2748 run @ vue.esm.js?65d7:2818 flushSchedulerQueue @ vue.esm.js?65d7:2585 (anonymous) @ vue.esm.js?65d7:648 nextTickHandler @ vue.esm.js?65d7:595 Promise resolved (async) (anonymous) @ vue.esm.js?65d7:607 (anonymous) @ vue.esm.js?65d7:666 (anonymous) @ VM66:9620 (anonymous) @ app.js:728 __webpack_require__ @ app.js:658 fn @ app.js:86 (anonymous) @ VM65:2 (anonymous) @ app.js:844 __webpack_require__ @ app.js:658 fn @ app.js:86 (anonymous) @ app.js:1211 __webpack_require__ @ app.js:658 (anonymous) @ app.js:707 (anonymous) @ app.js:710 vue.esm.js?65d7:516 TypeError: Cannot read property 'getEditor' of undefined at Object.CKEDITOR.inline (ckeditor.js:338) at VueComponent.mounted (eval at (app.js:990), :45:18) at callHook (eval at (app.js:728), :2527:21) at Object.insert (eval at (app.js:728), :3353:7) at invokeInsertHook (eval at (app.js:728), :5165:28) at VueComponent.patch [as __patch__] (eval at (app.js:728), :5329:5) at VueComponent.Vue._update (eval at (app.js:728), :2294:19) at VueComponent.updateComponent (eval at (app.js:728), :2410:10) at Watcher.get (eval at (app.js:728), :2749:25) at Watcher.run (eval at (app.js:728), :2819:22)

[dangvanthanh]

You can write such as. I changed from your code. I'm use v-for="(post, index) in posts" instead of v-for="(post, index) of posts". I hope it working as you want.

<template>
  <div class="app">
    <div v-if="posts.length" class="fl w-100 w-100-ns pa2 ba">
      <div v-for="(post, index) in posts">
          <h3>Ckeditor {{index + 1}}</h3>
          <ckeditor :value="post.title" types="inline"></ckeditor>
          <h3>Raw Html {{index + 1}}</h3>
          <div v-html="post.title"></div>
      </div>
    </div>
    <div v-if="errors.length">
        <p v-for="error in errors">
            {{error.message}}
        </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Ckeditor from 'vue-ckeditor2'

export default {
  name: 'hello',
  data () {
    return {
      posts: [],
      errors: []
    }
  },
  components: { Ckeditor },
  created () {
    axios.get('http://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.posts.push(response.data[0]);
          this.posts.push(response.data[1]);
        })
        .catch(e => {
          this.errors.push(e)
        })
  }
}
</script>

[focussing]

super dude! that is what I want, thank you so much the trick was to split the v-for and the