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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Breaking Span into two

    Hi All ,
    I was trying to break a span tag in a way as follows,

    Original html :
    [code]
    <div class="line">abc<span class="keyword">function</span> def. </div>
    [code]


    Desired Html after Enter is hit at 'c' in function

    [code]
    <div class="line">abc<span class="var">fun</span></div>
    <div class="line"><span class="var">ction</span>def</div>
    [code]

    I have prevented the browser from carrying out its normal enter action and was able to split
    <span class="keyword">function</span>
    into

    <span class="var">fun</span><span class="var">ction</span>


    The problem is that i want the rest of the content from the second span into next line(next div).I tried to insert

    [code]
    <span class="var">fun</span></div><div><span class="var">ction</span>
    [code]

    so that whole thing would be as expected but this is not working as browser is inserting self closed div tags.Is there a way to achieve the desired output?


    Thanks in advance
    Dushyanth

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    why not just insert a line break?

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    inserting a br would make the content move to a new line.However the output would be like this

    <div class= "line"><span class="var">func</span>
    <span class="var">tion</span></div>


    which is not the intended output.It should be

    <div class= "line"><span class="var">func</span></div>
    <div class="line"><span class="var">tion</span></div>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,313
    Thanks
    23
    Thanked 612 Times in 611 Posts
    @dushyanthreddyk, You are giving us your output. We need to see the code that is doing this. I would like to see how your grabbing the html line and from where.

    And maybe if you told us why you want this maybe we could come up with something simpler.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was trying to build a custom language editor.I cant use any editors which are available in internet ,this is the code i wrote as a start..

    Code:
    <html>
     <head>
      <title> New Document </title>
      <script src="D:\MyHtmlExamples\JS_Files\jQuery-1.9.1.js"></script>
      <script src="D:\MyHtmlExamples\JS_Files\rangy-core.js"></script>
       <style>
       #rte{
       border:1px solid red;
       width:450px;
       height:200px;
       }
       .keyword{
       white-space:no-wrap;
       }
    
      </style>
     </head>
    
     <body>
    
     <div id="rte" contentEditable="true">
     <div class="line"><pre>aba fv<span  class="keyword">function</span><pre></div>
     
     </div>
     
      
    <script>
    var range,anchor_node, sel , rangy_sel;
    
    
    function pasteHtmlAtCaret(html) {
        var sel;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                if (range == null) {
    
    
                    range = sel.getRangeAt(0);
                }
                range.deleteContents();
    
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerHTML = html;
                //el.innerText = html;
                var frag = document.createDocumentFragment(),
                    node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
    
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
    
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            if (range == null) {
    
               range =  document.selection.createRange();   
               range.pasteHTML(html);
               range.select();
            } else {
                range.pasteHTML(html);
                range.select();
    
            }
    
        }
    
    }
    
    
    function getRange(){
    
    if (window.getSelection) {
            // IE9 and non-IE
      sel = window.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
       range = sel.getRangeAt(0);
       }
    
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
       rangy_sel = rangy.getSelection();
       anchor_node = rangy_sel.anchorNode;
       sel = document.selection;
       range = sel.createRange();
       }
    }
    
    
      $('#rte').keypress(function(e){
      if (e.keyCode==13)
     {
    //preventing browser default enter action
     e.preventDefault();
     getRange();
     lv_parent_node = anchor_node.parentNode;
     if (lv_parent_node.nodeName == 'SPAN')
     {
      lv_val = anchor_node.nodeValue;
      if ( anchor_node.length != (rangy_sel.focusOffset + 1) )
      {
      var lv_str1 =  lv_val.substr(0,rangy_sel.anchorOffset+1);
      var lv_str2 =  lv_val.substr(rangy_sel.anchorOffset ,anchor_node.length);
      var html = '<span class="variable">'+lv_str1+'</span></div>';
      //breaking content into lv_str1 and lv_str2
      html = html + '<div><span class="variable">'+lv_str2+'</span>';
      $(lv_parent_node).remove();
      pasteHtmlAtCaret(html);
    
    
     }
     }
    
     } 
     }); 
    
    </script>
    
    
    
     </body>
    </html>
    Rangy is a library that helps to create a range object easily.


  •  

    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
    •