🚀[NEW PLUGIN] Advanced WYSIWYG text editor

[dballiet]

@MindForApps

Hello!

Update v1.0.24

The “defaultStyle” and “font” fields are now dynamic.

“defaultStyle” will allow you to (dynamically) change default styles (font-family, font size, color, etc.) on the fly.
Using “font” you can dynamically change the list of available fonts (font-family). But keep in mind that the fonts from the list must be installed on the system, otherwise the default fonts will be applied.

I’m not what else to say but THANK YOU. It’s unreal that a feature request can requested and implemented that quickly. That normally never happens. I am truly grateful.

I know I’ve asked a bunch as of late but as someone thats just learning, you’ve been great. I hope this is the last question for a while: is it possible to take the HTML text that is rendered in the WYSIWYG editor (color, font, etc) and pass that into the body of an email somehow, using the stock Bubble io workflow action? It’s probably possible through a 3rd party like Postmark but I was trying to do it without having to go through another service. Again - many thanks.

[MindForApps]

@dballiet

is it possible to take the HTML text that is rendered in the WYSIWYG editor (color, font, etc) and pass that into the body of an email somehow, using the stock Bubble io workflow action?

Unfortunately this cannot be done. The standard process for sending emails does not work with HTML, but with BBCode.
You will most likely have to use third party services for this.
There are many topics on the forum about this. Search for “Send email html”

[dballiet]

@MindForApps

Unfortunately this cannot be done. The standard process for sending emails does not work with HTML, but with BBCode.
You will most likely have to use third party services for this.
There are many topics on the forum about this. Search for “Send email html”

Thank you. I might try to extract the HTML to convert a PDF, and then attach that to the email. Let me know if you think this would work, and if so if you are aware of any solid PDF creation plugins.

[dballiet]

Hey @MindForApps, hoping you can again give me some great help as you have in the past. My situation:

1. Send to GPT
2. Store GPT response
3. Display GPT response in WYSIWYG
   -in doing so, I am also injecting font and color

My question: if the initial content in the font size, color, and type is not changed at all in the editor, and the editor is closed, how can I save it to be able to open the editor in the future in the same formatting it was initialized in? Is it by using the Save action? Does it involved custom states? If so, can you walk a newbie through what I’d do? Thank you

[MindForApps]

“Default styles” are not written inside HTML. Therefore, saved content from the editor includes styles added directly in the editor, but does not include the default styles.

This way, default styles act as a wrapper for your content. And it looks something like this:

<div class="sun-editor-editable" style="font-family: Verdana; font-size: 18px;">
YOUR CONTENT
</div>

Those. styles are applied to content by default: font-family: Verdana; font-size: 18px;
But if other styles are applied within the content, they will take precedence over the default styles.

So, when saving content from the editor (using the “Save” or “Get Contents” actions), you get content with styles that were added directly in the editor, but without “default styles”.
So in your case you need to save two parameters: content and “default styles”. And then upload them in pairs into the editor. For example, content in the “Initial content” field and styles in the “defaultStyle” field
It will also help to apply different “default styles” to the same content by changing the values in the “defaultStyle” field

I hope I haven’t confused you even more.

[dballiet]

@MindForApps

also help to apply different “default styles” to the same content by changing the values in the “defaultStyle” field

Thank you. It’s very obvious that I need to educate myself on how HTML and CSS work more generally. Or hire someone to show me. However, this might be just enough to allow me to keep experimenting so I thank you for that.

What is somewhat confusing to me still is that the Save action doesnt include any parameter options on where to save. What does Save do/ how does it function? I would have expected some sort of parameter to be able to say what where to save?

Thanks for being patient with me,

[MindForApps]

Sorry, I didn’t understand your question correctly and thought that the difficulties were caused by working with the “Initial content” and “defaultStyle” parameters

So, to save content you can use two actions:

1. “Save” - Writes the editor content (content) to the “editor_content_text” and “editor_content” states. After finishing, the “content_saved” trigger will fire. The same thing happens when you click the “Save” button on the toolbar.
2. Get Contents - Gets the contents of the WYSIWYG_Editor. Writes the editor content (content) to the “editor_content” state After finishing, the “content_received” trigger will fire. Not working during enabled codeView mode
   This is stated in the documentation on the demo page:
   https://plugin-preview-4.bubbleapps.io/version-test/wysiwyg_editor

Thus, you can save the content by running one of the actions either “Save” or “Get Contents” and after that the editor content will be placed in the “editor_content” state. And then you can use it (for example, write it to a database)

Usually this is enough. But sometimes, for example if there is a lot of content, you may need to use a trigger that monitors the end of the action:

• For the “Save” action - “content_saved”
• For the “Get Contents” action - “content_received”

For example,

1. Action “Save”
   

   

2. Trigger “content_saved” and writing content to the database
   

[dballiet]

Once again, your guidance was very helpful and got me to a point where I was able to experiment and mostly create the workflow I was looking for. Thank you for taking that time to explain - I am learning a lot.

[dballiet]

Another feature request to make this even more robust… It would be fantastic to be able to be able to set a background in the editor, specifically related to a letter frame/border, where the text could be printed inside it mimicking a letter printed on letter stock.

[dballiet]

Do you think you might ever support setting the background of the editor to a picture? I’m thinking that might get me closer to coming up with a solution to be able to add a frame / border to the text. Thx

[MindForApps]

@dballiet

Do you think you might ever support setting the background of the editor to a picture? I’m thinking that might get me closer to coming up with a solution to be able to add a frame / border to the text.

Hello!

In fact, adding an image to the background is not difficult.
The problem here is that this will only work correctly with more or less constant editor sizes.
When you change the size of the editor, when you change the width or height, the size of the image in the background will change. The background image will be stretched or compressed depending on the size of the editor.

You can simply check this using CSS.

Here’s the code you can use to demonstrate:

<style>
.se-wrapper-wysiwyg {
     background-color: rgb(255 255 255 / 0%);
     background-image: url(//c2869cab0c1c2babe77119d7580fe263.cdn.bubble.io/f1713314348347x944685680370227100/frm.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     padding: 70px 90px;
}
.sun-editor {
     background-color: rgb(255 255 255 / 0%);
}
.sun-editor-editable[contenteditable=true].se-component {
     outline: none !important;
}
</style>

Paste the code into the “Header” of the application:

or you can use an HTML element that can be placed anywhere on the page:

To experiment, try three different frames:

1. https://c2869cab0c1c2babe77119d7580fe263.cdn.bubble.io/f1713314348347x944685680370227100/frm.png
2. https://c2869cab0c1c2babe77119d7580fe263.cdn.bubble.io/f1713313273753x585818522638766000/frame.png
3. https://c2869cab0c1c2babe77119d7580fe263.cdn.bubble.io/f1713307273535x498715092214150140/pngwing.com.png

Use from in parameter: background-image

Also, adjust the indentation as necessary:
padding: 70px 90px; - here 70 is the indentation above and below, and 90 is on the right and left.

After you try all of these three frames, you will notice that they look fine at a constant editor size where the aspect ratio is approximately equal to the aspect ratio of the original frame image.

I am sure that after checking all this you will understand why we have not yet implemented this function.

[dballiet]

Thank you very much. I now understand how this is complicated. You have also given me some ideas on how I could make this work through trial and error. I will keep plugging away.

I do wonder if there would be some sort of way to support a couple letter sizes within the plugin, like A4 and US Letter. And when either of those are selected, the editor defaults to that size and forces a border into that size. And it’s on the user to make sure the border is formatted properly for US / A4 or it will be stretched. Might be a big ask.

Thanks again for the breadcrumb that allows me to keep playing to try to implement the outcome I’m looking for.

[dballiet]

I decided to go a different route and to put the frame in a separate group to the right of the editor, and then embed a read-only version of the editor in the frame, tied back to the editor. When they edit the text, it will update in the frame on the right, and then they have print it as they see it. The only thing that doesnt seem to be working in the background-color: transparent; syntax in the editor defaultStyle. I cant make it transparent. Other color tests work but not transparent. Can you check if that is a bug, or let me know what I can try? Thanks again.

[MindForApps]

@dballiet

The only thing that doesnt seem to be working in the background-color: transparent; syntax in the editor defaultStyle. I cant make it transparent.

No, the “defaultStyle” parameter works differently. Here you can configure the font settings, size, color, width, etc. for the editing area.

To use “background: transparent;” in a frame you need to apply styles in the frame itself.

For example like this:

<div class="sun-editor-editable" style="background: transparent;">
    {your HTML is here}
</div>

If you want to make a transparent background in the editor, then you need to specify background: transparent; in the “defaultStyle” field and add a style for the editor itself:
1.

<style>
.sun-editor {
     background: transparent;
}
</style>

you can add the style to the “header” of the application:

or use an HTML element that you can place anywhere on the page:

[dballiet]

@MindForApps

.sun-editor {
     background: transparent;
}

Thank you, this worked. I hadnt set the defaultStyle AND applied the style in the metatag section. Once I did this, we are in business. Again, I can’t thank you enough for the excellent, responsive support.

[dballiet]

Small enhancement request - not a must have, more of a delighter. Toolbar buttons to increase or decrease font 1 step at a time.

[m3uuuf]

Wow, looks very good. But I need Arabic language in the language list.

[MindForApps]

@dballiet

Small enhancement request - not a must have, more of a delighter. Toolbar buttons to increase or decrease font 1 step at a time.

We’ll see what we can do about it. But I can’t promise anything yet.

[MindForApps]

@m3uuuf

But I need Arabic language in the language list

No problem, but I need your help. I don’t know Arabic and I don’t want to make any mistakes when using Google Translator. If you translate the necessary words/phrases, I will add it in the next update.

Here is an example in Urdu

    toolbar: {
        default: 'طے شدہ',
        save: 'محفوظ کریں',
        font: 'فونٹ',
        formats: 'فارمیٹس',
        fontSize: 'سائز',
        bold: 'بولڈ',
        underline: 'انڈر لائن',
        italic: 'ترچھا',
        strike: 'لکیرہ کردہ',
        subscript: 'ذیلی',
        superscript: 'انتہائی',
        removeFormat: 'فارمیٹ کو حذف دیں',
        fontColor: 'لکھائی کا رنگ',
        hiliteColor: 'نمایاں رنگ',
        indent: 'حاشیہ',
        outdent: 'ہاشیہ واپس',
        align: 'رخ',
        alignLeft: 'بائیں طرف',
        alignRight: 'دائیں طرف',
        alignCenter: 'مرکز میں طرف',
        alignJustify: 'ہر طرف برابر',
        list: 'فہرست',
        orderList: 'ترتیب شدہ فہرست',
        unorderList: 'غیر ترتیب شدہ فہرست',
        horizontalRule: 'لکیر',
        hr_solid: 'ٹھوس',
        hr_dotted: 'نقطے دار',
        hr_dashed: 'ڈیشڈ',
        table: 'میز',
        link: 'لنک',
        math: 'ریاضی',
        image: 'تصویر',
        video: 'ویڈیو',
        audio: 'آواز',
        fullScreen: 'پوری اسکرین',
        showBlocks: 'ڈبے دکھائیں',
        codeView: 'کوڈ کا نظارہ',
        undo: 'واپس کریں',
        redo: 'دوبارہ کریں',
        preview: 'پیشنظر',
        print: 'پرنٹ کریں',
        tag_p: 'پیراگراف',
        tag_div: 'عام (div)',
        tag_h: 'ہیڈر',
        tag_blockquote: 'اقتباس',
        tag_pre: 'کوڈ',
        template: 'سانچہ',
        lineHeight: 'لکیر کی اونچائی',
        paragraphStyle: 'عبارت کا انداز',
        textStyle: 'متن کا انداز',
        imageGallery: 'تصویری نگارخانہ',
        dir_ltr: 'بائیں سے دائیں',
        dir_rtl: 'دائیں سے بائیں',
        mention: 'تذکرہ'
    },
    dialogBox: {
        linkBox: {
            title: 'لنک داخل کریں',
            url: 'لنک کرنے کے لیے URL',
            text: 'ظاہر کرنے کے لیے متن',
            newWindowCheck: 'نئی ونڈو میں کھولیں',
            downloadLinkCheck: 'ڈاؤن لوڈ لنک',
            bookmark: 'بک مارک'
        },
        mathBox: {
            title: 'ریاضی',
            inputLabel: 'ریاضیاتی اشارے',
            fontSizeLabel: 'حرف کا سائز',
            previewLabel: 'پیش نظارہ'
        },
        imageBox: {
            title: 'تصویر داخل کریں',
            file: 'فائلوں سے منتخب کریں',
            url: 'تصویری URL',
            altText: 'متبادل متن'
        },
        videoBox: {
            title: 'ویڈیو داخل کریں',
            file: 'فائلوں سے منتخب کریں',
            url: 'ذرائع ابلاغ کا یو آر ایل، یوٹیوب/ویمیو'
        },
        audioBox: {
            title: 'آواز داخل کریں',
            file: 'فائلوں سے منتخب کریں',
            url: 'آواز URL'
        },
        browser: {
            tags: 'ٹیگز',
            search: 'تلاش کریں',
        },
        caption: 'عنوان',
        close: 'بند کریں',
        submitButton: 'بھیجیں',
        revertButton: 'واپس',
        proportion: 'تناسب کو محدود کریں',
        basic: 'بنیادی',
        left: 'بائیں',
        right: 'دائیں',
        center: 'مرکز',
        width: 'چوڑائی',
        height: 'اونچائی',
        size: 'حجم',
        ratio: 'تناسب'
    },
    controller: {
        edit: 'ترمیم',
        unlink: 'لنک ختم کریں',
        remove: 'حذف',
        insertRowAbove: 'اوپر قطار شامل کریں',
        insertRowBelow: 'نیچے قطار شامل کریں',
        deleteRow: 'قطار کو حذف کریں',
        insertColumnBefore: 'پہلے ستون شامل کریں',
        insertColumnAfter: 'اس کے بعد ستون شامل کریں',
        deleteColumn: 'ستون حذف کریں',
        fixedColumnWidth: 'مقررہ ستون کی چوڑائی',
        resize100: '100% کا حجم تبدیل کریں',
        resize75: '75% کا حجم تبدیل کریں',
        resize50: '50% کا حجم تبدیل کریں',
        resize25: '25% کا حجم تبدیل کریں',
        autoSize: 'ازخود حجم',
        mirrorHorizontal: 'آئینہ، افقی',
        mirrorVertical: 'آئینہ، عمودی',
        rotateLeft: 'بائیں گھومو',
        rotateRight: 'دائیں گھمائیں',
        maxSize: 'زیادہ سے زیادہ سائز',
        minSize: 'کم از کم سائز',
        tableHeader: 'میز کی سرخی',
        mergeCells: 'حجروں کو ضم کریں',
        splitCells: 'حجروں کو علیدہ کرو',
        HorizontalSplit: 'افقی تقسیم',
        VerticalSplit: 'عمودی تقسیم'
    },
    menu: {
        spaced: 'فاصلہ',
        bordered: 'سرحدی',
        neon: 'نیین',
        translucent: 'پارباسی',
        shadow: 'سایہ',
        code: 'کوڈ'
    }

Or Central Kurdish (Sorani) the code 'ckb'

  toolbar: {
        default: 'بنه‌ڕه‌ت',
        save: 'پاشه‌كه‌وتكردن',
        font: 'فۆنت',
        formats: 'Formats',
        fontSize: 'قه‌باره‌',
        bold: 'تۆخكردن',
        underline: 'هێڵ به‌ژێردا بێنه‌',
        italic: 'لار',
        strike: 'هێڵ به‌ناودا بێنه‌',
        subscript: 'ژێرسکریپت',
        superscript: 'سەرنووس',
        removeFormat: 'لابردنی فۆرمات',
        fontColor: 'ره‌نگی فۆنت',
        hiliteColor: 'ره‌نگی دیاركراو',
        indent: 'بۆشایی بەجێهێشتن',
        outdent: 'لابردنی بۆشایی',
        align: 'ئاراسته‌',
        alignLeft: 'لای چه‌پ',
        alignRight: 'لای راست',
        alignCenter: 'ناوه‌ند',
        alignJustify: 'به‌رێكی دابه‌ش بكه‌',
        list: 'لیست',
        orderList: 'لیستی ریزكراو',
        unorderList: 'لیستی ریزنه‌كراو',
        horizontalRule: 'هێڵی ئاسۆیی',
        hr_solid: 'پته‌و',
        hr_dotted: 'نوكته‌ نوكته‌',
        hr_dashed: 'داش داش',
        table: 'خشته‌',
        link: 'به‌سته‌ر',
        math: 'بیركاری',
        image: 'وێنه‌',
        video: 'ڤیدیۆ',
        audio: 'ده‌نگ',
        fullScreen: 'پڕ به‌ شاشه‌',
        showBlocks: 'بڵۆك نیشانبده',
        codeView: 'بینینی كۆده‌كان',
        undo: 'وەک خۆی لێ بکەوە',
        redo: 'هەڵگەڕاندنەوە',
        preview: 'پێشبینین',
        print: 'پرینت',
        tag_p: 'په‌ره‌گراف',
        tag_div: 'ی ئاسایی (DIV)',
        tag_h: 'سەرپەڕە',
        tag_blockquote: 'ده‌ق',
        tag_pre: 'كۆد',
        template: 'قاڵب',
        lineHeight: 'بڵندی دێر',
        paragraphStyle: 'ستایلی په‌ره‌گراف',
        textStyle: 'ستایلی نوسین',
        imageGallery: 'گاله‌ری وێنه‌كان',
        dir_ltr: 'من اليسار إلى اليمين',
        dir_rtl: 'من اليمين الى اليسار',
        mention: 'تنويه ب'
    },
    dialogBox: {
        linkBox: {
            title: 'به‌سته‌ر دابنێ',
            url: 'به‌سته‌ر',
            text: 'تێكستی به‌سته‌ر',
            newWindowCheck: 'له‌ په‌نجه‌ره‌یه‌كی نوێ بكه‌ره‌وه‌',
            downloadLinkCheck: 'رابط التحميل',
            bookmark: 'المرجعية'
        },
        mathBox: {
            title: 'بیركاری',
            inputLabel: 'نیشانه‌كانی بیركاری',
            fontSizeLabel: 'قه‌باره‌ی فۆنت',
            previewLabel: 'پێشبینین'
        },
        imageBox: {
            title: 'وێنه‌یه‌ك دابنێ',
            file: 'فایلێك هه‌ڵبژێره‌',
            url: 'به‌سته‌ری وێنه‌',
            altText: 'نوسینی جێگره‌وه‌'
        },
        videoBox: {
            title: 'ڤیدیۆیه‌ك دابنێ',
            file: 'فایلێك هه‌ڵبژێره‌',
            url: 'YouTube/Vimeo به‌سته‌ری له‌ناودانان وه‌ك '
        },
        audioBox: {
            title: 'ده‌نگێك دابنێ',
            file: 'فایلێك هه‌ڵبژێره‌',
            url: 'به‌سته‌ری ده‌نگ'
        },
        browser: {
            tags: 'تاگه‌كان',
            search: 'گه‌ران',
        },
        caption: 'پێناسه‌یه‌ك دابنێ',
        close: 'داخستن',
        submitButton: 'ناردن',
        revertButton: 'بیگەڕێنەوە سەر باری سەرەتایی',
        proportion: 'رێژه‌كان وه‌ك خۆی بهێڵه‌وه‌',
        basic: 'سه‌ره‌تایی',
        left: 'چه‌پ',
        right: 'راست',
        center: 'ناوەڕاست',
        width: 'پانی',
        height: 'به‌رزی',
        size: 'قه‌باره‌',
        ratio: 'رێژه‌'
    },
    controller: {
        edit: 'دەسکاریکردن',
        unlink: 'سڕینەوەی بەستەر',
        remove: 'سڕینه‌وه‌',
        insertRowAbove: 'ریزك له‌ سه‌ره‌وه‌ زیادبكه‌',
        insertRowBelow: 'ریزێك له‌ خواره‌وه‌ زیادبكه‌',
        deleteRow: 'ریز بسره‌وه‌',
        insertColumnBefore: 'ستونێك له‌ پێشه‌وه‌ زیادبكه‌',
        insertColumnAfter: 'ستونێك له‌ دواوه‌ زیادبكه‌',
        deleteColumn: 'ستونێك بسره‌وه‌',
        fixedColumnWidth: 'پانی ستون نه‌گۆربكه‌',
        resize100: 'قه‌باره‌ بگۆره‌ بۆ ١٠٠%',
        resize75: 'قه‌باره‌ بگۆره‌ بۆ ٧٥%',
        resize50: 'قه‌باره‌ بگۆره‌ بۆ ٥٠%',
        resize25: 'قه‌باره‌ بگۆره‌ بۆ ٢٥%',
        autoSize: 'قه‌باره‌ی خۆكارانه‌',
        mirrorHorizontal: 'هه‌ڵگه‌رێنه‌وه‌ به‌ده‌وری ته‌وه‌ره‌ی ئاسۆیی',
        mirrorVertical: 'هه‌ڵگه‌رێنه‌وه‌ به‌ده‌وری ته‌وه‌ره‌ی ستونی',
        rotateLeft: 'بسوڕێنه‌ به‌لای چه‌پدا',
        rotateRight: 'بسورێنه‌ به‌لای راستدا',
        maxSize: 'گه‌وره‌ترین قه‌باره‌',
        minSize: 'بچوكترین قه‌باره‌',
        tableHeader: 'سه‌ردێری خشته‌ك',
        mergeCells: 'خانه‌كان تێكه‌ڵبكه‌',
        splitCells: 'خانه‌كان لێك جیابكه‌وه‌',
        HorizontalSplit: 'جیاكردنه‌وه‌ی ئاسۆیی',
        VerticalSplit: 'جیاكردنه‌وه‌ی ستونی'
    },
    menu: {
        spaced: 'بۆشای هه‌بێت',
        bordered: 'لێواری هه‌بێت',
        neon: 'نیۆن',
        translucent: 'كه‌مێك وه‌ك شووشه‌',
        shadow: 'سێبه‌ر',
        code: 'كۆد'
    }

Or German

    toolbar: {
        default: 'Standard',
        save: 'Speichern',
        font: 'Schriftart',
        formats: 'Format',
        fontSize: 'Schriftgröße',
        bold: 'Fett',
        underline: 'Unterstrichen',
        italic: 'Kursiv',
        strike: 'Durchgestrichen',
        subscript: 'Tiefgestellt',
        superscript: 'Hochgestellt',
        removeFormat: 'Format entfernen',
        fontColor: 'Schriftfarbe',
        hiliteColor: 'Farbe für Hervorhebungen',
        indent: 'Einzug vergrößern',
        outdent: 'Einzug verkleinern',
        align: 'Ausrichtung',
        alignLeft: 'Links ausrichten',
        alignRight: 'Rechts ausrichten',
        alignCenter: 'Zentriert ausrichten',
        alignJustify: 'Blocksatz',
        list: 'Liste',
        orderList: 'Nummerierte Liste',
        unorderList: 'Aufzählung',
        horizontalRule: 'Horizontale Linie',
        hr_solid: 'Strich',
        hr_dotted: 'Gepunktet',
        hr_dashed: 'Gestrichelt',
        table: 'Tabelle',
        link: 'Link',
        math: 'Mathematik',
        image: 'Bild',
        video: 'Video',
        audio: 'Audio',
        fullScreen: 'Vollbild',
        showBlocks: 'Blockformatierungen anzeigen',
        codeView: 'Quelltext anzeigen',
        undo: 'Rückgängig',
        redo: 'Wiederholen',
        preview: 'Vorschau',
        print: 'Drucken',
        tag_p: 'Absatz',
        tag_div: 'Normal (DIV)',
        tag_h: 'Header',
        tag_blockquote: 'Zitat',
        tag_pre: 'Quellcode',
        template: 'Vorlage',
        lineHeight: 'Zeilenhöhe',
        paragraphStyle: 'Absatzstil',
        textStyle: 'Textstil',
        imageGallery: 'Bildergalerie',
        dir_ltr: 'Links nach rechts',
        dir_rtl: 'Rechts nach links',
        mention: 'Erwähnen'
    },
    dialogBox: {
        linkBox: {
            title: 'Link einfügen',
            url: 'Link-URL',
            text: 'Link-Text',
            newWindowCheck: 'In neuem Fenster anzeigen',
            downloadLinkCheck: 'Download-Link',
            bookmark: 'Lesezeichen'
        },
        mathBox: {
            title: 'Mathematik',
            inputLabel: 'Mathematische Notation',
            fontSizeLabel: 'Schriftgröße',
            previewLabel: 'Vorschau'
        },
        imageBox: {
            title: 'Bild einfügen',
            file: 'Datei auswählen',
            url: 'Bild-URL',
            altText: 'Alternativer Text'
        },
        videoBox: {
            title: 'Video einfügen',
            file: 'Datei auswählen',
            url: 'Video-URL, YouTube/Vimeo'
        },
        audioBox: {
            title: 'Audio einfügen',
            file: 'Datei auswählen',
            url: 'Audio-URL'
        },
        browser: {
            tags: 'Stichworte',
            search: 'Suche',
        },
        caption: 'Beschreibung eingeben',
        close: 'Schließen',
        submitButton: 'Übernehmen',
        revertButton: 'Rückgängig',
        proportion: 'Seitenverhältnis beibehalten',
        basic: 'Standard',
        left: 'Links',
        right: 'Rechts',
        center: 'Zentriert',
        width: 'Breite',
        height: 'Höhe',
        size: 'Größe',
        ratio: 'Verhältnis'
    },
    controller: {
        edit: 'Bearbeiten',
        unlink: 'Link entfernen',
        remove: 'Löschen',
        insertRowAbove: 'Zeile oberhalb einfügen',
        insertRowBelow: 'Zeile unterhalb einfügen',
        deleteRow: 'Zeile löschen',
        insertColumnBefore: 'Spalte links einfügen',
        insertColumnAfter: 'Spalte rechts einfügen',
        deleteColumn: 'Spalte löschen',
        fixedColumnWidth: 'Feste Spaltenbreite',
        resize100: 'Zoom 100%',
        resize75: 'Zoom 75%',
        resize50: 'Zoom 50%',
        resize25: 'Zoom 25%',
        autoSize: 'Automatische Größenanpassung',
        mirrorHorizontal: 'Horizontal spiegeln',
        mirrorVertical: 'Vertikal spiegeln',
        rotateLeft: 'Nach links drehen',
        rotateRight: 'Nach rechts drehen',
        maxSize: 'Maximale Größe',
        minSize: 'Mindestgröße',
        tableHeader: 'Tabellenüberschrift',
        mergeCells: 'Zellen verbinden',
        splitCells: 'Zellen teilen',
        HorizontalSplit: 'Horizontal teilen',
        VerticalSplit: 'Vertikal teilen'
    },
    menu: {
        spaced: 'Buchstabenabstand',
        bordered: 'Umrandet',
        neon: 'Neon',
        translucent: 'Durchscheinend',
        shadow: 'Schatten',
        code: 'Quellcode'
    }

[dballiet]

Thank you. I should have explained the problem, maybe there are other ways to solve it as well. Basically, if you highlight text that is the same size, there’s no way to see what the size is. So if you want to decrease or increase it, you have to guess at what it is. We could either have a button to increase / decrease by 1 font size, or if we knew what it was in the toolbar, that would help and we could select the next 1 up or down. Even better yet, if there was a way to automatically size the text to fit in a predefined box, that would be PURE GOLD. That way it would never overflow the size, which in my case it’s a letter printout so I could keep it on 1 page.