document editor in vue js no toolbar

[shadhin-msa]

I have used vue components with classic & balloon worked fine. Though none of it solve my needs. I tried to use the document option for the "strikethrough" button + the look. But it doesn't work as expected. editor installed fine but without any toolbar. I find in other javascript examples user need point out the toolbar element. I didn't find any way how to do that when i am using vue. there is no directives or component for that

[Mgsy]

Hi, as you noticed, you have to put the toolbar in the container manually. It means that you should create two container elements - for the toolbar and for the editable. Please, see the following code example:

<template>
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
        <ckeditor :editor="editor" :config="editorConfig"  @ready="onReady"></ckeditor>
    </div>
</template>

// ...

methods: {
      onReady(editor) {
          const toolbarContainer = document.querySelector(  '.document-editor__toolbar' );
          toolbarContainer.appendChild( editor.ui.view.toolbar.element );
      }
}

[shadhin-msa]

Thank you for your reply. I will try it soon. Just want to know is it something that I could find from the documentation, but I didn't.

…

On Fri, 27 Dec 2019, 12:52 pm Kacper Tomporowski, ***@***.***> wrote: Hi, as you noticed, you have to put the toolbar in the container manually. It means that you should create two container elements - for the toolbar and for the editable. Please, see the following code example: <template> <div class="document-editor__toolbar"></div> <div class="document-editor__editable-container"> <ckeditor :editor="editor" :config="editorConfig" @ready="onReady"></ckeditor> </div></template> // ... methods: { onReady(editor) { const toolbarContainer = document.querySelector( '.document-editor__toolbar' ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); } } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#120?email_source=notifications&email_token=AEYGMNZMIR3ZE7H76T4NLA3Q2WQZTA5CNFSM4J6VI522YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHWWAUA#issuecomment-569204816>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEYGMN6OEGZIRCNAKJT5VBDQ2WQZTANCNFSM4J6VI52Q> .