Ответ 1
Самый простой способ:
Кому отключить CKEditor:
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true);
В включить CKEditor:
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);
Я использую CKEditor в своем веб-приложении и должен отключить/включить редактор из javascript. Я знаю, что есть опция readOnly, но я не знаю, как ее установить из jQuery.
Кто-нибудь знает, как отключить и включить обратно CKEditor с помощью jQuery?
Самый простой способ:
Кому отключить CKEditor:
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(true);
В включить CKEditor:
CKEDITOR.instances['TEXTAREA_NAME'].setReadOnly(false);
Я использую его в codeigniter. В файле вида я использую его следующим образом:
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.config.readOnly = true;
});
</script>
Я предполагаю, что вы используете адаптер CKE jQuery, поэтому вы можете использовать функцию .ckeditorGet()
jQuery для быстрого доступа к API CKEditor.
Чтобы переключить экземпляр исполняемого редактора в режиме только для чтения, используйте функцию редактора setReadOnly
:
$( _your_textarea_ ).ckeditorGet().setReadOnly();
Чтобы переключить его обратно на запись:
.setReadOnly( false );
Вы также можете использовать readOnly
значение конфигурации, когда вы запускаете свой редактор, чтобы запустить его в режим readonly:
$( _your_textarea_ ).ckeditor({
readOnly: true
});
Предполагая, что вы включили адаптер jQuery, следующий код должен сделать его только для чтения. Вы можете взять адаптер jQuery из примера, если он еще не включен.
<div class="wrapper">
<form id="myfrm" name="myfrm" class="myfrm" action="" method="post">
<textarea id="myeditor" name="myeditor"></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</div>
и js
$(document).ready(function(e) {
var myeditor = $('#myeditor');
myeditor.ckeditor();
myeditor.ckeditorGet().config.resize_enabled = false;
myeditor.ckeditorGet().config.height = 200;
myeditor.ckeditorGet().config.readOnly = true;
});
Чтобы включить или отключить ckeditor на основе вашего выбора окна выбора, вам нужно будет сделать событие изменения, подобное этому
$(document).ready(function(){
//put ckeditor initialization (the above) here.
$('#myselect').change(function(){
var x = $(this);
if(x.val()=='enable'){
myeditor.removeAttr('disabled');
}else if(x.val()=='disable'){
myeditor.attr('disabled','disabled');
}
myeditor.ckeditorGet().destroy();
myeditor.ckeditor();
});
});
То, что мы делаем выше, это установка исходного элемента для атрибута disabled="disabled"
и перезагрузки ckeditor после уничтожения текущего экземпляра. Проверьте пример JSFiddle 2.
От: форумы cksource
// Temporary workaround for providing editor 'read-only' toggling functionality.
( function()
{
var cancelEvent = function( evt )
{
evt.cancel();
};
CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
{
// Turn off contentEditable.
this.document.$.body.disabled = isReadOnly;
CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
: this.document.$.designMode = isReadOnly ? "off" : "on";
// Prevent key handling.
this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );
// Disable all commands in wysiwyg mode.
var command,
commands = this._.commands,
mode = this.mode;
for ( var name in commands )
{
command = commands[ name ];
isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
}
}
} )();
И использование:
// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );
Я думаю, что вы не читали эту документацию должным образом... она говорит, что у Ckeditor есть имя экземпляра, и с этим именем экземпляра в теге набора страниц InstanceNameOfCkEditor.config.readOnly = true;
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
В нашем проекте мы скрываем CKEditor и используем область ReadOnlyText для отображения существующего текста. Надеюсь, это поможет.
вы пытаетесь это лучшее решение
var existingEditor = CKEDITOR.instances && CKEDITOR.instances[element.id];
try {
if (existingEditor && typeof(existingEditor) !== "undefined" && typeof(existingEditor.setReadOnly) !== "undefined") {
if (el.prop("disabled")) {
existingEditor.setReadOnly(true);
} else {
existingEditor.setReadOnly(false);
}
}
} catch (ex) {
//do nothing
}
Я добавлю отключен в текстовое поле, которое кажется самым простым способом.
<div class="col-md-12">
<h3>HTML CONTENT</h3>
<textarea name="editor1" disabled></textarea>
<script>
CKEDITOR.replace('editor1');
</script>
</div>