如何在tinyMCE中获取源代码中复选框的选中状态？

Question

我使用tinyMCE作为html编辑器，我想在我的代码中使用复选框，其中切换状态保存在源代码中。

现在我只得到我在初学者中定义的状态，而不是在编辑器中切换它们之后。

码

这是我输入tinyMCE的代码，但在切换复选框后，新状态没有反映出来。

<textarea>
  <input type="checkbox" name="checkbox" id="checkbox2" checked="checked" /> <label for="checkbox">check</label>
  <br />
  <input type="checkbox" name="checkbox" id="checkbox2"/> <label for="checkbox">no-check</label></div>
</textarea>

Codepen

我发了an example，你可以在codepen上查看。

Answer 1

基于在this question找到的anwser，我设法找到了解决方案。

我在TinyMCE中添加了一个setup-function。我还添加了对radiobuttons的支持并选择。

tinymce.init({
    selector: 'textarea',
    height: 500,
    theme: 'modern',
    setup : function(ed) {
        // This function works for checkboxes
        ed.on('init', function(e) {
            $(ed.getBody()).on("change", ":checkbox", function(el){
                if(el.target.checked){
                    $(el.target).attr('checked','checked');
                }else{
                    $(el.target).removeAttr('checked');
                }
            });
            // Radiobuttons
            $(ed.getBody()).on("change", "input:radio", function(el){
                var name =  'input:radio[name="'+el.target.name+'"]';
                $(ed.getBody()).find(name).removeAttr('checked');
                $(el.target).attr('checked','checked');
                $(el.target).prop('checked',true);
            });
            // Selects
            $(ed.getBody()).on("change", "select", function(el){
                $(el.target).children('option').each(function( index ) {
                    if(this.selected){
                        $( this ).attr('selected','selected');
                    }else{
                        $( this ).removeAttr('selected');
                    }
                });
            });
        });
    }
});