We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom toolbar with Insert Button

Thread ID:

Created:

Updated:

Platform:

Replies:

117260 Sep 18,2014 04:51 AM UTC Sep 19,2014 03:15 PM UTC ASP.NET MVC 2
loading
Tags: RichTextEditor
duyvt
Asked On September 18, 2014 04:51 AM UTC

Hi all,

I added an Insert button to toolbar of @Html.EJ().RTE("htmlEditor"). When I click that button, I want to insert text to Rich Text Area at place of cursor. How can I do that? Please help me!

Thanks all,

duyvt
Replied On September 18, 2014 06:34 AM UTC

I also want to add an icon to toolbar of RTE ?

Kasithangam C [Syncfusion]
Replied On September 19, 2014 03:15 PM UTC

Hi duyvt,

Thanks for using Syncfusion Products.

Query: I added an Insert button to toolbar of @Html.EJ().RTE("htmlEditor"). When I click that button, I want to insert text to Rich Text Area at place of cursor. How can I do that?

We have achieved your requirement (“To add the text in RTE text area”).on clicking the AddText button in the RTE toolbar , the dialog box will be open for entering the text. To insert the text, we have to create the object for RTE in “allowText()” function and by using the object we have to call “executeCommand” method.In that, you can add the text in RTE and please find the below code snippet,

<script>

    var rteObj;

    function allowText() {

        rteObj = $("#rteSample").data("ejRTE");

        if (this._id == "src_insert") {

            rteObj.executeCommand("inserthtml", $("#srcCode").val()); @*add the text in RTE*@

        }

       

    }

</script>

Also, we have prepared the sample based on this and it available under the following location,

Sample Location: Sample

I also want to add an icon to toolbar of RTE ?

We can add the no of custom tool in the RTE toolbar as like add the insert button  in the previous query.As the same way,you can add the icon in the RTE toolbar and please find the below code snippet for adding the icon in RTE toolbar,

[index.cshtml]

@Html.EJ().RTE("rteSample"). Tools(tool => tool.CustomTool(custom =>{

           custom.Name("").Tooltip("Arrow icon").Css("icon").Add();

      }))

And in the style section, you can use specify the icon location for the specified class “icon” as shown below,

[index.cshtml]

<style>

    .icon {

        background-image:url("../images/down.png");

        height:24px;

        width:17px;

    }

<style>

We have achieved this in the above attached sample and please let us know if you have further queries.

Regards,

Kasithangam


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;