You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
2.5 KiB

10 months ago
  1. var ace = require('brace');
  2. module.exports = {
  3. render: function (h) {
  4. var height = this.height ? this.px(this.height) : '100%'
  5. var width = this.width ? this.px(this.width) : '100%'
  6. return h('div',{
  7. attrs: {
  8. style: "height: " + height + '; width: ' + width,
  9. }
  10. })
  11. },
  12. props:{
  13. value:String,
  14. lang:true,
  15. theme:String,
  16. height:true,
  17. width:true,
  18. options:Object
  19. },
  20. data: function () {
  21. return {
  22. editor:null,
  23. contentBackup:""
  24. }
  25. },
  26. methods: {
  27. px:function (n) {
  28. if( /^\d*$/.test(n) ){
  29. return n+"px";
  30. }
  31. return n;
  32. }
  33. },
  34. watch:{
  35. value:function (val) {
  36. if(this.contentBackup !== val){
  37. this.editor.session.setValue(val,1);
  38. this.contentBackup = val;
  39. }
  40. },
  41. theme:function (newTheme) {
  42. this.editor.setTheme('ace/theme/'+newTheme);
  43. },
  44. lang:function (newLang) {
  45. this.editor.getSession().setMode(typeof newLang === 'string' ? ( 'ace/mode/' + newLang ) : newLang);
  46. },
  47. options:function(newOption){
  48. this.editor.setOptions(newOption);
  49. },
  50. height:function(){
  51. this.$nextTick(function(){
  52. this.editor.resize()
  53. })
  54. },
  55. width:function(){
  56. this.$nextTick(function(){
  57. this.editor.resize()
  58. })
  59. }
  60. },
  61. beforeDestroy: function() {
  62. this.editor.destroy();
  63. this.editor.container.remove();
  64. },
  65. mounted: function () {
  66. var vm = this;
  67. var lang = this.lang||'text';
  68. var theme = this.theme||'chrome';
  69. require('brace/ext/emmet');
  70. var editor = vm.editor = ace.edit(this.$el);
  71. editor.$blockScrolling = Infinity;
  72. this.$emit('init',editor);
  73. //editor.setOption("enableEmmet", true);
  74. editor.getSession().setMode(typeof lang === 'string' ? ( 'ace/mode/' + lang ) : lang);
  75. editor.setTheme('ace/theme/'+theme);
  76. if(this.value)
  77. editor.setValue(this.value,1);
  78. this.contentBackup = this.value;
  79. editor.on('change',function () {
  80. var content = editor.getValue();
  81. vm.$emit('input',content);
  82. vm.contentBackup = content;
  83. });
  84. if(vm.options)
  85. editor.setOptions(vm.options);
  86. }
  87. }