CKEditor
06.12.2023
Как настроить этот плагин под свои нужды ?

Как переопределить как именно будет выглядеть форма для ввода коммертария или сообщения на форуме для вашей темы ?

есть  три варианта  :

полный = 'input_textarea_editor' ,

средний = 'input_textarea_medieditor' ,

маленький = 'input_textarea_minieditor' 

( эти блоки настраиваются в CKEditor->lib->config.js )

например для максимального блока $R['input_textarea_editor']  я использую 

    config.toolbar_Full = [
        ['Source'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt','Font','FontSize'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','oembed','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Syntaxhighlight','Symbol'],
        ['Maximize', 'ShowBlocks','-','About'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','TextColor','BGColor'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor','More'],
        ['Styles','Format']
    ];

строки определяющие как будет выглядеть форма ввода для комментариев, на форумах, или страницах размещаются в /system/resources.rc.php

$R['input_textarea_editor'] =  '<textarea class="editor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';
$R['input_textarea_medieditor'] =  '<textarea class="medieditor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';
$R['input_textarea_minieditor'] =  '<textarea class="minieditor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';

Чтобы всё не изменилось при обновлениях движка на новую версию эти строки можно переопределить в вашей теме.

  • В вашей теме, /themes/имя_каталога/имя_темы.rc.php размещаем строки переопределяющие внешний вид.
  • Например, чтобы редактор везде был максимальным по функционалу :
$R['input_textarea_editor'] =  '<textarea class="editor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';
$R['input_textarea_medieditor'] =  '<textarea class="editor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';
$R['input_textarea_minieditor'] =  '<textarea class="editor" name="{$name}" rows="{$rows}" cols="{$cols}"{$attrs}>{$value}</textarea>';

 


 

Как установить свою палитру цветов ?

  • нужно вставить строку с вашей палитрой в CKEditor->lib->config.js

например :

 

config.colorButton_colors =
 
'ffff,000000,404040,808080,c0c0c0,ff0000,' +
 
'ED3E3E,fff200,2aff00,93FF61,1ABBB4,00FBFF,' +
 
'00BFF3,0054A6,000CFF,0076A3,8493CA,8493CA,' +
 
'FF009D,F06EA9,D03166,F6989D,790000,827B00,' +
 
'004B80,EAD39C,DEA99B,CC8D73,B37C83,695254,' +
 
'6C3730,D8C1B7,2C2026,FD5308,FB9902,FEFE33,' +
 
'66B032,0392CE,0247FE,3D01A4,8601AF,A7194B,' +
 
'406128,57A3E1,34649F,ACD39F,476D5C,524A33б' +
 
'FDECA3,FDECA3,FDECA3,FDECA3,FDECA3,FDECA3,';

цвета расположены группами по 6 в ряд.  и пишутся в формате #xxxxxx (RGB)  но без сімвола #

 

отключить проверку версии

	config.versionCheck = false;

 

Изменяем типы поддерживаемых языков программирования и их выбор в меню ckeditor

ckeditor/presets/contents.default.css 

pre[class^="brush:bash"]::before, pre[class^="brush: bash"]::before {content: "Bash (Shell)";}
pre[class^="brush:css"]::before, pre[class^="brush: css"]::before {content: "CSS";}
pre[class^="brush:cpp"]::before, pre[class^="brush: cpp"]::before {content: "C++";}
pre[class^="brush:csharp"]::before, pre[class^="brush: csharp"]::before {content: "C#";}
pre[class^="brush:delphi"]::before, pre[class^="brush: delphi"]::before {content: "Delphi";}
pre[class^="brush:html"]::before, pre[class^="brush: html"]::before {content: "HTML";}
pre[class^="brush:java"]::before, pre[class^="brush: java"]::before {content: "Java";}
pre[class^="brush:js"]::before, pre[class^="brush: js"]::before {content: "JavaScript";}
pre[class^="brush:perl"]::before, pre[class^="brush: perl"]::before {content: "Perl";}
pre[class^="brush:php"]::before, pre[class^="brush: php"]::before {content: "PHP";}
pre[class^="brush:python"]::before, pre[class^="brush: python"]::before {content: "Python";}
pre[class^="brush:ruby"]::before, pre[class^="brush: ruby"]::before {content: "Ruby";}
pre[class^="brush:scss"]::before, pre[class^="brush: asm"]::before {content: "Microchip asm";}
pre[class^="brush:sql"]::before, pre[class^="brush: sql"]::before {content: "SQL";}
pre[class^="brush:ts"]::before, pre[class^="brush: ts"]::before {content: "TypeScript";}
pre[class^="brush:xml"]::before, pre[class^="brush: xml"]::before {content: "XML/XHTML";}

ckeditor/lib/plugins/syntaxhighlight/dialogs/syntaxhighlight.js

нужно заменить в теле кода для переменной b.lang=-1<" ... "    например "Ruby" на "asm"

что-то ещё...