2013-08-12 4 views
3

Я создаю пользовательский текстовый редактор, используя CKEditor, и я хочу написать свои собственные функции JavaScript для вставки HTML в окно CKEditor.CKEditor: Access insertHtml() метод из внешнего скрипта

У CKEditor есть метод под названием editor.insertHtml(), который вставляет HTML в местоположение курсора в документе. Этот метод можно получить изнутри плагина CKEditor, но я предпочел бы свободу писать свои собственные функции вне CKEditor, а затем вставить полученный HTML-код в редактор.

Как я могу получить доступ к editor.insertHtml()? Я скопировал свой код ниже. Я пробовал использовать CKEDITOR.instances.editor1.insertHtml(), но это не работает.

Этот вопрос CKEditor editor1.insertHtml() not working for me предполагает, что мне нужно слушать событие instanceReady, но я не уверен, как это сделать, поэтому я хотел бы получить более подробное объяснение. Спасибо!

<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="ckeditor/ckeditor.js"></script> 
</head> 
<body> 
<textarea id="editor1"></textarea> 
<script type="text/javascript"> 
    // Replaces the <textarea id="editor1"> with a CKEditor 
    // instance, using default configuration. 
    CKEDITOR.replace('editor1', 
    { 
     height:"500", width:"1000" 
    }); 
</script> 
<script type="text/javascript"> 
    CKEDITOR.instances.editor1.insertHtml('<h1>someText</h1>'); 
</script> 

</body> 
</html> 
+1

Скорее всего, вы не должны использовать 'insertHtml' в этом случае. Я предполагаю, что вы пытаетесь загрузить данные в редактор, так что либо вы должны использовать 'getData', либо установить этот HTML как значение textarea перед загрузкой редактора. – Reinmar

ответ

3

instanceReady событие:

Активируется при создании экземпляра CKEditor, полностью инициализирован и готов для взаимодействия.

Вы можете использовать его следующим образом:

CKEDITOR.replace('editor1', { 
    height: '500', 
    width: '1000', 
    on: { 
     instanceReady: function() { 
      // this is current editor instance 
      this.insertHtml('<h1>someText</h1>'); 
     } 
    } 
}); 

Чтобы использовать API экземпляра, в основном поместить ваш код в instanceReady обратного вызова. В противном случае ваш код будет выполнен, пока редактор еще не готов.

Смежные вопросы