install.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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>Video plugin</title>
  7. <link href="styles.css" rel="stylesheet" type="text/css">
  8. </head>
  9. <body>
  10. <h1>Video Plugin for CKEditor</h1>
  11. <h2>Introduction</h2>
  12. <p>This is a plugin to create HTML5 &lt;video&gt; elements in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
  13. <h3 id="contact">Author:</h3>
  14. <p><a href="mailto:amla70@gmail.com">Alfonso Mart&iacute;nez de Lizarrondo</a></p>
  15. <h3>Sponsored by:</h3>
  16. <p><a href="http://dmlogic.net/">DM logic</a></p>
  17. <h3>Version history: </h3>
  18. <ol>
  19. <li>1.0: 19-January-2011. First version.</li>
  20. <li>1.1: 21-January-2011. Several bug fixes. Detect poster image dimensions. Complete localization.</li>
  21. <li>1.2: 24-January-2011. Better dialog layout, specific filebrowserVideoBrowseUrl entry.</li>
  22. </ol>
  23. <p>Check for latest version and other <a href="http://alfonsoml.blogspot.com">CKEditor plugins</a></p>
  24. <h2>Installation</h2>
  25. <h3>1. Copying the files</h3>
  26. <p>Extract the contents of the zip in you plugins directory, so it ends up like
  27. this<br>
  28. <!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
  29. </p>
  30. <pre id="--install">
  31. ckeditor\
  32. ...
  33. images\
  34. lang\
  35. plugins\
  36. ...
  37. video\
  38. plugin.js
  39. dialogs\
  40. video.js
  41. docs\
  42. install.html
  43. images\
  44. icon.png
  45. placeholder.png
  46. ...
  47. skins\
  48. themes\
  49. </pre>
  50. <h3>2. Adding it to CKEditor</h3>
  51. <p>Now add the plugin in your <em>config.js</em> or custom js configuration
  52. file:
  53. <code>config.extraPlugins='video'; </code>
  54. </p>
  55. <h3>3. Add it to your toolbar</h3>
  56. <p>In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.</p>
  57. <h3>4. Configure server browser for video</h3>
  58. <p>You can use the <code>config.filebrowserVideoBrowseUrl</code> entry to specify a url so the file browser shows just video elements (as long as your configure properly your file browser).</p>
  59. <h3>5. Use it</h3>
  60. <p>Now empty the cache of your browser and reload the editor, the new button should show up and you can add &lt;video&gt; elements into the content. Here's a <a href="http://www.youtube.com/watch?v=DVKuGO-2-LY">short video of the plugin in action</a>.</p>
  61. <h2>Final notes</h2>
  62. <p>This plugin has been coded for CKEditor 3.5. It might be possible to backport it for older versions, but I don't think that it's worth the effort as sooner
  63. or later those installs will (or should) be upgraded to the current version.</p>
  64. <p>Please, note that only newer browsers support the Video element, in older ones a simple text linking to the source videos is provided, you might want to
  65. use some javascript or css to customize the final behavior of these elements.</p>
  66. <h2>Disclaimers</h2>
  67. <p>CKEditor is &copy; CKSource.com</p>
  68. </body>
  69. </html>