Inserting Html always inserts at start of editor. Not at cursor. And embedding video dynamically does not work

[Fergus]

Hi,

I am trying to implement a button in the rich text editor to insert a video.

When i use command.inserthtml it inserts it at the beginning and not where the cursor is. Try inserting between the 2 existing lines.

And also when i insert the code using command.inserthtml the video does not work. It shows "browser does not support the video tag".

But if i insert the video code directly into the code window in the rich text editor it works fine.

   

   

  Your browser does not support the video tag. 

  

Full page code here

@page "/testgeneral"

@using Syncfusion.Blazor.RichTextEditor




   

        

       

           

           

           

           

Rich Text Editor

Get started Quick Toolbar

       

   

🎦




   

       

       

       

           

            Insert

       

   




@code {

public string VideoLink = "";

SfDialog VideoWindow;

SfRichTextEditor RTE1;

private object[] Tools = new object[] {

        "Bold", "Italic", "Underline", "StrikeThrough", "FontSize", "FontColor", "BackgroundColor", '|',

        "Formats", "Alignments", "OrderedList", "UnorderedList",

        "Outdent", "Indent", "|",

        "CreateTable", "CreateLink", "Image", new ToolsCollection { tooltipText = "Insert Video", template = "#custom" }, "|", "Print",

        "SourceCode", "|", "Undo", "Redo"

    };




public class ToolsCollection

{

    public string tooltipText { get; set; }

    public string template { get; set; }

}




public void ClickHandler()

{

    VideoWindow.Show();

    //Perform your action here

}




protected async Task InsertVideo()

{

    await this.RTE1.ExecuteCommand(CommandName.InsertHTML, $"




    //await this.RTE1.ExecuteCommand(CommandName.InsertHTML, "




}

}

Thanks

[Fergus]

I can't seem to get the code to format correctly.

I am using <code> and </code>

Is that correct?

[Daniel Salyi]

sailing in the same boat, mate.

But I even know less code than you do!

It would be lovely if you could post your project or some more code, once you figure it out! 

what I learned so far and could help you as well:

https://github.com/biati-digital/glightbox

This is a video player, which plays in a picture:

<!-- Video -->
<a rel='nofollow' href="https://vimeo.com/115041822" class="glightbox2">
    <img src="small.jpg" alt="image">

An idea solution would be to just insert a picture and reference it, then the script makes the hard job!

<iframe> is also a lovely solution in my oppinion, but I don't know how to insert any of this with the editor. I tried with the source code, but it just deletes it.
But, I reckon, I would just need the this.InsertHTML("") command, how do I get there? Still don't know.

[Fergus]

Hi,

I have got a little further on this.

Add EnableHtmlSanitizer="false" to the rich text editor to allow external sites.

And i am using the below code.

<code>

          var VideoLink = "https://youtu.be/TSSPDwAQLXs";

          var link = "https://www.youtube-nocookie.com/embed/" + VideoLink.Substring(VideoLink.LastIndexOf("/"));

          var str = String.Format("<iframe class=\"m-3\" width={0} height={1} src={2} frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "320", "240", link);

        

          this.RTE1.ExecuteCommand(CommandName.InsertHTML, str);

</code>

Issues i am facing are.

1. Cannot drag or move video once inserted.

2. I have to refocus the editor just before i click a button to insert html. It does not remember where i was focused. Whereas inserting and image does remember.

[Indrajith Srinivasan]

Hi Fergus,

Greetings from Syncfusion support, 

We have validated the reported query and have considered “Couldn't insert a video using InsertHtml execute command“ as a bug from our end and the fix will be included with our Volume 2 SP 1 release.  

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/16577/ 

 

We are currently validating your other reported queries and will update you with further details by 31^st July.

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Fergus,

Good day to you,

Query : “When i use command.inserthtml it inserts it at the beginning and not where the cursor is. Try inserting between the 2 existing lines.” 

 

When the Rich Text Editor is focused out, the mouse pointer will be focused to initial by default. In order to resolve this, use the JsInterop concept in blazor to save the selection with blur event and restore the selection when inserting the anchor links using the InsertHtml ExecuteCommand. We have prepared a sample that tries to meet your requirements.

Sample: https://www.syncfusion.com/downloads/support/forum/156491/ze/RichTextEditor_InsertHtml762301682  

 

Regards, 

Indrajith 

[Fergus]

Hi,

Thank you for the update.

Unfortunately it does not work in my project. It also will not work in your example if you upgrade to the latest syncfusion blazor package.

Your sample uses 18.1.0.59 which works. I am using 18.2.0.47.

And in the updated version it throws an error. "TypeError: sf.richtexteditor.NodeSelection is not a constructor" from the created function in the js file.

I wonder could you provide updated code for latest version.

Thanks

[Indrajith Srinivasan]

Hi Fergus,

We have validated your reported query and able to reproduce the reported issue with the latest version. We suggest you get the nodeSelection like below to resolve the reported issue. Refer the below code blocks for reference. 

 

Custom.js file 

 

 

window.Richtexteditor = { 

    … 

    rteObj: null, 

    saveSelection: null, 

    created: function () { 

        window.Richtexteditor.rteObj = document.getElementById('RteDefault').ej2_instances[0]; 

        window.Richtexteditor.selection = window.Richtexteditor.rteObj.formatter.editorManager.nodeSelection;         

        … 

    } 

    ... 

}; 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Fergus, 

 

Thanks for your patience,

 

We have resolved the reported issue “Couldn't insert a video using InsertHtml execute command” in Rich Text Editor with the Nuget package version 18.2.56. 

 

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.56/?type=all#richtexteditor 

Can you please upgrade your package to this version to resolve the reported issue? 

 

Regards 

Indrajith 

[Fergus]

Hi,

Since updating to volume 3 this code does not work anymore.

I tried changing ejinstance[0] to blazor__instance but it still does not work. Can you tell me what changed in the upgrade so i can make this work again.

Now if the editor is not focused when you insert the html the page throws an error and it inserts the video into the Dialog i have open.

window.Richtexteditor = {

    selection: null,

    ranges: null,

    RTE1: null,

    saveSelection: null,

    created: function () {

        //window.Richtexteditor.selection = new sf.richtexteditor.NodeSelection();

        window.Richtexteditor.RTE1 = document.getElementById('defaultRTE').blazor__instance;

        window.Richtexteditor.selection = window.Richtexteditor.RTE1.formatter.editorManager.nodeSelection;  

        window.Richtexteditor.RTE1.blur = function () {

            window.Richtexteditor.ranges = window.Richtexteditor.selection.getRange(document);

            window.Richtexteditor.saveSelection = window.Richtexteditor.selection.save(window.Richtexteditor.ranges, document);

        };

    },

    onfocusout: function () {

        if (window.Richtexteditor.saveSelection) {

            window.Richtexteditor.saveSelection.restore();

        }

    }

};

[Indrajith Srinivasan]

Hi Fergus,  

  

Good day to you,  

  

We have validated your reported query. With the latest version insertHTML executeComamnd, is not working properly. We have considered “InsertHtml executeCommand breaks with latest versions” as a bug from our end and logged the report for the same and the fix will be included with our 2020 Volume 3 SP1 release.  

  

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/19257/   

  

Regards,  

Indrajith 

[Indrajith Srinivasan]

Hi Fergus,  

  

Thanks for your patience,  

  

We have resolved the reported issue “InsertHtml executeCommand breaks with latest versions” with the package version 18.3.47. We have provided two new methods SaveSelection() and RestoreSelection() in Rich Text Editor. You can save the selection in the Blur event and restore the selection before inserting the video in the editor. 

  

Can you please upgrade your package to this version to use the new methods provided ?  

  

Regards,  

Indrajith