GithubHelp home page GithubHelp logo

Comments (15)

oleq avatar oleq commented on July 22, 2024 1

Since the feature is working, I think we should limit our actions to the corresponding documentation.

from ckeditor5-vue.

kl3sk avatar kl3sk commented on July 22, 2024

I don't try other editors, but it could be the same.

from ckeditor5-vue.

Reinmar avatar Reinmar commented on July 22, 2024

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.

kl3sk avatar kl3sk commented on July 22, 2024

I'am glad to read it when ready.

from ckeditor5-vue.

oleq avatar oleq commented on July 22, 2024

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.

oleq avatar oleq commented on July 22, 2024

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.

pomek avatar pomek commented on July 22, 2024

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.

ma2ciek avatar ma2ciek commented on July 22, 2024

We've started when there was no option to pass data without element to the Editor.create() AFAIR.

from ckeditor5-vue.

pomek avatar pomek commented on July 22, 2024

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.

kl3sk avatar kl3sk commented on July 22, 2024

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)
    }
}
...

Here is my result
image

But not styles applied.

from ckeditor5-vue.

oleq avatar oleq commented on July 22, 2024

But not styles applied.

Which styles? Of the editor UI? Of the content?

from ckeditor5-vue.

kl3sk avatar kl3sk commented on July 22, 2024

I finally found a way.

I use the structure and the styles gave in the documentation.

from ckeditor5-vue.

matamune94 avatar matamune94 commented on July 22, 2024

i use nuxtjs and not working

from ckeditor5-vue.

oleq avatar oleq commented on July 22, 2024

@matamune94 What problem do you have?

from ckeditor5-vue.

oleq avatar oleq commented on July 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.