Bold,Italic,Paste,Insert on cloned control

[Mahesh Machina]

I have a Rich text editor control inside div with these options.

var richTextOptions = new[] { "Bold", "Italic", "Underline",

            "Formats", "-", "Alignments", "OrderedList", "UnorderedList","Image",

            "CreateLink","Remove" };

When i cloned the div i am getting another Rich Text Editor. Is it possible to apply richTextOptions to the cloned control

[Yaswin Vikhaash Rajaretenam]

Hi Mahesh Machina,

I have thoroughly reviewed your query and found that while cloning the Rich Text Editor, only the UI elements are being duplicated, but not the functionality. To ensure both the UI and functional aspects of the cloned Rich Text Editor work correctly, you will need to re-render a new instance of the Rich Text Editor for the cloned element.

You can achieve this by reusing the same richTextOptions variable that was used to render the original Rich Text Editor, applying it to the newly created instance. This will ensure that both the original and cloned editors have the same toolbar options and functionality.

Regards,

Yaswin Vikhaash

[Mahesh Machina]

Hi Yaswin Vikhaash,

Please provide a sample or developer guide for below

<ejs-richtexteditor id="delNoteRTE" actionBegin="pasteImageInRTE" imageUploadSuccess="onImageUploadSuccess">

    <e-richtexteditor-insertimagesettings display="break" saveUrl="/Home/SaveImage" path="../Uploads/" maxWidth="500px" maxHeight="500px"></e-richtexteditor-insertimagesettings>

    <e-content-template>

    </e-content-template>

    <e-richtexteditor-format width="500" height="300px" ></e-richtexteditor-format>

    <e-richtexteditor-toolbarsettings type="Expand" enableFloating="false" items="@richTextOptions"></e-richtexteditor-toolbarsettings>

</ejs-richtexteditor>

[Yaswin Vikhaash Rajaretenam]

Hi Mahesh Machina,

We have provided a sample based on the code you shared. Please find the attached sample below for your reference.

Regards,

Yaswin Vikhaash

Attachment: asp_core_sample_RTE_8dc9b5b8.zip

[Mahesh Machina]

In the provided sample there is no logic to render Rich Text editor dynamically.

Please let me know if our requirement is not clear. Assume we have  a button, on every click of this button we want to generate new rich text editor and append it to DOM.

The below logic is creating UI but Bold/Italic features not working

 var editor = new ej.richtexteditor.RichTextEditor({

     toolbarSettings: {

         items: ["Bold", "Italic", "Underline","Formats", "-", "Alignments", "OrderedList", "UnorderedList", "Image","Remove"]

     }

 });

[Vinothkumar Yuvaraj]

Hi Mahesh Machina,

We have reviewed your query regarding dynamically rendering the Rich Text Editor and have created a sample demonstrating how to add a new Rich Text Editor instance dynamically. In the attached sample, we dynamically add a Rich Text Editor each time the button is clicked. Please refer to the following code and the attached sample for your reference.

Code Snippet:

<div class="control-section">

    <button onclick="btnClick()">Add Rich Text Editor</button>

    <div id="rich-text-editor"></div>

</div>

<script>

    var count = 1;

    function btnClick() {

        var element = document.getElementById("rich-text-editor");

        var rteElement = document.createElement("div");

        element.appendChild(rteElement);

        var editor = new ej.richtexteditor.RichTextEditor({

            toolbarSettings: {

                items: ["Bold", "Italic", "Underline", "Formats", "-", "Alignments", "OrderedList", "UnorderedList", "Image", "Remove"]

            },

            id:("richTextEditor_" + count++)

        });

        editor.appendTo(rteElement);

    }

</script>

Video Gif:

Note: Each Rich Text Editor instance must have a unique ID to ensure proper functionality.

Attachment: asp_core_sample_RTE_(3)_639d9c07.zip