Вырезать и вставлять не захватывая все атрибуты / свойства из HTML-элемента - PullRequest
Новая
       1

Вырезать и вставлять не захватывая все атрибуты / свойства из HTML-элемента

0 голосов
/ 26 августа 2018

У меня есть div, который динамически добавляется к contenitable div; добавляемый контент выглядит так: 

<div><a onclick='my_function()'>HELLO</a></div>

Таким образом, когда кто-то нажимает на HELLO, вызовет my_function. Работает отлично.

Но я хочу позволить пользователю вырезать этот элемент из contenteditable div и вставить его куда-нибудь еще.

Вырезание и вставка работает в браузере, как и ожидалось, при этом все форматирование остается неизменным. Но я теряю свойство onclick внутри элемента. Поэтому, когда пользователь вставляет содержимое, оно выглядит так: 

<div><a>HELLO</a></div>

Есть ли способ вырезать и вставлять содержимое, сохраняя все атрибуты / свойства внутри html?

Я пытался использовать jQuery для захвата событий вырезания и вставки следующим образом: 

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
})

$(".editable_div").on('paste', function(event) {
     $(this).append(cut_content)
})

Как и другие варианты этого, обеспечение 'cut_content' доступно во всем мире. Кажется, ничего не работает.

1 Ответ

0 голосов
/ 26 августа 2018

Вам необходимо использовать preventDefault()

Демо: (Ctrl + X) 

function my_function(){
   console.log('foo');
}

//sample function to add dynamic div
function addDynamicDiv(){
$('#firstDiv').append("<div><a onclick=\'my_function()\'>HELLO</a></div>");
}

$(document).ready(function(){
var cut_content;

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
     })
$(".editable_div").on('paste', function(event) {
     event.preventDefault();
     $(this).html(cut_content);
     })
     
$(".editable_div").on('click', function(event) {
    document.execCommand('selectAll',false,null);
});

//execute adding of dynamic div when document is ready
addDynamicDiv();

});
.editable_div{
border: 1px solid black;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="firstDiv" class="editable_div" contenteditable="true"></div>
  
  <br><br>
  
  <div class="editable_div" contenteditable="true"></div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...