missing tab: image - properties - advanced

[focussing]

Hello!

When I open a ckeditor window in my Vue3 application and goto the image properties I am missing the "Advanced" tab:

If I include ckeditor version 4.11.4 in another project and do not use your component I get this:

How can I get that tab back?

I use "@mayasabha/ckeditor4-vue3": "^1.0.5" in my package.json

Best regards :)

[apoorvpal01]

Hi @focussing , apologies for my delayed response, I had not been keeping well so hadn't got a chance to check the issues.

I tested this on @mayasabha/ckeditor4-vue3 1.0.5 with 4.11.4 of CKEditor 4, and I seem to see the Advanced tab. Is it possible that you have something else in the project interfering with this?

Code used to test:

<script setup>
import { ref } from 'vue'
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3/dist/ckeditor'

const form = ref({
  terms: "terms",
  description: "description"
})

const editorUrl = "https://cdn.ckeditor.com/4.11.4/full-all/ckeditor.js";

const editorConfig = {
  FillEmptyBlocks: false,
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  toolbar: [
    ["Source", "Maximize"],
    ["Format"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Table", "HorizontalRule"],
    ["TextColor", "BGColor"],
    ["Image"]
  ],
};
</script>

<template>
  <main>
    <ckeditor v-model="form.terms" :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
    <ckeditor v-model="form.description" :editorUrl="editorUrl" :config="editorConfig" :throttle="120"></ckeditor>
  </main>
</template>

[focussing]

Hi

Thank you for coming back to this :) I use it like the following in my code:

In the <template> section I do not use the editorUrl prop.

<ckeditor v-model="editorData" :config="editorConfig" @blur="onBlur"> </ckeditor>

And in the <script> section I get the config from this function.

function setEditorConfig() {
    // added RV 13-08-2019

    config.height = 500;

    // deployed configuration file
    config.filebrowserBrowseUrl = '/php/file-browser.php';
    // development configuration file
    // config.filebrowserBrowseUrl = 'http://localhost:2222/php/file-browser.php';

    config.filebrowserWindowWidth = '1024';
    config.filebrowserWindowHeight = '768';
    config.language = 'nl';
    config.filebrowserUploadMethod = 'form';

    // Define changes to default configuration here.
    // For complete reference see:
    // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard', groups: ['clipboard', 'undo'] },
        { name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document', groups: ['mode', 'document', 'doctools'] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' },
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3';

    // allow iframe
    config.allowedcontent = true;
    // config.disallowedContent = 'img{width,height};'

    // Simplify the dialog windows.
    //config.removeDialogTabs = 'image:advanced;link:advanced';
}

[apoorvpal01]

I just checked this out, and the ckeditor4-vue3 component defaults to using a standard-all package for CKEditor if a specific editorUrl is not provided. If you opt for a full-all URL such as https://cdn.ckeditor.com/4.11.4/full-all/ckeditor.js, you would be able to get the advanced tab. I'd suggest specifying an editorUrl that includes all the packages you need for your project.

I'll also look into checking the performance considerations of defaulting to a full-all package and analyze load times. Thanks for raising this issue, this would be a useful point to mention in the readme as well, if anyone would like to use packages outside the standard-all set included by CKEditor.

[focussing]

Would it be possible to use a reduced set package and still have the advanced tab? Or use the full-all and then remove the stuff I do not want to bother my customers with?

[apoorvpal01]

I did some digging into that. It looks like the standard-all package actually has everything required to make it work, but just hides the tab from the dialog.

Ref: https://stackoverflow.com/questions/25045347/ckeditor-add-image-properties-advanced-tab

You can try adding a removeDialogTabs: '' to prevent removal of any dialog tabs.

The following code worked, even without specifying an editorUrl.

<script setup>
import { ref } from 'vue'
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3/dist/ckeditor'

const form = ref({
  terms: "terms",
  description: "description"
})

const editorConfig = {
  FillEmptyBlocks: false,
  language: "en",
  allowedContent: true,
  colorButton_enableMore: true,
  editorplaceholder: "type your text here",
  removeDialogTabs: '',
  toolbar: [
    ["Source", "Maximize"],
    ["Format"],
    ["Bold", "Italic", "Strike"],
    ["Undo", "Redo"],
    ["RemoveFormat", "NumberedList", "BulletedList", "Outdent", "Indent"],
    ["Blockquote"],
    ["Link", "Unlink"],
    ["Table", "HorizontalRule"],
    ["TextColor", "BGColor"],
    ["Image"]
  ],
};
</script>

<template>
  <main>
    <ckeditor v-model="form.terms" :config="editorConfig" :throttle="120"></ckeditor>
  </main>
</template>

[apoorvpal01]

@focussing I hope that solved the issue. Please comment here if it didn't!

[focussing]

@apoorvpal01 I will check it after the holidays period, thank you so far! Happy Newyear!

[focussing]

@apoorvpal01 I checked and it solved the issue 👍 thank you very much.