install.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Configuration Helper plugin</title>
  7. <link href="styles.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <h1>Configuration Helper Plugin for CKEditor</h1>
  11. <h2>Introduction</h2>
  12. <p>This plugin tries to help setup <a href="http://www.ckeditor.com">CKEditor</a> by providing additional configuration options to perform some
  13. kind of common tasks.</p>
  14. <p>Currently if offers a "removeDialogFields" that allows to remove individual fields in the dialogs (versus removing whole tabs with
  15. <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.removeDialogTabs">removeDialogTabs</a>, and "dialogFieldsDefaultValues"
  16. defines default values for dialog fields.</p>
  17. <h3 id="contact">Author:</h3>
  18. <p><a href="mailto:amla70@gmail.com">Alfonso Mart&iacute;nez de Lizarrondo</a></p>
  19. <h3>Version history: </h3>
  20. <ol>
  21. <li>1.0: 26-February-2012. First version.</li>
  22. <li>1.1: 16-February-2012. Added placeholder.</li>
  23. <li>1.2: 23-April-2012. Added hideDialogFields.</li>
  24. <li>1.3: 1-December-2012. Compatibility with CKEditor 4.</li>
  25. <li>1.4: 28-March-2013. Compatibility of the "placeholder" attribute with the inline mode of CKEditor 4.</li>
  26. <li>1.5: 16-April-2013. Version 1.4 was broken in CKEditor 3.</li>
  27. <li>1.6: 16-August-2013. Handle the setData method to update the "placeholder" status</li>
  28. <li>1.7: 6-October-2013. <a href="https://github.com/AlfonsoML/confighelper/pull/2">Patch by bfavors</a> to fix handling placeholder on initial load of editor</li>
  29. <li>1.8: 9-March-2014. <a href="http://ckeditor.com/comment/reply/128664/130294">Check for IE11 by Russel Ward</a><br>
  30. Set caret into the empty paragraph correctly on first focus, <a href="https://github.com/AlfonsoML/confighelper/pull/5">patch by glanchow</a>
  31. </li>
  32. <li>1.8.1: 5-April-2014. <a href="https://github.com/AlfonsoML/confighelper/issues/6">Fix IE8 & IE9 problem with "inline textarea" if it's empty on start</a>
  33. </li>
  34. <li>1.8.2: 12-April-2014. <a href="https://github.com/AlfonsoML/confighelper/pull/8">Protect detection of empty content</a>. Thanks to tanihito.
  35. </li>
  36. <li>1.8.3: 30-November-2014. Force SCAYT to use the language that it's specified as the language for the contents.<br>
  37. <a href="https://github.com/AlfonsoML/confighelper/pull/13">Listen to the contentDom event to avoid problems when calling setData in WYSIWYG mode</a>. Thanks to noam-si.
  38. </li>
  39. </ol>
  40. <h2>Installation</h2>
  41. <h3>1. Copying the files</h3>
  42. <p>Extract the contents of the zip in you plugins directory, so it ends up like
  43. this<br>
  44. <!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
  45. </p>
  46. <pre id="--install">
  47. ckeditor\
  48. ...
  49. images\
  50. lang\
  51. plugins\
  52. ...
  53. confighelper\
  54. plugin.js
  55. docs\
  56. install.html
  57. ...
  58. skins\
  59. themes\
  60. </pre>
  61. <h3>2. Adding it to CKEditor</h3>
  62. <p>Now add the plugin in your <em>config.js</em> or custom js configuration
  63. file:
  64. <code>config.extraPlugins='confighelper'; </code>
  65. </p>
  66. <h3>3. Configuration</h3>
  67. <h4>config.removeDialogFields</h4>
  68. <p>This entry is a string, the fields are defined as dialogName + ":" + tab + ":" + field. Fields are joined with semicolons.
  69. In order to learn the name of the parameters you can use the "Developer Tools plugin", launch that sample and open the dialog that you want to customize.
  70. Now a little popup with appear showing the info about that field, for example:
  71. <pre><u>Element Information</u>
  72. Dialog window name : image
  73. Tab name : info
  74. Element ID : txtBorder
  75. Element type : text
  76. </pre>
  77. so in order to remove the class attribute for images the config is:
  78. <pre>config.removeDialogFields="image:info:txtBorder";</pre>
  79. removing another field
  80. <pre>config.removeDialogFields="image:info:txtBorder;image:info:txtHSpace";</pre>
  81. <h4>config.dialogFieldsDefaultValues</h4>
  82. <p>This setting uses directly a JSON object as the configuration value, first an object that has the dialog names as properties, each property is
  83. a new object with the name of the tabs and finally each property name maps to the field name and it's value is the default value to use for the field.</p>
  84. <p>An example might be much better as I might have messed up something in the description:</p>
  85. <pre>config.dialogFieldsDefaultValues =
  86. {
  87. image:
  88. {
  89. advanced:
  90. {
  91. txtGenClass : 'myClass',
  92. txtGenTitle : 'Image title'
  93. }
  94. }
  95. };
  96. </pre>
  97. <h4>config.placeholder</h4>
  98. <p>This a text that will be shown when the editor is empty following the HTML5 placeholder attribute. When the user focus the editor, the content is
  99. cleared automatically.</p>
  100. <p>The value can be set in the configuration or as an attribute of the replaced element</p>
  101. <pre>config.placeholder = 'Type here...';</pre>
  102. <h4>config.hideDialogFields</h4>
  103. <p>This entry uses the same sintax that the 'removeDialogFields' option. The difference is that some fields can't be removed easily as other parts of the dialog
  104. might not be ready and might try to always use it, generating a javascript error. In other cases the layout might be broken if the field is removed instead of hidden.<br>
  105. In those cases it's possible to hide the fields using this entry, and the preview in the image dialog is an example of such a field.</p>
  106. <pre>config.hideDialogFields="image:info:htmlPreview";</pre>
  107. <!--
  108. <h2>Final notes</h2>
  109. -->
  110. <h2>Disclaimers</h2>
  111. <p>CKEditor is &copy; CKSource.com</p>
  112. </body>
  113. </html>