Question

我如何销毁ckeditor实例？

我有一个问题ckeditor实例double。我会摧毁它。

我将检查图像中的代码console.log（editorID）。我明白了   textarea如果我添加chapter1我有2个实例是textarea0和   textarea1。如果我添加chapter2我有3个实例是textarea0，textarea1   和textarea2。我认为这段代码不是破坏实例。你能帮我吗   我这个问题？谢谢。   我道歉。我不擅长英语。

    function loadEditors() {
        var $editors = $("textarea.editors");
        console.log($editors.length);
        if ($editors.length) {
            $editors.each(function() {
                var editorID = $(this).attr("id");
                var instance = CKEDITOR.instances[editorID];

                if (instance) { instance.destroy(true); }
                console.log(editorID);
                CKEDITOR.replace(editorID);
            });
        }
    }

如果我删除ckeditor这个代码是工作和属性id textarea是真正。请参阅代码示例。

＆＃13;

	$(document).ready(function() {	

		//CKEDITOR.replaceAll('editors');	
		$("#chapter").on("click",function(){

			var i = $('.nav-tabs li').length;
			$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
			$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
			$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);

			//loadEditors();
		});
		
/*	   var $editors = $("textarea.editors");
		if ($editors.length) {
			$editors.each(function() {
				var instance = CKEDITOR.instances[$(this).attr("id")];
				if (instance) { $(this).val(instance.getData()); }
			});
		}*/
			
/*		function loadEditors() {
			var $editors = $("textarea.editors");
			console.log($editors.length);
			if ($editors.length) {
				$editors.each(function() {
					var editorID = $(this).attr("id");
					var instance = CKEDITOR.instances[editorID];
					
					if (instance) { instance.destroy(true); }
					console.log(editorID);
					CKEDITOR.replace(editorID);
				});
			}
		}*/		
		
	});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>

<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chapter0">
          <h3>Chapter 0</h3>
              <div class="form-group">
                <label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
                <div class="col-sm-10">
                  <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
                </div>
              </div>
  </div>
</div>

＆＃13;

Answer 1

试试这个

setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

Answer 2

我完成了。

我添加了我的代码

$('.tab-pane:last-child').find('textarea').parent().find('div').remove();

并更改功能

function loadEditors() {
            var $editors = $("textarea.editors");
            console.log($editors.length);

            if ($editors.length) {
                $editors.each(function() {
                    var editorID = $(this).attr("id");
                    var instance = CKEDITOR.instances[editorID];

                    if(instance) { 
                        delete instance;
                    }else{
                        console.log(editorID);
                        CKEDITOR.replace(editorID);
                    }
                });
            }           
        }

$(document).ready(function() {	

		CKEDITOR.replaceAll('editors');
			
		$("#chapter").on("click",function(){

			var i = $('.nav-tabs li').length;
			$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
			$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
			$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
			$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
			loadEditors();
		});
			
		function loadEditors() {
			var $editors = $("textarea.editors");
			console.log($editors.length);
			
			if ($editors.length) {
				$editors.each(function() {
					var editorID = $(this).attr("id");
					var instance = CKEDITOR.instances[editorID];
					
					if(instance) { 
						delete instance;
					}else{
						console.log(editorID);
						CKEDITOR.replace(editorID);
					}
				});
			}			
		}		
		
	});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>

<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chapter0">
          <h3>Chapter 0</h3>
              <div class="form-group">
                <label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
                <div class="col-sm-10">
                  <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
                </div>
              </div>
  </div>
</div>

Ckeditor实例无法破坏？

2 个答案: