Loading...
 
Skip to main content

History: How to customise the wysiwyg special characters dialog

View published page Collapse Into Edit Sessions

Preview of version: 2 (current)

How to customise ckeditor's wysiwyg special characters dialog


Before customizing ckeditor, go edit lib/ckeditor_tiki/tikistyles.js and uncomment line:

Copy to clipboard
CKEDITOR.timestamp= +new Date;

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

Technical explanation
Copy to clipboard
/* 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.
 */


Edit lib/ckeditor_tiki/wysiwyglib.php . Look for customConfig: and set a file name like this:

Copy to clipboard
customConfig: "/lib/ckeditor_tiki/custom_config.js",


Create /lib/ckeditor_tiki/custom_config.js and put this content for adding greek characters at the end of the "Special Character" dialog window:

Copy to clipboard
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' ] ] );
};


For a full replacement of default characters with more useful ones, create /lib/ckeditor_tiki/custom_config.js and put this content:

Copy to clipboard
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' ] ] ;

};


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

For reference, these are the default special characters:

Copy to clipboard
/**
 * 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;', '•',
  '→', '⇒', '⇔', '♦',
];


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.

History

Advanced
Information Version
Jean-Marc Libs 2
Jean-Marc Libs 1