RadEditor Right to left

5 posts, 0 answers
  1. Neda
    Neda avatar
    25 posts
    Member since:
    Oct 2011

    Posted 30 Oct 2011 Link to this post

    hi
     I am trying to use both rtl anf ltr commands in my editor , i have search forum alot , and finally i found a code that solved the problem a little , but i want to modify this code , for example like MSWord when i want to write Farsi direction sets to rtl , and when i want to write latin direction sets to ltr , but with this code i just can set direction rtl or ltr,not both.

    Thanks

    -----------------------------------------------------------------------------------------------------------------

                                     <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableScriptCombine="False" />
                                        <telerik:RadEditor ID="txtContent" runat="server" Width="100%" Skin="Telerik" EnableResize="False"
                                            ToolsFile="~/admin/Rad-Editor/Tools.xml" ExternalDialogsPath="~/RadControls/Editor/EditorDialogs"
                                            ToolbarMode="Default" StripFormattingOnPaste="MSWordNoFonts" ContentFilters="None"
                                            AllowScripts="True" ImageManager-MaxUploadFileSize="20971520" DocumentManager-MaxUploadFileSize="20971520"
                                            FlashManager-MaxUploadFileSize="20971520" MediaManager-MaxUploadFileSize="20971520">
                                        </telerik:RadEditor>

                                        <script type="text/javascript">
                                                                                Telerik.Web.UI.Editor.CommandList["RTL"] = function(commandName, editor, args) {
                                                                                var oElem = editor.getSelectedElement();
                                                                                      
                                                                                if ( oElem && oElem.tagName == "P") {
                                                                                    oElem = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>"
                                                                                        oElem.setAttribute("dir", "rtl");
                                                                                        oElem.style.textAlign = "right";
                                                                                   }
                                                                                     
                                                                                   else if (editor.getSelectionHtml())//There is some selection
                                                                                    {

                                                                                        var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";
                                                                                        editor.pasteHtml(toPaste);
                                                                                    }
                                                                                 
                                                                                }

                                                                                Telerik.Web.UI.Editor.CommandList["LTR"] = function(commandName, editor, args) {
                                                                                    var oElem = editor.getSelectedElement();

                                                                                    if ( oElem && oElem.tagName == "P") {
                                                                                        oElem = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>"
                                                                                        oElem.setAttribute("dir", "ltr");
                                                                                        oElem.style.textAlign = "left";
                                                                                    }

                                                                                    else if (editor.getSelectionHtml())//There is some selection
                                                                                    {

                                                                                        var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";
                                                                                        editor.pasteHtml(toPaste);
                                                                                    }

                                                                                 
                                                                                } 
  2. Rumen
    Admin
    Rumen avatar
    14372 posts

    Posted 31 Oct 2011 Link to this post

    Hello Neda,

    RadEditor does not offer the requested Right-To-Left and Left-To-Right buttons out-of-the box and it is up to the developer working with the control to enhance the provided in the forums sample code.

    Another implementation of these commands could be found in the following forum:
    http://www.telerik.com/community/forums/aspnet-ajax/editor/extra-div-gets-created-in-radhtmlfield-on-publishing-page.aspx

    The custom commands are named MOSSRightToLeft and MOSSLeftToRight

    <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["RTL"] = function (commandName, editor, args) {
            Telerk_MOSS_SetDirectionOfSelection(editor, "rtl");
     
        }
     
        Telerik.Web.UI.Editor.CommandList["LTR"] = function (commandName, editor, args) {
            Telerk_MOSS_SetDirectionOfSelection(editor, "ltr");
     
     
        }
     
        function Telerk_MOSS_SetDirectionOfSelection(editor, strDirection) {
            var rngSelection = editor.getSelection();
            var strTagNames;
            strTagNames = "|H1|H2|H3|H4|H5|H6|P|PRE|TD|DIV|BLOCKQUOTE|DT|DD|TABLE|HR|IMG|BODY|TR|UL|OL|";
     
            if (rngSelection.getParentElement()) {
                var elemSelectionParent = rngSelection.getParentElement();
                while ((elemSelectionParent != null) && (strTagNames.indexOf("|" + elemSelectionParent.tagName + "|") == -1)) {
                    elemSelectionParent = elemSelectionParent.parentNode;
                }
     
                if (elemSelectionParent) {
                    Telerik_MOSS_SetDirectionOnElement(elemSelectionParent, strDirection);
                }
            }
        }
     
        function Telerik_MOSS_SetDirectionOnElement(element, strDirection) {
            if ("ltr" == strDirection) {
                element.dir = "ltr";
                element.align = "left";
            }
     
            else if ("rtl" == strDirection) {
                element.dir = "rtl";
                element.align = "right";
            }
        }
    </script>


    Kind regards,
    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
  3. Neda
    Neda avatar
    25 posts
    Member since:
    Oct 2011

    Posted 01 Nov 2011 Link to this post

    hi Rumen

    Thanks a lot for the reply ,it worked.

    Best Regards NeDa
  4. Neda
    Neda avatar
    25 posts
    Member since:
    Oct 2011

    Posted 02 Nov 2011 Link to this post

    Hi Rumen

    thanks for the previous reply , it worked , but the problem is when i want to copy this script to a java file an link the path in my page , it doesnot work , but when i paste it in my page it work , i mean can we use it through external java file....??!!

    Thanks alot

    -------------------------------------------------


    <script pin  src="Scripts/JScript.js" type="text/javascript"></script>

    <telerik:RadScriptManager ID="ScripttxtContent" runat="server" EnableScriptCombine="False" />
                                        <telerik:RadEditor ID="txtContent" runat="server" Width="100%" Skin="Telerik" EnableResize="False"
                                            ToolsFile="~/admin/Rad-Editor/Tools.xml" ExternalDialogsPath="~/RadControls/Editor/EditorDialogs"
                                            ToolbarMode="Default" StripFormattingOnPaste="MSWordNoFonts" ContentFilters="None"
                                            AllowScripts="True" ImageManager-MaxUploadFileSize="20971520" DocumentManager-MaxUploadFileSize="20971520"
                                            FlashManager-MaxUploadFileSize="20971520" MediaManager-MaxUploadFileSize="20971520"
                                            EnableTheming="False">
                                        </telerik:RadEditor>

  5. Rumen
    Admin
    Rumen avatar
    14372 posts

    Posted 02 Nov 2011 Link to this post

    Hello Neda,

    Put the script tag under the RadEditor's declaration. This should fix the problem.

    <telerik:RadEditor ID="txtContent" runat="server" ...></telerik:RadEditor>
    <script src="Scripts/JScript.js" type="text/javascript"></script>

    Best regards,
    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
Back to Top