Category / Section
How can I make an AJAX call to save data/html of RTE
1 min read
Description
We can use getHtml method to get the HTML string from the RTE and get the content as string using getText method in client side and pass the value to the controller using AJAX post call.
Solution
Render the RTE as follows
CSHTML
@{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<p>
Description:
The Rich Text Editor (RTE) control is an easy to render in client side. Customer easy to edit the contents and get the HTML content for the displayed content. A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered in the text area.
</p>).Render();}
@Html.EJ().Button("button1").Text("Store Text").ShowRoundedCorner(true).Size(ButtonSize.Small).ClientSideEvents(e => e.Click("storeText"))
@Html.EJ().Button("button2").Text("Store HTML").ShowRoundedCorner(true).Size(ButtonSize.Small).ClientSideEvents(e => e.Click("storeHTML"))
Upon clicking to the button “Store Text”, the corresponding storeText function will be triggered, this get the text from RTE and use AJAX POST to pass the text value of RTE to controller’s post action.
Javascript
function storeText(args) {
rteobj = $("#rteSample").ejRTE("instance");
rteText = rteobj.getText();
store(rteText);
}
Upon clicking to the button “Store HTML”, the corresponding storeHTML function will be triggered, this get the HTML from RTE and use AJAX POST to pass the HTML value of RTE to controller’s post action.
Javascript
function storeHTML(args){
rteobj = $("#rteSample").ejRTE("instance");
rteHtml = rteobj.getHtml();
store(rteHtml);
}
In store function, the AJAX post call is defined as follow
Javascript
function store(value) {
$.ajax({
type: "POST",
//RichTextEditor action method will be triggered
url: "/RichTextEditor/RichTextEditor",
content: "application/json; charset=utf-8",
//RTE value send as string
dataType: "string",
data: { value: value },
success: function (d) {
}
});
}
