Loading...
 

How to customise ckeditor's wysiwyg special characters dialog


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

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
/* 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:

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:

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:

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:

/**
 * 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.

doc.tiki.org

Get Started

Admin Guide User Guide Bootstrap in Tiki

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Elements
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Tiki Manager
Trackers
Transitions
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki