ckeditor / ckeditor5-vue Goto Github PK
View Code? Open in Web Editor NEWOfficial CKEditor 5 Vue.js component.
Home Page: https://ckeditor.com/ckeditor-5
License: Other
Official CKEditor 5 Vue.js component.
Home Page: https://ckeditor.com/ckeditor-5
License: Other
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 ?
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":[]}]}}
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*/
})
List integration info on:
We changed its content recently.
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?
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.
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!
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:
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.
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' ],
}
}
}
}
Hi,
really long
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
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
...
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?
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 );
Line 53 in 1dc60f8
For correct working I have to set value like value: '' or with not empty value
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 );
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
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.
ckeditor5-vue/scripts/release.js
Line 129 in f030de1
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`
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.
editor.setData()
or editor.data.set()
in real-time collaboration works incorrect. Using it may overwrite local changes on remote clients.
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:
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.
The /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
won't match our collaboration repositories, it'd change it to something more like @ckeditor[/\\]ckeditor5?-[^/\\]+[/\\]src[/\\].+\.js$/
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.
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?
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).
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.
Hi,
Is there dark mode feature on this ckeditor??
I get this error after the image has been uploaded to my server
<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>
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.
Hello!
I can't find a way to tell if CKeditor is empty, because if it is empty it is returning <p> </p>
.
I found a config ignoreEmptyParagraph but it is not working
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.
Is it really that hard to add all possible toolbar default items inside documentation?
How can I get source and Maximize buttons there?
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
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"
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.
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>
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>
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.
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.
I feel too confusing to install Decoupled Document Editor ,
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>
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:
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'
...
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'
]
}
},
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>
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>
//
// 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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.