Comments (15)
Since the feature is working, I think we should limit our actions to the corresponding documentation.
from ckeditor5-vue.
I don't try other editors, but it could be the same.
from ckeditor5-vue.
We're thinking to document it similarly to how it's covered in the React component docs: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#note-using-the-document-editor-build. However, I didn't check yet whether that would work with the Vue.js component too.
from ckeditor5-vue.
I'am glad to read it when ready.
from ckeditor5-vue.
I checked and it works pretty much the same as React component. Just put editor.ui.view.toolbar.element
anywhere you want. We should definitely include that in docs.
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onReady"></ckeditor>
</div>
</template>
<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
export default {
name: 'app',
data() {
return {
editor: DecoupledEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
}
};
},
methods: {
onReady( editor ) {
document.body.prepend( editor.ui.view.toolbar.element );
}
}
}
</script>
from ckeditor5-vue.
OTOH, I realised that we always pass the element to Editor.create()
in the component so we're kinda missing the last scenario from the DecoupledEditor.create()
where one can decide where to insert both the editable and the toolbar:
DecoupledEditor
.create( '<p>Editor data</p>' )
.then( editor => {
// Append the toolbar to the <body> element.
document.body.appendChild( editor.ui.view.toolbar.element );
// Append the editable to the <body> element.
document.body.appendChild( editor.ui.view.editable.element );
console.log( 'Editor was initialized', editor );
} )
.catch( err => {
console.error( err.stack );
} );
OTTH I see that react component docs suggest this let-me-handle-everything scenario is possible:
<CKEditor
onInit={ editor => {
console.log( 'Editor is ready to use!', editor );
// Insert the toolbar before the editable area.
editor.ui.view.editable.element.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.view.editable.element
);
} }
// ...
/>
despite the fact that we pass the element to create()
there too. How's that working, @pomek?
What if the editor component is next to some other reactive content in DOM which changes a lot? How does react–controlled content interact with our toolbar and editable that we injected using native DOM methods (outside React)?
from ckeditor5-vue.
How's that working, @pomek?
We pass always an HTML element because I had some troubles (that, of course, I don't remember now) when a content is passed to Editor.create()
instead of the element. May it was related to the React component itself: when you have a code like :
<ckeditor ... />
you expect that in this place the editor will appear. If you pass the content, the editor won't appear and you must care about it when the editor is ready. So a code below:
<ckeditor data="Test." .../>
would introduce confusing feelings – you defined a component with an initial data but the editor won't appear.
What if the editor component is next to some other reactive content in DOM which changes a lot?
I don't know. I've never tested such scenario.
from ckeditor5-vue.
We've started when there was no option to pass data without element to the Editor.create()
AFAIR.
from ckeditor5-vue.
Editor.create( elementOrData )
was merged before we polished React integration.
More about this problem – https://github.com/ckeditor/ckeditor5-core/issues/64.
from ckeditor5-vue.
I follow @oleq steps like this:
<template>
<div ref="editorWrapper">
<ckeditor
v-model="form.content"
:editor="editor"
:rules="rules.contentRules"
:config="editorConfig"
:disabled="loading"
@ready="onReady"
></ckeditor>
</div>
</template>
...
methods: {
onReady (editor) {
this.$refs.editorWrapper.prepend(editor.ui.view.toolbar.element)
}
}
...
But not styles applied.
from ckeditor5-vue.
But not styles applied.
Which styles? Of the editor UI? Of the content?
from ckeditor5-vue.
I finally found a way.
I use the structure and the styles gave in the documentation.
from ckeditor5-vue.
i use nuxtjs and not working
from ckeditor5-vue.
@matamune94 What problem do you have?
from ckeditor5-vue.
Just to let you know, we added a new section to the Vue.js integration guide in our docs. It will be published online soon.
from ckeditor5-vue.
Related Issues (20)
- Performance issues in processing content with multiple paragraphs containing multiple inline widgets HOT 2
- [VUE] Align the release process to the changes in ckeditor5-dev
- Custom build issues (object, instead of function) - Documentation issues? HOT 1
- v-model, events "input" or "update: model-value" do not work in source edit mode HOT 3
- Uncaught ReferenceError: global is not defined HOT 1
- Migrate to CircleCI in ckeditor/ckeditor5-vue
- Add link popup have wrong position in Modal with fixed mask HOT 3
- Uncaught SyntaxError when integrating a build from the online builder when using `npm add file:./ckeditor5` in Vue HOT 6
- Table captions is absent HOT 3
- Add support for multi-root editor
- How to set the height of the editor in Vue3? I set CSS, but none of it worked HOT 8
- vue3+ts+vite use custom build HOT 1
- Allow control of batchType options in model-value watcher
- Investigate warning
- Bug Report: Strikethrough Not Showing on Vue 3 with CKEditor
- Make use of the `generic` attribute to provide better typing
- Remove argument passed to the `@destroy` event
- Better export of the `Ckeditor` component
- How to unit test the component
- Request for API to Retrieve Specific Node Data Using editor.getData()
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor5-vue.