Бортовой журнал Ктулху
    Вы здесь:
  • Главная
    • >
  • /dev
    • > Как добавить плагин в CKEditor CDN | How to add extra plugin into CKEditor CDN

Как добавить плагин в CKEditor CDN | How to add extra plugin into CKEditor CDN

Buenos dias, mi amigos.

Today we will add an local extra plugins into CKEditor CDN.

Сегодня я расскажу как добавить недостающие плагины в CKEditor CDN. Плагин будет размещен где-то локально и успешно будет подключен в визуальный редактор.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.16.2/full/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>

Подключать буду два плагина: textindent и lineheight

Добавление в конфигурацию, подключение локальных скриптов:

CKEDITOR.plugins.addExternal('textindent', '<?php echo \Yii::$app->homeUrl.'js/editor/ckeditor/plugins/textindent/plugin.js'?>');
CKEDITOR.plugins.addExternal('lineheight', '<?php echo \Yii::$app->homeUrl.'js/editor/ckeditor/plugins/lineheight/plugin.js'?>');

Добавляем в конфигурацию: extraPlugins: 'textindent,lineheight'. Плагины перечисляются через запятую.

Названия кнопок добавляе в соответствующий раздел. Я добавил в styles.

CKEDITOR.replace('editor1', {
extraPlugins: 'textindent,lineheight', // <<--here
toolbar: [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ /*'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',*/
'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'textindent','lineheight'] }, // <<-- here
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'print', items: [ 'Print' ] }
]
});

2023 09 14 17.20.37