Change default font family in Vue Rich text editor component
11 Jun 202411 minutes to read
By using default property, you can change the default font-family of the Rich Text Editor. To change the font-family of the Rich Text Editor content while loading, we need to give the font-family in the style section with the help of cssClass property.
<template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<ejs-richtexteditor ref="rteObj" :fontFamily="fontFamily" :cssClass="cssClass"
:toolbarSettings="toolbarSettings">
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best
user experience to create and update the content. Users can format their content using standard toolbar
commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides IFRAME and DIV modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
</ul>
</ejs-richtexteditor>
</div>
</div>
</div>
<style>
.customClass .e-rte-content .e-content {
/* to get the desired font on intially*/
font-family: "Noto Sans";
}
</style>
</div>
</template>
<script setup>
import { provide } from 'vue';
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";
const fontFamily = {
default: "Noto Sans", // to define default font-family
items: [
{ text: "Segoe UI", value: "Segoe UI", class: "e-segoe-ui", command: "Font", subCommand: "FontName" },
{ text: "Noto Sans", value: "Noto Sans", command: "Font", subCommand: "FontName" },
{ text: "Impact", value: "Impact,Charcoal,sans-serif", class: "e-impact", command: "Font", subCommand: "FontName" },
{ text: "Tahoma", value: "Tahoma,Geneva,sans-serif", class: "e-tahoma", command: "Font", subCommand: "FontName" },
]
};
const toolbarSettings = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
};
const cssClass = "customClass";
provide('richtexteditor', [Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar]);
</script>
<style>@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style><template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<ejs-richtexteditor ref="rteObj" :fontFamily="fontFamily" :cssClass="cssClass"
:toolbarSettings="toolbarSettings">
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best
user experience to create and update the content. Users can format their content using standard toolbar
commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides IFRAME and DIV modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
</ul>
</ejs-richtexteditor>
</div>
</div>
</div>
<style>
.customClass .e-rte-content .e-content {
/* to get the desired font on intially*/
font-family: "Noto Sans";
}
</style>
</div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent
},
data: function () {
return {
fontFamily: {
default: "Noto Sans", // to define default font-family
items: [
{ text: "Segoe UI", value: "Segoe UI", class: "e-segoe-ui", command: "Font", subCommand: "FontName" },
{ text: "Noto Sans", value: "Noto Sans", command: "Font", subCommand: "FontName" },
{ text: "Impact", value: "Impact,Charcoal,sans-serif", class: "e-impact", command: "Font", subCommand: "FontName" },
{ text: "Tahoma", value: "Tahoma,Geneva,sans-serif", class: "e-tahoma", command: "Font", subCommand: "FontName" },
]
},
toolbarSettings: {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
},
cssClass: "customClass",
}
},
provide: {
richtexteditor: [Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>