как получить правильное содержание contenteditable div - PullRequest
Новая
       7

как получить правильное содержание contenteditable div

0 голосов
/ 21 декабря 2018 

$('button').on('click', function(){
	let ht = $('#divstory').html();
	console.log(ht);
});
.divstory{
	background:#eee;
  min-height:54px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>

Пишите внутрь divstory следующее:

323
525
727
979

И нажмите button.

Результат:

323<div>525</div><div>727</div><div>979</div><div><br></div>

Почему 323 без div тегов?

И как получить новые строки, например: 

<div>323</div>    
<div>525</div>  
<div>727</div>  
<div>979</div>

Ответы [ 4 ]

0 голосов
/ 21 декабря 2018

Если вас не волнует сохранение разрывов строк, вы можете заменить .html() на .text(), чтобы вернуть только текст без HTML.

Если вы хотите сохранить разрывы строк, но также нетвернуть любой html, т.е. вам нужно заменить элементы div и br html текстовыми разрывами строк, используя символ /n.Вот решение, которое работает как для вывода на консоль, так и в формате html: 

$('button').on('click', function(){
	let ht = $('#divstory').html().replace(/<div>/g,"\n").replace(/<\/div>/g,"").replace(/<br>/g,"\n");
	console.log(ht);
   $("#result").text(ht);
});
.divstory{
	background:#eee;
  min-height:54px;
}
#result{
            white-space:pre;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>
<br>
<div id="result"></div>
0 голосов
/ 21 декабря 2018

Это потому что contenteditable добавляет: 

<div><br/></div>

в свой контент

Изменить код на: 

$('button').on('click', function(){    
    var ht = $('#divstory').html();
    ht = ht.replace("<br>", '');
    console.log(ht);
});
0 голосов
/ 21 декабря 2018

когда вы вводите ввод для содержимого редактируемого div , оно сохраняется в одном textNode, после нажатия вводить новый текст назначается divElement, но первый textNode такой, какой он есть, значит, он не изменяется.Вы можете изменить его вручную, используя следующий пример. 

$('button').on('click', function(){
	let ht = $('#divstory')[0].childNodes;
	for(let child of ht){
    if(child.constructor.name === 'Text'){
      let newChild = document.createElement('div');
      newChild.textContent = child.textContent;
      $('#divstory')[0].replaceChild(newChild, child);
    }
  }
  console.log($('#divstory').html());
});
.divstory{
	background:#eee;
  min-height:54px;
  white-space: pre;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>
0 голосов
/ 21 декабря 2018 

$('button').on('click', function(){
    var html = $('#divstory').html();
    var ht = remove_HtmlTags(html);
	console.log(ht);
});

function remove_HtmlTags (html) {
            var tmp = document.createElement("DIV");
            tmp.innerHTML = html;
            return tmp.textContent || tmp.innerText || "";
        }
.divstory{
	background:#eee;
  min-height:54px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="divstory" id="divstory" contenteditable="true"></div>
<br>
<button>CLICK</button>
...