RadEditor video content shows through media manager dialog

[Max]

If I have a video file added in the radeditor and bring up Media Manager to insert new video, existing video bleeds through the Media Manager's background. I have 3 images attached.

 Does anyone knows why this might be happening and how to fix it?
Thank you.

[Rumen]

Hello Max,

This is a browser behavior. The HTML based dialogs of RadEditor are positioned below the Windowed flash and media objects, because the windowed objects have larger z-index.

If you don't like this behavior you can configure the editor to use the browser modal dialogs instead of RadWindow using the following code:

<script type="text/javascript">
function OnClientLoad(editor)
{
editor.set_useClassicDialogs(true);
}
</script>
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>

You can find more information in this KB article: Using browser modal dialog instead of RadWindow.


All the best,
Rumen
the Telerik team

[Max]

Worked perfectly. Thank you

[Abhishek]

I'm facing a strange issue.

div.firstChild.childNodes[0] is coming as undefined in case of Mozilla & Edge. However it is working in Chrome & IE. 
Below is the JS code snippet...
if (commandName == "MediaManager") {
        var div = document.createElement("DIV");
        Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
        //obtain the video file src
        if (!$telerik.isIE) {
            videoUrl = div.firstChild.childNodes[0].value;
        }
        else {
            videoUrl = div.firstChild.URL;

        }
        var video = "<video src=" + videoUrl + " controls=\"controls\"></video>";
        //Create and insert a video tag with the src pointing to the selected in the Media dialog file
        args.set_value(video);
    }

[Rumen]

Hi Abhishek,

I tested the code below under Chrome, Edge Chromium, Edge (Classic) and Firefox and verified that it works as expected in all browsers:

        <asp:ScriptManager runat="server" />
        <script type="text/javascript">
            function OnClientPasteHtml(sender, args) {
                var commandName = args.get_commandName();
                //obtain the original content from the Media manager so that we can later obtain the path to of the selected video file
                var value = args.get_value();
                var videoUrl;

                if (commandName == "MediaManager") {
                    var div = document.createElement("DIV");
                    Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
                    //obtain the video file src
                    if (!$telerik.isIE) {
                        videoUrl = div.firstChild.childNodes[0].value;
                    }
                    else {
                        videoUrl = div.firstChild.URL;

                    }

                    //Create and insert a video tag with the src pointing to the selected in the Media dialog file
                    args.set_value("<video src=" + videoUrl + " controls=\"controls\" />");
                }
            }
        </script>
        <telerik:RadEditor OnClientPasteHtml="OnClientPasteHtml" runat="server" ID="RadEditor1">
            <MediaManager ViewPaths="~/images" UploadPaths="~/images" SearchPatterns="*.mp4" />
        </telerik:RadEditor>
        <script type="text/javascript">
            //the code below is needed to disable the built-in MozillaKeepFlash content filter of RadEditor, which transforms the object/embed tags to an image in Firefox
            Telerik.Web.UI.Editor.MozillaKeepFlash.prototype.getHtmlContent = function (argument) {
                return argument;
            }

            Telerik.Web.UI.Editor.MozillaKeepFlash.prototype.getDesignContent = function (argument) {
                return argument;
            }
        </script>

If you get an error my advice is to place a debugger and see what is returned by the args.get_value() method which will show you how to extract programmatically the video URL - you can use DOM or a reg expression to extract the video path. This way you will be able to solve the error.

 

Regards,
Rumen
Progress Telerik