plugin.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**
  2. * plugin.js
  3. *
  4. * Copyright 2012, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /*global tinymce:true */
  11. tinymce.PluginManager.add('visualblocks', function(editor, url) {
  12. var cssId, visualBlocksMenuItem, enabled;
  13. // We don't support older browsers like IE6/7 and they don't provide prototypes for DOM objects
  14. if (!window.NodeList) {
  15. return;
  16. }
  17. function toggleActiveState() {
  18. var self = this;
  19. self.active(enabled);
  20. editor.on('VisualBlocks', function() {
  21. self.active(editor.dom.hasClass(editor.getBody(), 'mce-visualblocks'));
  22. });
  23. }
  24. editor.addCommand('mceVisualBlocks', function() {
  25. var dom = editor.dom, linkElm;
  26. if (!cssId) {
  27. cssId = dom.uniqueId();
  28. linkElm = dom.create('link', {
  29. id: cssId,
  30. rel: 'stylesheet',
  31. href: url + '/css/visualblocks.css'
  32. });
  33. editor.getDoc().getElementsByTagName('head')[0].appendChild(linkElm);
  34. }
  35. // Toggle on/off visual blocks while computing previews
  36. editor.on("PreviewFormats AfterPreviewFormats", function(e) {
  37. if (enabled) {
  38. dom.toggleClass(editor.getBody(), 'mce-visualblocks', e.type == "afterpreviewformats");
  39. }
  40. });
  41. dom.toggleClass(editor.getBody(), 'mce-visualblocks');
  42. enabled = editor.dom.hasClass(editor.getBody(), 'mce-visualblocks');
  43. if (visualBlocksMenuItem) {
  44. visualBlocksMenuItem.active(dom.hasClass(editor.getBody(), 'mce-visualblocks'));
  45. }
  46. editor.fire('VisualBlocks');
  47. });
  48. editor.addButton('visualblocks', {
  49. title: 'Show blocks',
  50. cmd: 'mceVisualBlocks',
  51. onPostRender: toggleActiveState
  52. });
  53. editor.addMenuItem('visualblocks', {
  54. text: 'Show blocks',
  55. cmd: 'mceVisualBlocks',
  56. onPostRender: toggleActiveState,
  57. selectable: true,
  58. context: 'view',
  59. prependToContext: true
  60. });
  61. editor.on('init', function() {
  62. if (editor.settings.visualblocks_default_state) {
  63. editor.execCommand('mceVisualBlocks', false, null, {skip_focus: true});
  64. }
  65. });
  66. editor.on('remove', function() {
  67. editor.dom.removeClass(editor.getBody(), 'mce-visualblocks');
  68. });
  69. });