ckeditor / ckeditor5-vue

Official CKEditor 5 Vue.js component.

CKEditor 5 rich text editor component for Vue.js 3+

⚠️ This repository contains the CKEditor 5 component for Vue.js 3+. The component for lower Vue.js versions is located in another repository - @ckeditor/ckeditor5-vue2.

Official CKEditor 5 rich text editor component for Vue.js.

Developer Documentation 📖

See the "Rich text editor component for Vue.js" guide in the CKEditor 5 documentation to learn more:

• Quick start
• Using component locally
• Using CKEditor from source
• Using the Document editor build
• Component directives
• Component events

Contributing

After cloning this repository, install necessary dependencies:

yarn install

Executing tests

yarn run test -- [additional options]
# or
yarn t -- [additional options]

The command accepts the following options:

• --coverage (-c) – Whether to generate the code coverage.
• --source-map (-s) – Whether to attach the source maps.
• --watch (-w) – Whether to watch test files.
• --reporter (-r) – Reporter for Karma (default: mocha, can be changed to dots).
• --browsers (-b) – Browsers that will be used to run tests (default: Chrome, available: Firefox).

If you are going to change the component (src/ckeditor.js) or plugin (src/plugin.js) files, remember about rebuilding the package. You can use yarn run develop in order to do it automatically.

Building the package

Build a minified version of the package that is ready to publish:

yarn run build

Changelog generator

yarn run changelog

Testing component with Vue CLI

When symlinking the component in an application generated using Vue CLI, make sure your vue.config.js file configures webpack in the following way:

module.exports = {
	configureWebpack: {
		resolve: {
			symlinks: false
		}
	}
};

Otherwise, the application will fail to load the component correctly and, as a result, it will throw a build error.

Releasing package

Prerequisites

Before releasing a new version, run a demo project to confirm that the integration works in a real-world scenario.

1. Navigate to the demo folder.
2. Reinstall the dependencies.
3. Run yarn dev to see if the integration works as expected.
4. Run yarn build to see if the project with the integration builds without errors.

Dependencies in the `demo` project need to be reinstalled after any changes to the integration, because in `package.json` we use `file:` instead of `link:` due to Vite limitations. Unlike `link:`, which creates a symlink to the integration, `file:` copies its contents when `yarn install` is run and never updates after that.

Changelog

Before starting the release process, you need to generate the changelog:

yarn run changelog

Publishing

After generating the changelog, you are able to release the package.

First, you need to bump the version:

yarn run release:prepare-packages

After bumping the version, you can publish the changes:

yarn run release:publish-packages

Note: The release/ directory will be published.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.

ckeditor5-vue's Issues

Spread information about the integration

List integration info on:

• https://github.com/vuejs/awesome-vue#rich-text-editing
• others?

keydown Component events

Hey,
im trying to build a CKEditor application with Vue, where I want to save every single keystroke to a csv file.
Therefore I want to use the keydown event, but I can't get it to work.
Or are the only component events in vue the ones listed here?
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#component-events
In my template I currently have:

<ckeditor :editor="editor" :value="editorData" :config="editorConfig" @ready="onEditorReady"
                      @input="onEditorInput" @keydown="onKeyDown"></ckeditor>

Title is transformed to paragraph

The editor is acting really weird for me. When initiating the editor with content saved from a previous session, the titles are transformed into paragraphs. However, removing that paragraph and adding a new title works. But then after saving, when refreshing, it is again transformed into a normal paragraph.

Here is the ckeditor.vue's actual value:

And the rendered DOM:

Dependencies:

• "@ckeditor/ckeditor5-build-classic": "^11.1.1",
• "@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",
• "vue": "^2.5.0"

This is my config:

editorConfig: {
                language: 'sv',
                allowedContent: true,
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraf', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: { name: 'h1', classes: 'title is-4' }, title: 'Rubrik 1', class: 'ck-heading_heading1' },
                        { model: 'heading2',  view: { name: 'h2', classes: 'title is-5' }, title: 'Rubrik 2', class: 'ck-heading_heading2' },
                    ],
                },
            },

It seems to be related to this FAQ.

Update CONTRIBUTING.md to match

We changed its content recently.

Did you register the component correctly?

I'm trying to use the code below as seen on this URL: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs

`<script>
// ⚠️ NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!
// Since we're building CKEditor from source, we use the source version of ClassicEditor.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                plugins: [
                    EssentialsPlugin,
                    BoldPlugin,
                    ItalicPlugin,
                    LinkPlugin,
                    ParagraphPlugin
                ],

                toolbar: {
                    items: [
                        'bold',
                        'italic',
                        'link',
                        'undo',
                        'redo'
                    ]
                }
            }
        };
    }
};

</script>`

The error says

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

How do you fix this?

Internet Explorer is blank

I use vue-cli-service build and vue-cli-service serve to build my app. I only load CKEditor modules if we're not using IE. Otherwise, I do not render the ckeditor component and I do not import it (I actually import it with require, since it's inside a condition.

The app works well with all browser (Firefox, Chrome and IE) when I do vue-cli-service build. However, if I do vue-cli-service serve to make a build, IE shows a blank page.

Improve the "Documentation" section of the README

Like in https://github.com/ckeditor/ckeditor5-angular:

How to build CKEditor from source using vue-cli2?

Other SVG (eg: Font Awesome)

Following this doc evrething works as expected.

Now I want to create a custom plugin fowling this doc

As long as I use ckeditor SVG to add to the toolbar it works, but when I want to use fa's one it doesn't.

I tried to modify vue.config.js without success.

Vue.use options

As described in the work in progress VueJs implementation doc.

The initialisation of Vue plugin use options like these

Vue.use( CKEditor, {
	editors: {
		classic: ClassicEditor
	}
} );

What is the purpose of the object editors, is it to be able to load multiple Editor to use later ?
If it is, it raise a version confilct error.

If it is not planned to used as this, it could be a great feature.

Again thanks for all your work.

Fail to import other plugins with ckeditor-vue comp

If I use ckeditor5-vue as my editor component,when I want to add Other plugins(except for buildIn plugins) like Alignment/Font, it failed

You can see this issue I posted to the repo of ckeditor5-alignment, code is included
linked issue

Help wanted Please

If this can be solved quickly, I would be soooo appreciate it

Toolbar items

Is it really that hard to add all possible toolbar default items inside documentation?

How can I get source and Maximize buttons there?

Dark Mode

Hi,
Is there dark mode feature on this ckeditor??

V-model and tag-name not working as expected

Hi there,

I've got a build going and the editor works in every instance except in setting an initial value and trying to change the tag-name.

Here is my template

<template>
    <v-layout wrap>
        <v-flex>
            <ckeditor tag-name="textarea" :editor="classEditor" v-model="value" :config="editorConfig"></ckeditor>
        </v-flex>
    </v-layout>

</template>

Here is my build of options

<script>
  import states from './../../static/states'
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
  import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';

  export default {
    props: {},
    data () {
      return {
        yesNo: ['Yes', 'No'],
        stateOptions: states,
        classEditor : ClassicEditor,
        editorConfig : {
          plugins: [
            EssentialsPlugin,
            Underline,
            BoldPlugin,
            ItalicPlugin
          ],
          toolbar: [ 'bold', 'italic', 'underline']
        },
      }
    },
    methods: {}
  }

In my component I am setting the value of "value" to test. When I load the component, the value is there in dev tools, when I click on the editor and start typing, value changes to whatever I'm typing. But the editor won't show "test" when it first loads.

Second, I tried changing it to a textarea using tag-name and that isn't showing up. Any idea what would be going on here? Everything seems to be working except showing the initial value from v-model.

ckfinder 3 only inserts into the very top of the ckeditor in vue with ckeditor5

ckfinder 3 php uploads to s3 and inserts a visible image to the ckeditor but not at the cursor point, only at the top of the editor. Also after you insert, clicking on the ckfinder file manager button, all that happens is the current image highlights.

<template>
  <Ckeditor :editor="editor" :config="config" :value="value" @input="input" v-on="$listeners" />
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  components: {
    Ckeditor: CKEditor.component,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    editor: {
      type: Function,
      default: ClassicEditor,
    },
    config: {
      type: Object,
      default() {
        return {
          removePlugins: [],
          toolbar: {
            items: [
              'ckfinder',
              '|',
              'heading',
              '|',
              'bold',
              'italic',
              'link',
              'bulletedList',
              'numberedList',
              'blockQuote',
              'insertTable',
              'mediaEmbed',
              'undo',
              'redo',
            ],
          },
          ckfinder: {
            uploadUrl: '/ckfinder/core/connector/php/connector.php',

            // Define the CKFinder configuration (if necessary).
            // Available options: https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config
            options: {},
          },
        };
      },
    },
  },
  methods: {
    input(newValue) {
      this.$emit('input', newValue);
    },
  },
};
</script>

ES6 import

Hello,

I'am very exited that you provide an official VueJs implementation of CKEditor5 and thank you for this.
But I want to try i and I didn't achieve.

What I've done:

• Clone this repo
• Build
• copy builded files into my app
• Install classic editor in my app
• import as a VueJs plugin

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { CKEditor } from './thirdparty/ckeditor'

Vue.use(CKEditor, {
  editors: {
    classic: ClassicEditor
  }
})

It result this error:

"export 'CKEditor' was not found in './thirdparty/ckeditor'

May I do something wrong ?

Nota:
I tried this too

...
import CKEditor from './thirdparty/ckeditor'
...

Decoupled Document Editor

As I found a hacky solution (not the real one I think) in #5

I try with the decoupled document editor, but now nothing appears with no error.

The element (div in my case) won't be replaced with the editor.

Cannot read property 'getAttribute' of null

Hi - I'm looking to replace Froala and am doing a POC with CKEditor. Unfortunately I'm getting the above error when running the test. It all builds fine.

I am using Vue with Nuxt.

I have followed the guide to the letter (I think).

Here's the error

ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.on (observablemixin.js:254)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (http://localhost:4000/_nuxt/vendors.pages/test.js:59093:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at ButtonView.render (buttonview.js:168)
    at ButtonView.on (observablemixin.js:254)

Here's my vue file

<template>
  <div>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'

export default {
  data() {
    return {
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: {
        plugins: [
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin
        ],

        toolbar: {
          items: ['bold', 'italic', 'link', 'undo', 'redo']
        }
      }
    }
  }
}
</script>

and my vue.config.js

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
  // The source of CKEditor is encapsulated in ES6 modules. By default, the code
  // from the node_modules directory is not transpiled, so you must explicitly tell
  // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
  transpileDependencies: [
      /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
  ],

  configureWebpack: {
      plugins: [
          // CKEditor needs its own plugin to be built using webpack.
          new CKEditorWebpackPlugin( {
              // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
              language: 'en'
          } )
      ],
      devtool: '#source-map'
  },

  css: {
      loaderOptions: {
          // Various modules in the CKEditor source code import .css files.
          // These files must be transpiled using PostCSS in order to load properly.
          postcss: styles.getPostCssConfig( {
              themeImporter: {
                  themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
              },
              minify: true
          } )
      }
  },

  chainWebpack: config => {
      // Vue CLI would normally use its own loader to load .svg files. The icons used by
      // CKEditor should be loaded using raw-loader instead.
      config.module
          .rule( 'svg' )
          .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
          .use( 'file-loader' )
          .loader( 'raw-loader' );
  }
};

What have I done wrong!!!

Thanks

how can setup Decoupled Document Editor for nuxtjs the simplest way

I feel too confusing to install Decoupled Document Editor ,

Importing @ckeditor/ckeditor5-build-classic breaks @babel/preset-env

As the title suggests, whenever I import the @ckeditor/ckeditor5-build-classic it breaks my application after running babel with @babel/preset-env.

The generated file starts with this line var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));. It seems like it is double parsing it or something, I'm not sure. But when I comment out that part the app.es5.js is working.

I am using Laravel Mix with webpack and babel like this:

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .babel(['public/js/app.js', 'public/js/vendor.js'], 'public/js/app.es5.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/pdf.scss', 'public/css')
    .version();

I am importing the build like this: import ClassicEditor from "@ckeditor/ckeditor5-build-classic"

Building a CKEditor in with plugins in application

I'm trying to build an application on Vuejs where I'm using CKEditor as mark down editor. I went through the docs and installed accordingly, I can see my editor is working fine. In my component I'm having something like this:

<template>
	<div class="col-md-6">
		<ckeditor :editor="editor" v-model="description" :config="editorConfig"></ckeditor>
	</div>
</template>
<script>
	import {getHeader} from './../../config.js'
	import CKEditor from '@ckeditor/ckeditor5-vue';
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	Vue.use( CKEditor );
	export default {
		data(){
			return{
				description: '',
				editor: ClassicEditor,
				editorConfig: {
					// The configuration of the editor.
				}
			}
		}

	}
</script>

But when try to load plugins something like this:

editorConfig: {
	// The configuration of the editor.
	extraPlugins: 'mathjax',
	mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML',
}

It throws error and my CKEditor is not loaded, I know that depending plugin resources are not loaded hence it throws error. Previously I used to get this in:

<script src="{{asset('text_editor/ckeditor.js')}}"></script>

And in my text-editor folder I had build-config.js which configures the plugins and its resources to my repository:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

/**
 * This file was added automatically by CKEditor builder.
 * You may re-use it at any time to build CKEditor again.
 *
 * If you would like to build CKEditor online again
 * (for example to upgrade), visit one the following links:
 *
 * (1) http://ckeditor.com/builder
 *     Visit online builder to build CKEditor from scratch.
 *
 * (2) http://ckeditor.com/builder/6e09ffa6274b8112e909b3c03ca1f1e6
 *     Visit online builder to build CKEditor, starting with the same setup as before.
 *
 * (3) http://ckeditor.com/builder/download/6e09ffa6274b8112e909b3c03ca1f1e6
 *     Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
 *
 * NOTE:
 *    This file is not used by CKEditor, you may remove it.
 *    Changing this file will not change your CKEditor configuration.
 */

var CKBUILDER_CONFIG = {
	skin: 'bootstrapck',
	preset: 'full',
	ignore: [
		'bender-err.log',
		'bender-out.log',
		'bender.ci.js',
		'bender.js',
		'dev',
		'gruntfile.js',
		'less',
		'node_modules',
		'package.json',
		'tests'
	],
	plugins : {
		'div' : 1,
		'elementspath' : 1,
		'enterkey' : 1,
		'entities' : 1,
		'eqneditor' : 1,
		'filebrowser' : 1,
		'find' : 1,
		'flash' : 1,
		'floatingspace' : 1,
		'font' : 1,
		'format' : 1,
		'forms' : 1,
		'liststyle' : 1,
		'magicline' : 1,
		'mathedit' : 1,
		'mathjax' : 1,
		'maximize' : 1,
		'newpage' : 1,
		'pagebreak' : 1,
		'pastefromword' : 1,
		'pastetext' : 1,
		'preview' : 1,
		'print' : 1,
		'removeformat' : 1,
		'resize' : 1,
		'save' : 1,
		'scayt' : 1,
		'selectall' : 1,
		'wysiwygarea' : 1
	},
	languages : {
		'en' : 1
	}
};

How can I achieve this in my component locally?

Editor disabled state -> plugin button state

I try to write a plugin as explained in the doc.
Because my editor need a loading state I use the disabled props, that's work as expected.

My plugin doesn't follow the editor state:

...
      const view = new ButtonView(locale)
      view.isEnabled = !editor.isReadOnly
...

Reconsider the `transpileDependencies` option in vue.config.js

This configuration is present here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs

I see two issues with the above configuration:

1. Should we transpile all CKEditor5 code to ES5? It produces much larger builds and we don't do it by default in our CKEditor 5 builds, it's not mandatory.

2. The /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/ won't match our collaboration repositories, it'd change it to something more like @ckeditor[/\\]ckeditor5?-[^/\\]+[/\\]src[/\\].+\.js$/

I'm want to change cursor position but ; Cannot read property 'clone' of undefined getting error ; what is the cause of the error

var selection=editor.view.document.selection;
var start=0;
var end =4;

range = editor.view.writer.createRange( start, end ); /* error on this line */
selection.setTo( range );

Check if empty?

Hello!

I can't find a way to tell if CKeditor is empty, because if it is empty it is returning <p>&nbsp;</p>.

I found a config ignoreEmptyParagraph but it is not working

Error After uploading Image

I get this error after the image has been uploaded to my server

Code

<template>
    <div>
        <ckeditor :editor="editor" v-model="content" :config="editorConfig">
    </div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {

    components: {
        CKEditor,
    },

    data() {
        return {
            content: "Default text",
            editor: ClassicEditor,
            editorConfig: {
                cloudServices: {
                    tokenUrl: "http://url.com/token",
                    uploadUrl: "http://url.com/token"
                }
            }
        }
    }
}
</script>

Error

TypeError: Cannot read property 'default' of null

And after that when I continue typing, i get this other error.

Uncaught i: model-nodelist-offset-out-of-bounds: Given offset cannot be foud in the nodelist.

Very long initialisation time

Hi,

really long

Simple custom plugin causes issues with Link and Table.

I implement the CKEditor5 from source in my Vue app. I use the ckeditor5-editor-classic (following this guide) and want to add a custom button.

I followed this guide and created a simple plugin to console.log on a click of the button. That works just fine.

The problem: The moment include my custom plugin, the Link and Table plugins start misbehaving that seems like a css positioning issue (renders the link field on the bottom of the page).

My component looks like this:

<template>
    <div>
        <ckeditor
                v-model="body"
                :editor="editor"
                :config="editorConfig">
        </ckeditor>
    </div>
</template>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
    import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
    import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
    import MyCustomPlugin from '@/components/common/MyCustomPlugin';

    export default {
        components: {
            ckeditor: CKEditor.component,
        },
        data: function() {
            return {
                editor: ClassicEditor,
                editorConfig: {
                    plugins: [
                        EssentialsPlugin,
                        BoldPlugin,
                        LinkPlugin,
                    ],
                    extraPlugins: [MyCustomPlugin,],
                    toolbar: {
                        items: [
                            'bold',
                            'link',
                            'myCustomPlugin'
                        ]
                    }
                },

            };
        },
    };
</script>

My vue.config.js file follows the guide. My custom plugin looks like this:

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class MyCustomPlugin extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'myCustomPlugin', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            view.on( 'execute', () => {
                console.log('dispatch some event');
            } );

            return view;
        } );
    }
}

export default MyCustomPlugin;

I have the following dependencies:

"@ckeditor/ckeditor5-basic-styles": "^11.0.0",
 "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
 "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
 "@ckeditor/ckeditor5-editor-classic": "^12.0.0",
 "@ckeditor/ckeditor5-essentials": "^11.0.0",
 "@ckeditor/ckeditor5-font": "^10.0.4",
 "@ckeditor/ckeditor5-highlight": "^11.0.0",
 "@ckeditor/ckeditor5-link": "^11.0.0",
 "@ckeditor/ckeditor5-paragraph": "^11.0.0",
 "@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",

The only indication I have is when ButtonView is not included, the Link seems to work properly.

Otherwise no error messages. I haven't included the ckeditor5-build-classic anywhere else in the app.

I have spent some few days on this issue and have tried everything the web has to offer, but cannot seem to find a way forward. Any help would be appreciated!

Change way of setting data

A follow-up to #47.

We shouldn't use the el.innerHTML unless it's necessary, because it can easily provide some attack vectors and is slow for large contents. We should use the initialValue property instead.

Load plugins

I'am not able to load plugin through my component.

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'

export default {
  name: 'document',
  components: {},
  data () {
    return {
      editorData: '<p>Hello world!</p>',
      editorConfig: {
        language: 'fr',
        plugins: [
          EssentialsPlugin,
          BoldPlugin
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin
        ],
        //
        toolbar: {
          items: [
            'bold'
            'italic',
             'link',
            'undo',
            'redo'
          ]
        }
      }
    }
  }
}

This error raised

CKEditorError: "model-selection-set-ranges-not-range: Selection range set to an object that is not an instance of model.Range. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-selection-set-ranges-not-range

Vue cli3 Using CKEditor from source fail

I follow this document　https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-ckeditor-from-source

`error in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg

Module build failed (from ./node_modules/raw-loader/index.js):
ValidationError: Raw Loader Invalid Options

options should NOT have additional properties

at validateOptions (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.rawLoader (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/index.js:14:3)

@ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/italic/italicui.js 15:0-54 44:30-40
@ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/italic.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.123:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/undo.svg

Module build failed (from ./node_modules/raw-loader/index.js):
ValidationError: Raw Loader Invalid Options

options should NOT have additional properties

at validateOptions (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.rawLoader (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/index.js:14:3)

@ ./node_modules/@ckeditor/ckeditor5-undo/src/undoui.js 15:0-47 38:61-69
@ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js
@ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.123:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/redo.svg

Module build failed (from ./node_modules/raw-loader/index.js):
ValidationError: Raw Loader Invalid Options

options should NOT have additional properties

at validateOptions (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.rawLoader (/home/wanghuiwen/WebstormProjects/zwapp/node_modules/raw-loader/index.js:14:3)

@ ./node_modules/@ckeditor/ckeditor5-undo/src/undoui.js 16:0-47 39:61-69
@ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js
@ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue?vue&type=script&lang=js&
@ ./src/components/Home.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.123:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

Initialize data via setData() doesn't work properly

editor.setData() or editor.data.set() in real-time collaboration works incorrect. Using it may overwrite local changes on remote clients.

Failed to compile.

While attempting to use from src, I am receiving this message:

./node_modules/@ckeditor/ckeditor5-ui/theme/components/editorui/editorui.css
Module not found: Error: Can't resolve '../../../../../postcss-loader/lib/index.js' in '/home/user/public_html/admin...com/node_modules/@ckeditor/ckeditor5-ui/theme/components/editorui'

However, the path should be ...postcss-loader/src/index.js

Any clue as to why this may be happening?

Very slow with large text

I've tried embedding ClassicEditor in a clean vue project: everything is OK, but when I paste a long flat text (not formatted, just 800 lines long text) the editor became veeery slow (several seconds just to type a character and see it on screen). The same text pasted in your online (not vue) examples works without problems. After deleting all the text, editing is again responsive.
Removing "v-model" tag (thinking about a slowdown keeping the model in sync) didn't help
Tried with latest Chrome on Windows and Linux
My page is as simple as that:

<template>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
  name: "editortest",
  components: {},
  data: function() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Rich-text editor content.</p>",
      editorConfig: {
        // The configuration of the rich-text editor.
      }
    };
  },
  methods: {}
};
</script>

<style>
</style>

Implement the first version of this component

Part of ckeditor/ckeditor5#1002.

We already have https://github.com/ckeditor/ckeditor5-react and https://github.com/ckeditor/ckeditor5-angular. It'd be good if we kept this new integration (and its docs) consistent with the other two integrations.

Missing icons on Document Editor

I tried to integrate the Document Editor to my application, but I found that all the icons of the toolbar are missing, i.e. bold, italic, underline...
I followed the guidelines on https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
to setup a Document Editor and got the missing icons.
I found it quite confusing with the instruction "If you use the Document editor in your application, you need to manually add the editor toolbar to the DOM."
Can I have an example on how to setup a functional Document Editor in the Vue Component way?

BTW, I have also followed the step-by-step instructions (html structures & CSS) on
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/document-editor.html
but still got the missing icons problem.

Can't add plugins

I am trying to add CKFinder plugin to the CKEditor. Here is my code:

This is single component file contents, PageComponent.vue :

<template>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';


export default {
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            plugins: [CKFinder],
            toolbar: ['ckfinder'],
            editorConfig: {
                // The configuration of the editor.
            }
        }
    }
}

The problem is that there is nothing on the page. It's like it is hidden. I also have no errors in the console.

It works and shows the editor if I replace @ckeditor/ckeditor5-editor-classic/src/classiceditor with @ckeditor/ckeditor5-build-classic, but as you may guess, I get ckeditor-duplicated-modules error.

How to get current cursor position

I tried getting the cursor position of editor through many different ways but i am not getting a solution.

In my editor object i always get editor.document is undefined.

Also tried

editor.model.change( writer => {
    writer.insertText( 'Plain text', editor.model.document.selection.getFirstPosition() );
} );

But even editor.model is undefined.
What i achieved until now is i can get the offset where cursor is but not specific to line number as below.

editor.source.selection.getLastPosition().offset
The attached image shows my editor object.

I am stuck with this issue please let me know what i am doing wrong here.

Installing a plugin results in error: "Cannot read property 'getAttribute' of null"

I am trying to install a plugin using this guide.

This is my error:

TypeError: Cannot read property 'getAttribute' of null

I am using it like this:

<template>
    <ckeditor ref="editor" :editor="editor" :config="editorConfig" v-model="value"></ckeditor>
</template>

And the script:

import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

export default {
    components: {
        Ckeditor: CKEditor,
    },
    props: ['value'],
    data() {
        return {
            editor: ClassicEditor,
            editorConfig: {
                plugins: [ Highlight ],
                toolbar: [ 'highlight' ],
            }        
        }
    }
}

How to build from source using Laravel Mix?

If this should be posted in the main repo, I'll do that

I'm currently trying to build CKE5 from source for vue using Laravel Mix. When I attempt to add the Link plugin, it fails because it can't seem the find a mixin, but when I remove that plugin, it'll build fine, but then error in console.

I wouldn't be surprised if there's something wrong with my setup, but I tried following the advanced setup guide in the docs as opposed to building from source vue guide since that was related to vue cli.

side question: how to include the css in my app.css file during the build process?

CKE5 packages installed (the build version is there when i was testing CKE before wanting to build from source)

"@ckeditor/ckeditor5-alignment": "^10.0.4",
"@ckeditor/ckeditor5-autoformat": "^10.0.4",
"@ckeditor/ckeditor5-basic-styles": "^10.1.0",
"@ckeditor/ckeditor5-block-quote": "^10.1.1",
"@ckeditor/ckeditor5-build-classic": "^11.2.0",
"@ckeditor/ckeditor5-core": "^11.1.0",
"@ckeditor/ckeditor5-dev-utils": "^11.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^7.0.1",
"@ckeditor/ckeditor5-editor-classic": "^11.0.2",
"@ckeditor/ckeditor5-essentials": "^10.1.3",
"@ckeditor/ckeditor5-heading": "^10.1.1",
"@ckeditor/ckeditor5-image": "^12.0.0",
"@ckeditor/ckeditor5-link": "^10.1.0",
"@ckeditor/ckeditor5-list": "^11.0.3",
"@ckeditor/ckeditor5-markdown-gfm": "^10.0.4",
"@ckeditor/ckeditor5-media-embed": "^10.1.0",
"@ckeditor/ckeditor5-paragraph": "^10.0.4",
"@ckeditor/ckeditor5-table": "^11.0.1",
"@ckeditor/ckeditor5-theme-lark": "^12.0.0",
"@ckeditor/ckeditor5-ui": "^11.2.0",
"@ckeditor/ckeditor5-upload": "^10.0.4",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",

3rd party packages (just in case there's some conflict I don't know)

"axios": "^0.18",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bootstrap": "^4.0.0",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"postcss-loader": "^3.0.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tiptap": "^1.7.0",
"tiptap-commands": "^1.3.0",
"tiptap-extensions": "^1.7.0",
"tiptap-utils": "^1.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.22",
"vue-tippy": "^2.0.24",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"

webpack.mix.js

const mix = require('laravel-mix');

// cke stuff
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const CKEStyles =  require( '@ckeditor/ckeditor5-dev-utils' ).styles;

// mix stuff
mix.options({
    uglify: {
        comments: false
    }
});

mix.webpackConfig({
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: CKEStyles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    },
                ]
            }
        ]
    },
    plugins: [
        new CKEditorWebpackPlugin({
            language: 'en'
        })
    ]
});

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

app.js

// ...
import CKEditor from '@ckeditor/ckeditor5-vue';
import CKEditorClassicCustom from './components/ckeditor-classic-custom';

Vue.use(CKEditor);
Vue.component('ckeditor-classic-custom', CKEditorClassicCustom);
// ...

ckeditor-classic-custom.vue component (link plugin is commented out cause build fails when adding it)

<template>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

    import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
    import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
    // import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
    import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';


    export default {
        name: 'ckeditor-classic-custom',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Hello there.</p>',
                editorConfig: {
                    plugins: [
                        EssentialsPlugin,
                        BoldPlugin,
                        ItalicPlugin,
                        //LinkPlugin,
                        ParagraphPlugin
                    ],

                    toolbar: {
                        items: [
                            'bold',
                            'italic',
                            //'link',
                            '|',
                            'undo',
                            'redo'
                        ]
                    }
                }
            };
        }
    };
</script>

1. Issue when not using the Link plugin
   
   

2. Build issue when using the Link plugin (boxed issues)
   
   (I tried that npm install --save command, but that didn't work)

how to add plugins of ckeditor in nuxt with ssr

i am trying to add Alignment plugins of ckeditor 5 in my nuxt app which is universal (SSR)

i tried like this in plugins

import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

// import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; <-- not working


const options = {

    editors: {
        classic: ClassicEditor,

    },
    name: 'ckeditor'
}

Vue.use(VueCkeditor.plugin, options);

i also tried direct import to page like this

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

getting error

Unexpected identifier

Normal editorConfig is working fine

editorConfig: {

      image: {

        toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight'],

                styles: [

                'full',


               'alignLeft',


               'alignRight'
           ]
         },
         alignment: {
           options: [ 'left', 'right' ]
         },
         toolbar: {
           items: [
            'heading',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'insertTable',
            'imageUpload',
            'mediaEmbed',
            'alignment'
          ]
       }
    },

There's a wrong URL in the release script

ckeditor5-vue/scripts/release.js

Line 129 in f030de1

const url = `https://github.com/ckeditor/ckeditor5-react/releases/tag/v${ version }`;

Error while pasting simple text

I use a custom build with a lot of plugins and maybe the reason but if some one has a clue ...

When I paste simple text inside my decoupled document i have this error

Error: view-position-after-root: You can not make position after root. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-view-position-after-root
 {"root":{"_children":[{"name":"span","_attrs":[],"_children":[{"name":"span","_attrs":[],"_children":[{"name":"span","_attrs":[],"_children":[{"_textData":"Error: view-position-after-root: You can not make position after root."}],"_classes":["message-body","devtools-monospace"],"_styles":[],"_customProperties":[]}],"_classes":["message-flex-body"],"_styles":[],"_customProperties":[]}],"_classes":["message-body-wrapper"],"_styles":[],"_customProperties":[]}]}}

Error when mounting and setting the editorData

So here is the case:

<template>
    <div>
        <ckeditor 
            :editor="editor" 
            v-model="editorData"
            :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
    name: "something",
    data() {
        return {
            // CKEditer 
            editor: ClassicEditor,
            editorData: '',
            editorConfig: {
                // The configuration of the editor.
                toolbar: [ 'bold', 'italic' ]
            },
        };
    },
    watch: {
        editorData: function(val) {
            this.$emit('input', val);
        },
    },
    mounted() {
        this.editorData = "Prefill with data here";
    }
};
</script>

When I switch components or view that contains the CKEditor, the data gets filled with no problem when mounted, but keeps giving an error in the console:

[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'getData' of null"

Any ideas on this? Am I implementing it right or is it a bug?

Upgrade dev dependencies

https://david-dm.org/ckeditor/ckeditor5-vue?type=dev

Cannot read property 'create' of null nuxtjs

when i try add plugin CKEditor for nuxtjs and make alert Cannot read property 'create' of null
my plugin :

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Vue.use( CKEditor, {
  editors: {
      classic: ClassicEditor
  },
  name: 'ckeditor'
});

and preview page

              <no-ssr>
                <ckeditor type="classic" v-model="func.notification.cf_text"></ckeditor>
              </no-ssr>

someone can help ?

keydown during I can't get the old data that is returning the deleted data

this.$refs.editor.instance.editing.view.document.on('keydown', ( event, data ) => {

console.log(data.domEvent.target.textContent) /* deleted data coming */

/* How do I get data before it is deleted*/
})

Write explicitly which loader is used for SVG files and how to overcome some problems.

It might be useful to write something more abut SVG loader (raw-loader) used for CKEditor 5 (and why) and that it differs from the editor used in Vue (file-loader): #31 (comment).

Also another expand example with case of external icons used for ckeditor icons and for other parts of vue project as the reasearch was already done: #31 (comment).

Is it possible to access the CKeditor instance?

I might be not understanding a lot of things, but I integrated the component as in the docs using ES6 Modules, both globally and locally, on a vue-cli-3 project.
The editor loads normally, I can interact with the editorData attribute, but I seem to be limited to that.

I found the following line in a stackoverflow answer:
CKEDITOR.instances.yourEditorInstance.editable().getText()
Is it possible, using this component, to access similar functionalities related to the instance? Do I need some sort of plugin?

TypeError: Cannot convert undefined or null to object

If i set Set the initial data of the editor = null, editor does not load.
My code 
data () {
  return {
    value: null
  }
}

<ckeditor v-model="value"
:editor="editor.type"
@ready="onReadyEditor"
/>

error in editor.setData( this.value );

ckeditor5-vue/src/ckeditor.js

Line 53 in 1dc60f8

editor.setData( this.value );

For correct working I have to set value like value: '' or with not empty value