内联tinymce编辑器不触发输入事件

Question

使用tinyMCE 我正在使用内联编辑器。我已设置 oninput 将更新的文本复制到文本区域中。

当我手动更新文本时，更改将被复制到文本区域。但是，当我使用粗体、下划线等编辑选项时，这些格式代码不会被复制到目标文本区域，除非我在更改后手动修改某些内容。

我想使用这些格式化选项不会触发输入事件。请指教。

$(window).on("load",function(){
    tinymce.init({
        selector:'.editable',
        menubar: false,
        statusbar: false,
        plugins: "lists",
        inline: true,
        toolbar: [
            'bold italic underline | numlist bullist'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li'
    })
})


function updateTextarea(id){
    var newText = $('#editable'+id).html();
    $('#textarea'+id).html(newText);
}

.editable{
  border:1px dashed #aaaaaa;
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

<div class="editable" id="editable1" oninput="updateTextarea('1')">
Edit this text. It will update the textarea. Make it bold, Target wont update
</div>

<br><br>

<strong>Target Textarea:</strong>

<textarea id="textarea1" style="width:100%;height:40px;"></textarea>

Answer 1

我在文本区域添加了设置选项，可以将更改事件转换为更新逻辑：

setup: function (editor) {
    editor.on('change', function (e) {
    //Get the id of editor and extract the desired ID:
    updateTextarea(editor.id.replace("editable",""))
    });
}

尝试该代码片段并检查输出：

$(window).on("load",function(){
    tinymce.init({
        selector:'.editable',
        menubar: false,
        statusbar: false,
        plugins: "lists",
        inline: true,
        toolbar: [
            'bold italic underline | numlist bullist'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
        
        setup: function (editor) {
          editor.on('change', function (e) { 
             //Get the id of editor and extract the desired ID:  
              updateTextarea(editor.id.replace("editable",""))
          });
        }
    
    })
})


function updateTextarea(id){
    var newText = $('#editable'+id).html();
    $('#textarea'+id).html(newText);
}

.editable{
  border:1px dashed #aaaaaa;
  padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

<div class="editable" id="editable1" oninput="updateTextarea('1')">
Edit this text. It will update the textarea. Make it bold, Target wont update
</div>

<br><br>

<strong>Target Textarea:</strong>

<textarea id="textarea1" style="width:100%;height:40px;"></textarea>