jquery.ace.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * jQuery ACE plugin.
  3. * @author Sam Mousa
  4. * @url https://github.com/SamMousa/jquery-ace
  5. */
  6. (function($) {
  7. var methods = {
  8. 'init': function(options) {
  9. var config = $.extend({
  10. 'mode' : 'html',
  11. 'tabSize' : 4,
  12. 'softTabs' : true,
  13. 'highlightActiveLine' : true,
  14. 'idPostfix' : '__ace',
  15. 'toolbarCallback' : null,
  16. 'wrapperClass' : 'jquery-ace-wrapper'
  17. }, options);
  18. return this.each(function() {
  19. var data = $(this).data('ace');
  20. if (!data) {
  21. var textarea = $(this);
  22. // Setup here.
  23. if ($(this).attr('id'))
  24. {
  25. var id = textarea.attr('id') + config.idPostfix;
  26. }
  27. var h = textarea.height();
  28. var w = textarea.width();
  29. textarea.hide();
  30. var wrapperDiv = $('<div/>').insertAfter(textarea).height(h).width(w).addClass(config.wrapperClass);
  31. // Check if we have a toolbar.
  32. var editorDiv = $('<div/>').appendTo(wrapperDiv).attr('id', id).height(h).width(w);
  33. var editor = ace.edit(id);
  34. if (typeof config.toolbarCallback == 'function')
  35. {
  36. var toolbarDiv = $('<div/>').prependTo(wrapperDiv).width(w);
  37. config.toolbarCallback(toolbarDiv, editor);
  38. // Resize editor.
  39. if (toolbarDiv.height() > 0)
  40. {
  41. editorDiv.height(h - toolbarDiv.height());
  42. editor.resize();
  43. }
  44. }
  45. data = {
  46. 'wrapperDiv' : wrapperDiv,
  47. 'editorDiv' : editorDiv,
  48. 'editor' : editor
  49. };
  50. var session = editor.getSession();
  51. session.setMode('ace/mode/' + config.mode);
  52. session.setTabSize(config.tabSize);
  53. session.setUseSoftTabs(config.softTabs);
  54. textarea.data('ace', data);
  55. textarea.ace('val', textarea.val());
  56. editor.setHighlightActiveLine(config.highlightActiveLine);
  57. editor.clearSelection();
  58. session.on('change', function(e) {
  59. textarea.val(e.target.getValue());
  60. });
  61. }
  62. });
  63. },
  64. 'get': function() {
  65. if (this.first().data('ace'))
  66. {
  67. return this.first().data('ace').editor;
  68. }
  69. },
  70. 'val': function(value) {
  71. if (typeof value == 'undefined')
  72. {
  73. return this.first().data('ace').editor.getValue();
  74. }
  75. else
  76. {
  77. this.each(function() {
  78. var data = $(this).data('ace');
  79. if (data)
  80. {
  81. data.editor.setValue(value);
  82. }
  83. });
  84. }
  85. return this;
  86. },
  87. 'check': function() {
  88. return typeof this.first().data('ace') != 'undefined';
  89. }
  90. };
  91. $.fn.ace = function(method) {
  92. if ( methods[method] ) {
  93. return methods[method].apply(this, Array.prototype.slice.call( arguments, 1 ));
  94. } else if ( typeof method === 'object' || ! method ) {
  95. return methods.init.apply(this, arguments);
  96. } else {
  97. $.error('Method ' + method + ' does not exist on jQuery.ace');
  98. }
  99. };
  100. })(jQuery);