Prevent from adding new data into span tags

2 posts, 0 answers
  1. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 28 Jan 2014 Link to this post

    Hello,

    I added a new functionality to my editor, which adds span tags to the editor using "pastehtml".

    <span class="myTitle"></span>

    css:
    .myTitle{
        display: inline-block;
        background: transparent;
        background-image:url('images/off.png');
        background-repeat:no-repeat;   
        cursor:pointer; 
        vertical-align: middle;
        width:27px;
        height:30px
    }

    1. How can I prevent from the user to insert data (text,images, etc) into the span tags when the cursor is inside the span tag?

    2. I found out, when the cursor position is before the span tags, the element is not added to the editor.

    Thanks,

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5440 posts

    Posted 30 Jan 2014 Link to this post

    Hello Ido,

    When in an editable element, the user can modify all its children. You can try following this article and add a contentEditable="false" attribute to the spans, but this cannot be guaranteed to work: http://www.telerik.com/help/aspnet-ajax/editor-editable-and-noneditable-areas-in-editor.html. It also explains how you can try to make it unselectable with CSS.

    I am not sure I understand the second point, writing in any place should be possible in the editor, unless logic similar to the above is in effect. In case there is a condition in which your custom logic does not insert the proper span tag, then this should be debugged in that function and is not likely to stem from the editor. The pasteHtml() method should work in all cases when there is selection.
    I just tried this code and seemed to work fine on my end:
    <telerik:RadEditor ID="RadEditor1" runat="server">
    <Content>
    some content
    <span class="myTitle"></span>
    more content
    </Content>
    </telerik:RadEditor>
    <asp:TextBox ID="Textbox1" runat="server" Text="test" />
    <asp:Button ID="Button1" Text="text" OnClientClick="pasteMe(); return false;" runat="server" />
    <script type="text/javascript">
        function pasteMe()
        {
            $find("<%=RadEditor1.ClientID %>").pasteHtml('<span class="myTitle">' + $get("Textbox1").value + "</span>");
        }
    </script>



    Regards,
    Marin Bratanov
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top