install.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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>Audio plugin</title>
  7. <link href="styles.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <h1>Audio Plugin for CKEditor</h1>
  11. <h2>Introduction</h2>
  12. <p>This is a plugin to create HTML5 &lt;audio&gt; elements in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
  13. <h3>Version history: </h3>
  14. <ol>
  15. <li>1.0: 10-July-2015. First version.</li>
  16. </ol>
  17. <h2>Installation</h2>
  18. <h3>1. Copying the files</h3>
  19. <p>Extract the contents of the zip in you plugins directory, so it ends up like
  20. this<br>
  21. <!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
  22. </p>
  23. <pre id="--install">
  24. ckeditor\
  25. ...
  26. images\
  27. lang\
  28. plugins\
  29. ...
  30. audio\
  31. plugin.js
  32. dialogs\
  33. audio.js
  34. docs\
  35. install.html
  36. images\
  37. icon.png
  38. placeholder.png
  39. ...
  40. skins\
  41. themes\
  42. </pre>
  43. <h3>2. Adding it to CKEditor</h3>
  44. <p>Now add the plugin in your <em>config.js</em> or custom js configuration
  45. file:
  46. <code>config.extraPlugins='audio'; </code>
  47. </p>
  48. <h3>3. Add it to your toolbar</h3>
  49. <p>In your toolbar configuration, add a new 'Audio' item in the place where you want the button to show up.</p>
  50. <h3>4. Configure server browser for audio</h3>
  51. <p>You can use the <code>config.filebrowserAudioBrowseUrl</code> entry to specify a url so the file browser shows just audio elements (as long as your configure properly your file browser).</p>
  52. <h3>5. Use it</h3>
  53. <p>Now empty the cache of your browser and reload the editor, the new button should show up and you can add &lt;audio&gt; elements into the content.</p>
  54. <h2>Final notes</h2>
  55. <p>Please, note that only newer browsers support the Audio element, in older ones a simple text linking to the source audios is provided, you might want to
  56. use some javascript or css to customize the final behavior of these elements.</p>
  57. <h2>Disclaimers</h2>
  58. <p>CKEditor is &copy; CKSource.com</p>
  59. </body>
  60. </html>