This is a migrated thread and some comments may be shown as answers.
RadEditor video content shows through media manager dialog
4 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 20 Sep 2011, 03:51 PM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 20 Sep 2011, 03:59 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Max
Top achievements
Rank 1
answered on 20 Sep 2011, 04:11 PM
Worked perfectly. Thank you
0
Abhishek
Top achievements
Rank 1
answered on 29 Jul 2020, 09:12 AM

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);
    }

0
Rumen
Telerik team
answered on 30 Jul 2020, 08:27 AM

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

Asked by
Max
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Max
Top achievements
Rank 1
Abhishek
Top achievements
Rank 1
Share this question
or