Loading...
 
Skip to main content

History: How to customise the wysiwyg special characters dialog

View published page

Source of version: 2 (current)

Copy to clipboard
            ! How to customise ckeditor's wysiwyg special characters dialog 

Before customizing ckeditor, go edit -+ lib/ckeditor_tiki/tikistyles.js +- and uncomment line:
{CODE(theme="default")}CKEDITOR.timestamp= +new Date;{CODE}
Then comment it again after you are done customizing because it kills ckeditor performance.

Otherwise you may not be able to see any difference when changing the configurations as explained in the comment right above the uncommented line
{FADE(label="Technical explanation" icon="y")}{CODE(theme="default")}/* If your changes here do not make any change in the wysiwyg editor, the reason is, ckeditor stores things in your browser cache.
 * Good news: most users can see your modifications, it's just you.
 * During the time when you wish to try changes here, uncomment the following line. You may need to reload a page with an open editor the first time.
 * Then comment it again because it kills ckeditor performance.
 */{CODE}{FADE}

Edit -+ lib/ckeditor_tiki/wysiwyglib.php +-. Look for ''customConfig:'' and set a file name like this:
{CODE(theme="default")}customConfig: "/lib/ckeditor_tiki/custom_config.js",{CODE}

Create -+ /lib/ckeditor_tiki/custom_config.js +- and put this content for adding greek characters at the end of the "Special Character" dialog window:
{CODE(theme="default")}CKEDITOR.editorConfig = function( config ) {
  // Define changes to default configuration here.
  // For complete reference see:
  // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
  config.specialChars = config.specialChars.concat( [ [ 'α', 'alpha' ],
      [ 'β', 'beta' ],
      [ 'γ', 'gamma' ],
      [ 'δ', 'delta' ],
      [ 'ε', 'epsilon' ],
      [ 'ζ', 'zeta' ],
      [ 'η', 'eta' ],
      [ 'θ', 'theta' ],
      [ 'ι', 'iota' ],
      [ 'κ', 'kappa' ],
      [ 'λ', 'lambda' ],
      [ 'μ', 'mu' ],
      [ 'ν', 'nu' ],
      [ 'ξ', 'xi' ],
      [ 'ο', 'omicron' ],
      [ 'π', 'pi' ],
      [ 'ρ', 'rho' ],
      [ 'σ', 'sigma' ],
      [ 'τ', 'tau' ],
      [ 'υ', 'upsilon' ],
      [ 'φ', 'phi' ],
      [ 'χ', 'chi' ],
      [ 'ψ', 'psi' ],
      [ 'ω', 'omega' ] ] );
};{CODE}

For a full replacement of default characters with more useful ones, create -+ /lib/ckeditor_tiki/custom_config.js +- and put this content:
{CODE(theme="default")}CKEDITOR.editorConfig = function( config ) {
  // Define changes to default configuration here.
  // For complete reference see:
  // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

  // The list of special characters visible in the "Special Character" dialog window.
  // Ref : https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-specialChars
  // Ref : https://stackoverflow.com/questions/3921760/ckeditor-add-more-symbols
  // Syntax:
  // config.specialChars = [ '"', '’', [ '&custom;', 'Custom label' ] ];
  // config.specialChars = config.specialChars.concat( [ '"', [ '’', 'Custom label' ] ] );
  config.specialChars = [
    '!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', '-', '.', '/',
    ':', ';',
    '<', '=', '>', '?', '@',
    '[', ']', '^', '_', '`',
    '{', '|', '}', '~',
    '€', '‘', '’', '“', '”', '–', '—', '¡', '¢', '£',
    '¤', '¥', '¦', '§', '¨', '©', 'ª', '«', '¬', '®', '¯',
    '°', '²', '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»',
    '¼', '½', '¾', '¿', 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å',
    'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï',
    'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '×', 'Ø', 'Ù',
    'Ú', 'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
    'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',
    'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', '÷',
    'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ', 'ÿ', 'Œ', 'œ',
    '%2;', '%4', '%3', '%5;', '‚', 'R19;', '„', '…', '™', '`58;', '•',
    '→', '⇒', '⇔', '♦',
    [ 'α', 'alpha' ],
    [ 'β', 'beta' ],
    [ 'γ', 'gamma' ],
    [ 'δ', 'delta' ],
    [ 'ε', 'epsilon' ],
    [ 'η', 'zeta' ],
    [ 'η', 'eta' ],
    [ 'θ', 'theta' ],
    [ 'ι', 'iota' ],
    [ 'κ', 'kappa' ],
    [ 'λ', 'lambda' ],
    [ 'μ', 'mu' ],
    [ 'ν', 'nu' ],
    [ 'ξ', 'xi' ],
    [ 'ο', 'omicron' ],
    [ 'π', 'pi' ],
    [ 'ρ', 'rho' ],
    [ 'σ', 'sigma' ],
    [ 'τ', 'tau' ],
    [ 'υ', 'upsilon' ],
    [ 'φ', 'phi' ],
    [ 'χ', 'chi' ],
    [ 'ψ', 'psi' ],
    [ 'ω', 'omega' ] ] ;

};{CODE}

For inspiration on other customisations, you can look at -+ vendor_bundled/vendor/ckeditor/ckeditor/config.js +-.

For reference, these are the default special characters:
{CODE(theme="default")}/**
 * The list of special characters visible in the "Special Character" dialog window.
 *
 *    config.specialChars = [ '"', '’', [ '&custom;', 'Custom label' ] ];
 *    config.specialChars = config.specialChars.concat( [ '"', [ '’', 'Custom label' ] ] );
 *
 * @cfg
 * @member CKEDITOR.config
 */
CKEDITOR.config.specialChars = [
  '!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', '-', '.', '/',
  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';',
  '<', '=', '>', '?', '@',
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
  'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
  '[', ']', '^', '_', '`',
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
  'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
  '{', '|', '}', '~',
  '€', '‘', '’', '“', '”', '–', '—', '¡', '¢', '£',
  '¤', '¥', '¦', '§', '¨', '©', 'ª', '«', '¬', '®', '¯',
  '°', '²', '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»',
  '¼', '½', '¾', '¿', 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å',
  'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï',
  'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '×', 'Ø', 'Ù',
  'Ú', 'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
  'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',
  'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', '÷',
  'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ', 'ÿ', 'Œ', 'œ',
  '%2;', '%4', '%3', '%5;', '‚', 'R19;', '„', '…', '™', '`58;', '•',
  '→', '⇒', '⇔', '♦',
];{CODE}

In case you wonder, the labels for the default characters are provided by the language files in -+ vendor_bundled/vendor/ckeditor/ckeditor/plugins/specialchar/dialogs/lang/ +-.

Note : the wysiwyg special characters dialog is separate from the non-wysiwyg special characters dialog.