Изменение тегов с помощью jQuery

Question

У меня есть контент-доступ. Как пользователь может изменить теги внутри, от p до h1? (и наоборот, если он передумает). Конечно, пользователь должен иметь возможность выбирать, какие части h1 и какие части p.

Что-то похожее на то, что у нас есть в StackOverflow, когда мы задаем вопрос: мы выбираем слово, нажимаем на B, и делаем его черным. Я хочу, чтобы пользователь выбрал нужное предложение и сделал его h1.

Я предполагаю, что пользователь должен выбрать предложение или поместить туда курсор, а затем нажать кнопку, чтобы внести изменения. Вопрос в том, как я могу узнать, какое предложение или пункт пользователь хочет изменить?

Здесь у меня есть код, чтобы играть и проверить: http://jsfiddle.net/d9z5r49j/4/

HTML:

<div id='ToP'>p</div> 
<div id='ToH'>h1</div> 

<div contenteditable> 
<p>first paragraph</p> 
<p>second paragraph</p> 
</div> 

Jquery:

$("#ToH").click(function() { 

    //this changes all the p. How to change only what the user chooses? 
    //$("p")).replaceWith('<h1>' + this.html() + '</h1>'); 

}); 

Answer 1

вы могли бы что-то вроде этого

ОК обновленного ответа

<input id="changeH1" type="button" value="H1" /> 
<input id="changeP" type="button" value="p" /> 
<div contenteditable> 
    <p>first paragraph</p> 
    <p>second paragraph</p> 
</div> 
<br /> 
<script> 
function selectHTML() { 
    try { 
     if (window.ActiveXObject) { 
      var c = document.selection.createRange(); 
      return c.htmlText; 
     } 

     var nNd = document.createElement("span"); 
     var w = getSelection().getRangeAt(0); 
     w.surroundContents(nNd); 
     return nNd.innerHTML; 
    } catch (e) { 
     if (window.ActiveXObject) { 
      return document.selection.createRange(); 
     } else { 
      return getSelection(); 
     } 
    } 
} 

$(function() { 
    $('#changeH1').click(function() { 
     if($('span').length > 0) 
      $('span').remove();   
     var mytext = selectHTML();    
     if(mytext) 
      $('span').parent().replaceWith($('<h1>' + $("span").parent().text() + '</h1>')) 
    }); 

    $('#changeP').click(function() { 
     if($('span').length > 0) 
      $('span').remove(); 
     var mytext = selectHTML();    
     if(mytext) 
     $('span').parent().replaceWith($('<p>' + $("span").parent().text() + '</p>')) 
    }); 
}); 
</script> 

Теперь просто отметьте элемент, который вы хотите изменить, и нажмите кнопку. здесь демонстрационный http://jsfiddle.net/d9z5r49j/9/

Answer 2

Вы можете попробовать этот метод

$("[data-tag]").click(function() { 
    var toTag = $(this).attr('data-tag');  
    var content = $('[contenteditable]'); 
    content.html(content.html().replace(/<\/(.*?)>/g, '</' + toTag + '>')); 
    content.html(content.html().replace(/<(.*?)>/g, '<' + toTag + '>')); 

}); 

<div id='ToP' data-tag="p">p</div> 
<div id='ToH' data-tag="h1">h1</div> 

<div contenteditable> 
<p>first paragraph</p> 
<p>second paragraph</p> 
</div> 

http://jsfiddle.net/d9z5r49j/2/