trumbowyg.highlight.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /* globals Prism */
  2. (function ($, Prism) {
  3. 'use strict';
  4. // My plugin default options
  5. var defaultOptions = {};
  6. function highlightIt(text, language, lineHighlight) {
  7. return [
  8. '<pre class="language-' + language + '" ' + (lineHighlight ? 'data-line="' + lineHighlight + '"' : '') + '>',
  9. '<code class="language-' + language + '">' + Prism.highlight(text, Prism.languages[language]) + '</code>',
  10. '</pre>',
  11. ].join('');
  12. }
  13. // If my plugin is a button
  14. function buildButtonDef(trumbowyg) {
  15. return {
  16. fn: function () {
  17. var $modal = trumbowyg.openModal('Code', [
  18. '<div class="' + trumbowyg.o.prefix + 'highlight-form-group">',
  19. ' <select class="' + trumbowyg.o.prefix + 'highlight-form-control language">',
  20. (function () {
  21. var options = '';
  22. for (var lang in Prism.languages) {
  23. if (Prism.languages.hasOwnProperty(lang)) {
  24. options += '<option value="' + lang + '">' + lang + '</option>';
  25. }
  26. }
  27. return options;
  28. })(),
  29. ' </select>',
  30. '</div>',
  31. '<div class="' + trumbowyg.o.prefix + 'highlight-form-group">',
  32. ' <textarea class="' + trumbowyg.o.prefix + 'highlight-form-control code"></textarea>',
  33. '</div>',
  34. '<div class="' + trumbowyg.o.prefix + 'highlight-form-group">',
  35. ' <input title="'+ trumbowyg.lang.prismHighlightPluginAlert +
  36. '" placeholder="' + trumbowyg.lang.highlightLine +
  37. '" class="' + trumbowyg.o.prefix + 'highlight-form-control trumbowyg-line-highlight"/>',
  38. '</div>'
  39. ].join('\n')),
  40. $language = $modal.find('.language'),
  41. $code = $modal.find('.code'),
  42. $lineHighlight = $modal.find('.trumbowyg-line-highlight');
  43. // Listen clicks on modal box buttons
  44. $modal.on('tbwconfirm', function () {
  45. trumbowyg.restoreRange();
  46. trumbowyg.execCmd('insertHTML', highlightIt($code.val(), $language.val(), $lineHighlight.val()));
  47. trumbowyg.execCmd('insertHTML', '<p><br></p>');
  48. trumbowyg.closeModal();
  49. });
  50. $modal.on('tbwcancel', function () {
  51. trumbowyg.closeModal();
  52. });
  53. }
  54. };
  55. }
  56. $.extend(true, $.trumbowyg, {
  57. // Add some translations
  58. langs: {
  59. // jshint camelcase:false
  60. en: {
  61. highlight: 'Code syntax highlight',
  62. highlightLine: 'Highlight lines, e.g.: 1,3-5',
  63. prismHighlightPluginAlert: 'You must have Prism Line Highlight plugin installed'
  64. },
  65. es: {
  66. highlight: 'Resaltado de sintaxis de código',
  67. highlightLine: 'Resaltar lineas, ej: 1,3-5',
  68. prismHighlightPluginAlert: 'Debes de tener el plugin Prism Line Highlight instalado'
  69. },
  70. hu: {
  71. highlight: 'Kód kiemelés'
  72. },
  73. ko: {
  74. highlight: '코드 문법 하이라이트'
  75. },
  76. pt_br: {
  77. highlight: 'Realçar sintaxe de código'
  78. },
  79. // jshint camelcase:true
  80. },
  81. // Add our plugin to Trumbowyg registered plugins
  82. plugins: {
  83. highlight: {
  84. init: function (trumbowyg) {
  85. // Fill current Trumbowyg instance with my plugin default options
  86. trumbowyg.o.plugins.highlight = $.extend(true, {},
  87. defaultOptions,
  88. trumbowyg.o.plugins.highlight || {}
  89. );
  90. // If my plugin is a button
  91. trumbowyg.addBtnDef('highlight', buildButtonDef(trumbowyg));
  92. }
  93. }
  94. }
  95. });
  96. })(jQuery, Prism);