javascript - 如何在标签中显示富文本区域的内容

Question

我正在使用表情符号选择器输入(One Singal Emoji Picker)，它将常规输入字段转换为可内容编辑的富文本区域。

我希望显示一个标签，其中包含标签中输入的文本，但我使用常规文本输入的方法不起作用，并且我不确定如何在标签上“调用 element.val()”底层隐藏输入字段以获取 contenteditable div 的值。

这是我当前的方法，适用于常规输入，但不适用于此富文本输入:

显示文本的标签:

<span>You have entered <span id="name"></span>  </span><br>

输入:

 <input id="idfield2" class="mirror" data-copy="#name"></div>

脚本:

<script>$('.mirror').on('keyup', function() {
$('.'+$(this).attr('class')).val($(this).val());
});</script>

Answer 1

不使用MutationObserver (because too expensive)您可以收听新创建的div.mirror内容可编辑:

$('div.mirror').on('input', function() {
    $('#name').html($(this).html());
});

这样，每当您在字段中数字化某些内容时，它就会显示在您的范围中。如果您从选择器添加图标，则需要在可编辑内容中输入一些键，否则您需要使用 MutationObserver。

此外，我使用 .html() 而不是 .val() 或 .text() 方法，因为可编辑内容可以同时包含文本和图标。因此，为了查看图标，从选择器中选择一个图标后，您需要在字段中输入一个字符。

使用 MutationObserver 你可以写:

//
// With Mutation Observer
//
var targetNode = document.querySelector('div.mirror');
var config = {  attributes:false, childList:false, subtree: true, characterData:true };
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
      document.getElementById('name').innerHTML = targetNode.innerHTML;
    }
};
var observer = new MutationObserver(callback);

observer.observe(targetNode, config);

// Later, you can stop observing
//  ...   observer.disconnect();

fiddle 是here