97

ページ上の特定のテキストエリアを ACE エディターに変換できるようにしたいと考えています。

誰かポインタを教えてください。

編集：

1 つのテキストエリアで動作する editor.html ファイルがありますが、2 つ目を追加するとすぐに、2 つ目はエディターに変換されません。

編集2：

複数あるという考えを破棄し、代わりに 1 つを新しいウィンドウで開くことにしました。私の新しい苦境は、テキストエリアを hide() および show() すると、表示がうまくいかないことです。何か案は？

4

5 に答える 5

164

私がエースのアイデアを理解している限り、テキストエリアをエースエディタ自体にするべきではありません。代わりに.getSession（）関数を使用して、追加のdivを作成し、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());

指定されたテキストエリアでフォームを送信した場合のみ。これがAceの正しい使用方法かどうかはわかりませんが、GitHubでの使用方法です。

于 2011-11-02T11:43:57.043 に答える
37

Duncansmart は、彼の github ページ、progressive-aceで非常に優れたソリューションを提供しており、ACE エディターをページに接続する簡単な方法の 1 つを示しています。

基本的に<textarea>、属性を持つすべての要素を取得しdata-editor、それぞれを 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('display', 'none');
    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="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>

于 2013-10-22T09:01:13.740 に答える
8

複数のエース エディターを持つことができます。各テキストエリアに ID を与えて、両方の IDS 用に Ace エディターを次のように作成するだけです。

<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>
于 2011-07-28T20:31:27.483 に答える
1

エディターを作成するには、次のようにします。

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 関数を参照していると思います。彼らがどのようにそれを行うのか正確にはわかりませんが、DOM で占有するスペースを変更することはできません。次を使用して非表示および表示します。

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

css プロパティ 'display' を使用すると機能しません。

テーマやモードなどを追加する方法については、こちらの wiki をご覧ください... https://github.com/ajaxorg/ace/wiki/Embedding---API

注: テキストエリアである必要はありません。必要な要素であれば何でもかまいません。

于 2011-09-19T23:20:41.957 に答える