Uneditable text desired with font selection allowed

8 posts, 0 answers
  1. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 17 Aug 2011 Link to this post

    Hello,
    I am using a RadEditor to allow the user to create a page, with some placeholders present for later substitution for real data.  For example, the user could be allowed to insert via a custom tool, a place holder for their project name, like so:

    Project Name: [[ProjectName]]

    In this example, the "[[ProjectName]]" is a placeholder for the project name data field that will be filled in with real data at a later time.  When the user inserts a placeholder, I am pasting html for a <table> tag into the editor content area, with the "[[ProjectName]]" text in the single cell of this table.  I would like the text content uneditable, so that the user cannot change or delete this text.  However, I would like to allow the user to change the font, size, and font style of the text.  This would allow the processor that completes the page to know what font, size, and style with which to fill in the real project name.

    I have tried various combinations of the "contenteditable" and "unselectable" style attributes to no avail.  It seems that whenever I succeed in making the text uneditable, it also does not allow the font to be changed.

    Maybe smarter heads can prevail?  Thanks for any help you can give.

    Update: I forgot to mention, I am using Telerik RadControls for ASP.NET AJAX Q1 2011 SP1, and Visual Studio 2008, and .NET Framework 3.5.

    Regards,
    Steve Harding
  2. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 19 Aug 2011 Link to this post

    Anybody?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 22 Aug 2011 Link to this post

    Hello Steve,

    You can try to implement your scenario using the OnClientSelectionChange event which is fired when clicking in the content area. Using the editor.getSelection().getParentElement() method you can inspect the currently selected element and according to its properties ID, attributes to enable or disable toolbar buttons.

    function OnClientSelectionChange(editor, args) {
    var selElem = editor.getSelection().getParentElement(); //return the currently selected object in the content area
    var oTool = editor.getToolByName("InsertRowAbove"); //get a reference to the custom tool
    if (selElem.tagName == "TD") //if the selected element is of image type, make the tool's icon active
    {
    oTool.setState(0); //Enable Tool Icon
    }
    else {
    oTool.setState(-1); //Disable Tool Icon
    }
    }


    Best wishes,
    Rumen
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  5. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 22 Aug 2011 Link to this post

    Thanks for the reply.  I had not thought of this approach before.  I will try it within the next week or so as I wrap up some other aspects of my project.  Thanks again!

    Steve
  6. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 29 Aug 2011 Link to this post

    I am still working on this issue, and I am getting closer to the behavior I want, but I need some further assistance.

    My current solution is to use css classes that contain a "content" attribute.  For example, in my custom EditorContentArea.css file, I have the following:

    .SubmittalField7:before

    {

     

        content:"[[Section Notes";

     

    }

    When the user inserts a "section notes" placeholder from the custom tool, the html that is pasted into the editor's content area consists of:

    <table title="SubmittalField$7" style="display: inline; vertical-align: middle;">
        <tbody>
            <tr>
                <td title="SubmittalField$7"><span title="SubmittalField$7" class="SubmittalField7">]]</span></td>
            </tr>
        </tbody>
    </table>

    This presents "[[Section Notes]]" into the content area, where "[[Section Notes" is part of the style and "]]" is the actual text within the span, within the td.  I had to do it this way so that when the user clicked in the span, it would visually select the entire span.  If there was no text, then the span was not visually selected.  I am using this css style so that the user cannot edit or delete the words "Section Notes".

    In any case, I have the following client-side function, similar to what you suggested previously:

    var inSelectionChange = false;
    function OnClientSelectionChange(editor, args) {
        if (inSelectionChange == false) {
            var selElem = editor.getSelection().getParentElement(); //return the currently selected object in the content area
            if ((selElem.tagName == "FONT" || selElem.tagName == "SPAN" ||) && selElem.title.substr(0, 15) == "SubmittalField$")
            {
                inSelectionChange = true;
                editor.selectElement(selElem);
                inSelectionChange = false;
            }
        }
    }

    For the most part, this works fairly well.  When the user clicks anywhere on "[[Section Notes]]", it selects the entire span.  Because it is a <span> that is selected, all of the tools I wish to be enabled are correctly enabled (specifically, Bold, Italic, Underline, StrikeThrough, ForeColor, BackColor, FontName and RealFontSize).

    The problem, however, is if I attempt to change the font, size, color, etc., it only visually changes the "]]", instead of changing the entire "[[Section Notes]]".  If I flip over to HTML mode and then back to Design mode, then it fixes the problem and the entire "[[Section Notes]]" appears correctly.

    Can you tell me what is happening when I flip to HTML mode and back, and also suggest what I can do to force the same code to be executed?

    Thanks.






  7. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 31 Aug 2011 Link to this post

    Okay, I have tried several different approaches, and nothing worked very well.  Eventually, I stumbled upon this forum post:

    http://www.telerik.com/community/forums/aspnet-ajax/editor/non-editable-areas-in-firefox.aspx


    I decided to give this a try, and it works very well in Internet Explorer, but not well at all in FireFox.  Here is my client-side code:
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("onclick", EnableDisableEditing);
        editor.attachEventHandler("onkeydown", EnableDisableEditing);
        editor.attachEventHandler("onkeyup", EnableDisableEditing);
      
        function EnableDisableEditing(e) {
            var element = GetSelectedFieldSpan(editor);
            if (element != null) {
      
                editor.selectElement(element);
                editor.set_editable(false);
                   
                if (!document.all) {
                    e.preventDefault();
                    e.preventBubble();
                    e.stopPropagation();
                }
                else {
                    e.returnValue = false;
                    e.cancelBubble = true;
                }
                return false;
            }
            else {
                editor.set_editable(true);
            }
        }
    }
      
      
    function GetSelectedFieldSpan(editor) {
            var selElem = editor.getSelection().getParentElement();
            // Try to find the submittal field <span> that is the closest parent element of what is selected.
            while (selElem != null) {
                if ((selElem.tagName == "FONT" || selElem.tagName == "SPAN") && selElem.title.substr(0, 15) == "SubmittalField$") {
                    break;
                }
                else {
                    // See if parent is the span.
                    selElem = selElem.parentElement;
                }
            }
            return selElem;
    }

    Recall that when the user selects one of our field placeholders, the following HTML (for example) is pasted into the editor's content area:

    <table style="display: inline; vertical-align: middle;">
        <tbody>
            <tr>
                <td><span title="SubmittalField$7">[[Section Notes]]</span></td>
            </tr>
        </tbody>
    </table>

    I am no longer using CSS classes in my solution.  Also, due to the bold and italic tools, it is possible for the <span> tag to contain <strong> or <em> tags within.  This is why I am looking for the parent <span> tag that has a title starting with "SubmittalField$".

    This solution works great in IE.  Whenever the user clicks on any of the text within the <span>, the entire text is selected, keystrokes are disallowed, and yet the user can still click on the bold, italic, underline, forecolor, backcolor, fontname, and font size tools to select those attributes for the text within the span.

    HOWEVER, this solution does not work within FireFox.   In FF, when the user clicks on any of the text within the <span>, you see the entire text briefly selected, and then the I-beam cursor is immediately placed at the beginning of the content area, effectively unselecting what I want selected.  If I debug the client-side using Firebug and place a breakpoint within the EnableDisableEditing function and step through line by line, then it does work.  By trial and error, I have determined that if you break anywhere before the call to editor.set_editable(false), and step through, then it works.  If you let editor.set_editable(false) get executed before breaking, then it does not work. 

    Can anybody shed some light on what is happening here in Firefox?

    Thanks for any help.
  8. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 01 Sep 2011 Link to this post

    Hi Steve,

    I was able to eliminate the problem in Firefox by selecting the text and disabling the content area after a small interval of time:

    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            editor.attachEventHandler("onclick", EnableDisableEditing);
            editor.attachEventHandler("onkeydown", EnableDisableEditing);
            editor.attachEventHandler("onkeyup", EnableDisableEditing);
     
            function EnableDisableEditing(e) {
                var element = GetSelectedFieldSpan(editor);
                if (element != null) {
                    setTimeout(function () {
                        editor.selectElement(element);
                        editor.set_editable(false);
                    }, 100);
                    if (!document.all) {
                        e.preventDefault();
                        e.preventBubble();
                        e.stopPropagation();
                    }
                    else {
                        e.returnValue = false;
                        e.cancelBubble = true;
                    }
                    return false;
                }
                else {
                    editor.set_editable(true);
                }
            }
        }
     
     
        function GetSelectedFieldSpan(editor) {
            var selElem = editor.getSelection().getParentElement();
            // Try to find the submittal field <span> that is the closest parent element of what is selected.
            while (selElem != null) {
                if ((selElem.tagName == "FONT" || selElem.tagName == "SPAN") && selElem.title.substr(0, 15) == "SubmittalField$") {
                    break;
                }
                else {
                    // See if parent is the span.
                    selElem = selElem.parentElement;
                }
            }
            return selElem;
        }
     
    </script>


    Best regards,
    Rumen
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  9. Steve
    Steve avatar
    24 posts
    Member since:
    Jun 2010

    Posted 01 Sep 2011 Link to this post

    Rumen,
    Thanks for your reply.

    I tried your suggestion, and indeed, it works on both IE and Firefox, to select and disable the <span>.  However, on Firefox, it no longer applies the attributes when the user selects bold, italic, forecolor, backcolor, etc.  I don't understand why not.

    In any case, I recently found a solution that does work, although it looks like it shouldn't work.  See my changes to the function below:

    function EnableDisableEditing(e) {
        var element = GetSelectedFieldSpan(editor);
        if (element != null) {
      
            if ($telerik.isFirefox == false) {
                editor.set_editable(false);
            }
            editor.selectElement(element);
              
            if (!document.all) {
                e.preventDefault();
                e.preventBubble();
                e.stopPropagation();
            }
            else {
                e.returnValue = false;
                e.cancelBubble = true;
            }
            return false;
        }
        else {
            editor.set_editable(true);
        }
    }

    This statement:
    if ($telerik.isFirefox == false) {
    editor.set_editable(false);
    }

    looks as if it should not disable the editor on Firefox when the span is selected.  But for some reason, this works on both Firefox and IE.  I don't understand it, but it works, so I'm leaving it in.  Any comments why this would work?

    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017