Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Help on Simple contentEditable text Editor using jQuery

    I'm developing a simple text editor( code editor not RTE) as part of my Project.

    <div id="editor" contentEditable=true>
    <code> this is a line of code</code>
    <code> this is another line of code</code>
    </div>



    $('#editor>code').on('keypress',function(){
    alert('hello');
    });
    //This one is not worikng at all


    Te issue is that i cant bind/delegate any event to the <code> segment inside #editor(no javascript attched to it is invoked, but jQuery is working if attached to some other DOM element). I need it to add a new line(<code>) somewhere in between the program code when the user taps "Enter". Is there any work around? Also i wish to get a provision to retrieve the text/ line no of the line where the cursor is currently present.

    Thanks for the help in advance..

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    What version of jQuery are you using? "on" needs version 1.7+
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    What version of jQuery are you using? "on" needs version 1.7+
    Yes, i'm using jquery version 1.8.3.

    The problem is no javascript event is being detected in the <code> element which is nested inside a contentEditable.. whatever event i bind on it, the action is not actuated.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    link?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    code tags are not editable by default and so have no keypress event, and setting the div container to contenteditable still leaves the content of the code tags as plain text. You can set the code tags themselves to contenteditable (you may want to do this programatically if there are alot...)

    Code:
    <div id="editor">
    <code contentEditable=true> this is a line of code</code>
    <code  contentEditable=true> this is another line of code</code>
    </div>
    
    <script type="text/javascript">
    $('#editor>code').on('keypress',function(){
    alert('hello');
    }); 
    </script>

  • Users who have thanked xelawho for this post:

    sirajul (03-30-2013)

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by sirajul View Post
    Yes, i'm using jquery version 1.8.3.

    The problem is no javascript event is being detected in the <code> element which is nested inside a contentEditable.. whatever event i bind on it, the action is not actuated.
    that's on purpose. WYWIWYG mode changes the normal event bindings so that , eg, [CTRL]+[B] turns the selection bold.

    i don't think you can bind events on editable sub-tags.
    also, using many contentEditables will get you in a heap of trouble quick once people start adding new lines.

    that's not to say you can't watch the event on sub-tags, you just can't directly bind them.
    Event delegation works fine, at least in a quick mini-test i just completed:


    Code:
    <html>
    <div id="editor" contentEditable=true>
    <code> this is a line of code</code>
    <code> this is another line of code</code>
    </div>
    
    <script>
    editor.addEventListener("click", function(e){
      var t=e.target||e.srcElement;
      alert( t.outerHTML );
    })
    </script>
    </html>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    sirajul (03-30-2013)

  • #7
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    that's on purpose. WYWIWYG mode changes the normal event bindings so that , eg, [CTRL]+[B] turns the selection bold.

    i don't think you can bind events on editable sub-tags.
    also, using many contentEditables will get you in a heap of trouble quick once people start adding new lines.

    that's not to say you can't watch the event on sub-tags, you just can't directly bind them.
    Event delegation works fine, at least in a quick mini-test i just completed:


    Code:
    <html>
    <div id="editor" contentEditable=true>
    <code> this is a line of code</code>
    <code> this is another line of code</code>
    </div>
    
    <script>
    editor.addEventListener("click", function(e){
      var t=e.target||e.srcElement;
      alert( t.outerHTML );
    })
    </script>
    </html>
    Thanks for the hard work. But theproblem with contentEditable I found after a lot of research is that you can bind mouse events on the children of contentEditable but not key-stroke events. .. May be i need to find some other way. May be making children as contenteditable rather than the parent and create some hard javascript to move b/w previous and next lines whn Arrow keys are pressed. Also content editable may break the basic structure if we cut/copy(Ctrl+X/C) and paste(Ctrl+V) at some other intermediate location..


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •