Question

My project use Nuxtjs and Vue2, it is a web for smart phone. I ve imported ckeditor but when i see the docs examples, the toolbar not make horizontal scroll.

This is template

<template>
        <v-flex :class="col" class="ck-editor-box">
            <v-row>
                <v-col :class="colInput" class="pt-0">
                    <client-only placeholder="loading...">
                        <ckeditor-nuxt v-model="ckeditorData" :config="editorConfig" />
                    </client-only>
                </v-col>
            </v-row>
        </v-flex>
</template>

This is script

<script>

export default {
    name:  CKEditorField ,
    components: {
         ckeditor-nuxt : () => { if (process.client) { return import( @blowstack/ckeditor-nuxt ) } },
    },

    data() {
        return {
            // editor: ClassicEditor,
            editorData:   ,
            editorConfig: {
                toolbar: {
                    items: [
                         undo ,  redo ,
                         | ,  heading ,
                         | ,  alignment ,
                         | ,  fontsize ,  fontColor ,  fontBackgroundColor ,  bold ,  italic , 
                         | ,  numberedList ,  bulletedList ,  todoList ,  outdent ,  indent ,
                         | ,  link ,  uploadImage ,  code ,
                    ],
                    shouldNotGroupWhenFull: false
                },
                removeButtons: [ FontSize ,  PageBreak ],
                removePlugins: [ Title ],
                placeholder: this.placeholder,
                simpleUpload: {
                    uploadUrl:  path_to_image_controller , // image path api
                    headers: {
                         Authorization :  optional_token 
                    }
                },
            },
        }
    },
}
</script>

Some item have dropdown list such as numberedlist will make horizontal scroll when it is placed near border of the screen (idk how to describe :))) )
enter image description here

Answer 1

you need more config toolbar: shouldNotGroupWhenFull: true

For example:

let editorConfig =  {
        removePlugins: [ Title ],
        toolbar: {
          shouldNotGroupWhenFull: true
        }
      }

友情链接