Define inline styling of content programmatically

[Alexander Bondarew | Fenêtre bv]

Hi

I'm having editor in Vue 3, and trying to reach the following behavior.
When my screen with editor created, I'd like to apply styling to the content which is not entered. The styling should be the same which is predefined on toolbar.

For example, when I type, I expect to see font Arial with red color and yellow background and 14px font size

So I don't need to select content and click toolbar

What I was trying is that on editor created callback 

let editor = this.$refs.htmlTemplateEditor.ej2Instances as RichTextEditor;

        editor.executeCommand("insertText", "");

        editor.selectAll();

        editor.executeCommand("fontSize", "72");

        editor.executeCommand("fontColor", "#4287f5");

        editor.executeCommand("fontName", Store.getters["shared/getSettings"]["defaultEmailFont"]);

        editor.focusOut()

And that didn't work

Could you give me example how to predefine style of content on init editor? All I found in doc is how to do this via css, but it's not the case for me

[Vinitha Jeyakumar]

Hi Alexander Bondarew,

Your requirement to predefine the styles of the Editor can be achieved by using the fontFamily, fontSize property and by using created event like below,

Code snippet:

<ejs-richtexteditor

            :toolbarSettings="toolbarSettings"           

            :fontFamily="fontFamily"

            :fontSize="fontSize"

            :created="created"

          >

          </ejs-richtexteditor>

data: function () {

    return {

      toolbarSettings: {

        items: [

          'FormatPainter',

          'Bold',

          'Italic',

          'Underline',

          'StrikeThrough',

          'FontName',

          'FontSize',

          'FontColor',

          'BackgroundColor',

          'LowerCase',

          'UpperCase',

          'SuperScript',

          'SubScript',

          'EmojiPicker',

          '|',

          'Formats',

          'Alignments',

          'NumberFormatList',

          'BulletFormatList',

          'Outdent',

          'Indent',

          '|',

          'CreateTable',

          'CreateLink',

          'Image',

          'Audio',

          'Video',

          'FileManager',

          '|',

          'ClearFormat',

          'Print',

          'SourceCode',

          'FullScreen',

          '|',

          'Undo',

          'Redo',

        ],

      },

      fontFamily: {

        default: 'Arial',

      },

      fontSize: {

        default: '14pt',

      },

    };

  },

  methods: {

    created() {

      document

        .getElementsByClassName('e-rte-content')[0]

        .addEventListener('keydown', function () {

          console.log('adfadfaf');

          document

            .querySelectorAll('.e-rte-content .e-content p')[0]

            .classList.add('bgColor');

        });

    },

  },

<style>

.e-richtexteditor .e-rte-content .e-content,

.e-richtexteditor .e-source-content .e-content p {

  color: #008000;

}

.bgColor {

  background-color: yellow;

}

</style>

Sample: https://stackblitz.com/edit/u9ubij-shkyfy?file=src%2FApp.vue

API Link: https://helpej2.syncfusion.com/vue/documentation/api/rich-text-editor/#fontfamily

https://helpej2.syncfusion.com/vue/documentation/api/rich-text-editor/#fontsize

Regards,

Vinitha