如何制作一个textarea的ACE编辑器？

我希望能够将页面上的特定textareas转换为ACE编辑器。

有没有人有任何指针？

编辑：

我有一个textarea的editor.html文件，但只要我添加一秒，第二个不会转换为编辑器。

编辑2：

我决定放弃有几个想法，而是在新窗口中打开一个。 我的新的困境是，当我隐藏（）和显示（）textarea，显示出错。 有任何想法吗？

Answer 1

据我了解Ace的想法，你不应该让textarea成为Ace编辑器本身。 您应该创build一个额外的div，并使用.getSession（）函数更新textarea。

HTML

<textarea name="description"/> <div id="description"/> 

JS

 var editor = ace.edit("description"); var textarea = $('textarea[name="description"]').hide(); editor.getSession().setValue(textarea.val()); editor.getSession().on('change', function(){ textarea.val(editor.getSession().getValue()); }); 

或者只是打电话

 textarea.val(editor.getSession().getValue()); 

只有当您使用给定的textarea提交表单时。 我不确定这是否是使用Ace的正确方式，但它是在GitHub上使用的方式。

Answer 2

Duncansmart在他的github页面上有一个非常棒的解决scheme， progressive-ace演示了一个简单的方法来将ACE编辑器连接到你的页面。

基本上我们得到所有具有data-editor属性的<textarea>元素，并将其转换为ACE编辑器。 该示例还设置了一些属性，您应该根据自己的喜好进行自定义，并演示如何使用data属性来设置每个元素的属性，例如显示和隐藏装有data-gutter 。

 // Hook up ACE editor to all textareas with data-editor attribute $(function() { $('textarea[data-editor]').each(function() { var textarea = $(this); var mode = textarea.data('editor'); var editDiv = $('<div>', { position: 'absolute', width: textarea.width(), height: textarea.height(), 'class': textarea.attr('class') }).insertBefore(textarea); textarea.css('visibility', 'hidden'); var editor = ace.edit(editDiv[0]); editor.renderer.setShowGutter(textarea.data('gutter')); editor.getSession().setValue(textarea.val()); editor.getSession().setMode("ace/mode/" + mode); editor.setTheme("ace/theme/idle_fingers"); // copy back to textarea on form submit... textarea.closest('form').submit(function() { textarea.val(editor.getSession().getValue()); }) }); }); 

 textarea { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script> <textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea> <textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea> 

Answer 3

你可以有多个Ace编辑器。 只需给每个textarea一个ID并为这两个IDS创build一个Ace Editor，如下所示：

 <style> #editor, #editor2 { position: absolute; width: 600px; height: 400px; } </style> <div style="position:relative; height: 450px; " > &nbsp; <div id="editor">some text</div> </div> <div style="position:relative; height: 450px; " > &nbsp; <div id="editor2">some text</div> </div> <script src="ace.js" type="text/javascript" charset="utf-8"></script> <script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script> <script src="mode-xml.js" type="text/javascript" charset="utf-8"></script> <script> window.onload = function() { var editor = ace.edit("editor"); editor.setTheme("ace/theme/twilight"); var XmlMode = require("ace/mode/xml").Mode; editor.getSession().setMode(new XmlMode()); var editor2 = ace.edit("editor2"); editor2.setTheme("ace/theme/twilight"); editor2.getSession().setMode(new XmlMode()); }; </script> 

Answer 4

要创build一个编辑器，只需：

HTML：

 <textarea id="code1"></textarea> <textarea id="code2"></textarea> 

JS：

 var editor1 = ace.edit('code1'); var editor2 = ace.edit('code2'); editor1.getSession().setValue("this text will be in the first editor"); editor2.getSession().setValue("and this in the second"); 

CSS：

 #code1, code2 { position: absolute; width: 400px; height: 50px; } 

他们必须明确定位和规模。 通过show（）和hide（）我相信你指的是jQuery的function。 我不确定他们到底是怎么做的，但是它不能修改它在DOM中占用的空间。 我隐藏和显示使用：

 $('#code1').css('visibility', 'visible'); $('#code2').css('visibility', 'hidden'); 

如果您使用CSS属性“显示”，它将无法正常工作。

看看这里的维基如何添加主题，模式等… https://github.com/ajaxorg/ace/wiki/Embedding—API

注意：他们不一定是textareas，他们可以是任何你想要的元素。