This section explains how to use the Syncfusion Vue Rich Text Editor component in Vue 3 application.
System requirements for Syncfusion Vue UI components
The easiest way to create a Vue application is to use the Vue CLI
. Vue CLI versions above 4.5.0
are mandatory for creating applications using Vue 3. Use the following command to uninstall older versions of the Vue CLI.
npm uninstall vue-cli -g
Use the following commands to install the latest version of Vue CLI.
npm install -g @vue/cli
npm install -g @vue/cli-init
Create a new project using the command below.
vue create quickstart
cd quickstart
Initiating a new project prompts us to choose the type of project to be used for the current application. Select the option Default (Vue 3 Preview)
from the menu.
All the available Essential JS 2 packages are published in npmjs.com
registry.
Install the Rich Text Editor
component by using the below npm command.
npm install @syncfusion/ej2-vue-richtexteditor --save
Import the needed CSS styles for the Rich Text Editor component along with dependency styles in the <script>
section of the src/App.vue
file as follows.
<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>
You have completed all the necessary configurations needed for rendering the Syncfusion Vue 3 component. Now, you are going to add the Rich Text Editor component using the following steps.
<script>
section of the src/App.vue
file.<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, Table } from "@syncfusion/ej2-vue-richtexteditor";
</script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, Table } from "@syncfusion/ej2-vue-richtexteditor";
//Component registration
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent,
}
}
<template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<div id="defaultRTE">
<ejs-richtexteditor id="default" ref="rteInstance">
<p>The Rich Text Editor component is a 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>
</ejs-richtexteditor>
</div>
</div>
</div>
</div>
</div>
</template>
src/App.vue
file with the following code.<template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<div id="defaultRTE">
<ejs-richtexteditor id="default" ref="rteInstance">
<p>The Rich Text Editor component is a 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>
</ejs-richtexteditor>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, Table } from "@syncfusion/ej2-vue-richtexteditor";
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent,
},
data: function () {
return {};
},
methods: {},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, Table],
},
};
</script>
Run the application using the following command.
npm run serve
Web server will be initiated. Open the quick start app in the browser at port localhost:8080
.
Rich Text Editor content can be added using valueTemplate property as given below
<template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<div id="defaultRTE">
<ejs-richtexteditor
id="default"
ref="rteInstance"
:valueTemplate="vueTemplate">
</ejs-richtexteditor>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
RichTextEditorComponent,
Toolbar,
Link,
Image,
HtmlEditor,
Table,
} from "@syncfusion/ej2-vue-richtexteditor";
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent,
},
data: function () {
return {
vueTemplate:
'<p>The Rich Text Editor component is a 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>',
};
},
methods: {},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, Table],
},
};
</script>