Integrating ACE into a Rails 3.2.1 Application Resource Edit Form

[DanV]

Has anyone done this?

I gave it a quick try from the examples.  But it does not seem to work for me.  The textarea I connected to the ACE editor no longer shows its content and I cannot edit it either.

I added a simple style (relative, 400x300) and the script links and edited the inline script to use the id of a textarea in the edit form of a simple resource I called a Blob (name:string, description:text).

I am attaching three files:

1. The original rails source file app/views/blobs/edit.html.erb as edit.original.html
2. The rails source file app/views/blobs/edit.html.erb (with the above changes) as edit.changed.html
   
3. The actual source retrieved from the web server as edit.served.html

Hope someone can shed a light on this as currently I am clueless on how to troubleshoot this.

Thanks!

[DanV]

I modified the attachment names so they will hopefully show as text when viewing in browser...

[DanV]

Just a bump.  I am really stuck on this and would appreciate any help or comments.

Has anyone embedded ACE in a Rails Projects?

[Brett]

I found this trying to solve another problem. I was having the same
trouble and then discovered (by trying to recreate the examples by
scratch and then changing one thing at a time) that ACE does not like
id's with underscores in them. If I took the underscores out it
worked. Sorta bites since the Rails Way is to use underscores.
Anyways, I hope this helps!

Brett :-)

[DanV]

Brett,

Thank for the reply.  The id that was being used was "blob_description".  To test the underscore issue I just add a raw html textarea element  with an id of "description" but this did not seeme to help.

I have not tried to dig deeper into this yet, but I do need to get to the bottom of it.

Do you have a working example?

Thanks,

DanV

[Brett Valantine]

I don't have a publicly available working example I can point you to, but I can outline in more detail what I did:

Here is the HAML for my partial/template:

%pre#editor{:style => 'position: relative; height: 600px; width: 100%;'}= @content

or in ERB it would look something like this:

<pre id="editor" style="position: relative; height: 600px; width: 100%;"><%= @content %></pre>

The important bits (at least what I had to do to make things work):

1) use relative or absolute positioning

2) use fixed height and width (I am using 100% because the <pre> element's parent is fixed width and that seems to work so far)

3) use the <pre> element (I could be mistaken but I am pretty sure you need to use a different ACE setup with textareas)

4) use an id without underscores

5) use "noconflict" versions of the ace files (see below)

Here are the javascript files I am using (from the ACE build directory):

ace-noconflict.js

mode-html-noconflict.js

theme-textmate-noconflict.js

And I am initializing the setup with the following javascript (I have it in an external javascript file):

$(function() {

  // Setup Ace

  var editor = ace.edit("editor");

  var HtmlMode = ace.require("ace/mode/html").Mode;

  editor.getSession().setMode(new HtmlMode());

  editor.setTheme("ace/theme/textmate");

  editor.renderer.setShowPrintMargin(false);

  editor.renderer.setHScrollBarAlwaysVisible(false);

  editor.getSession().setUseSoftTabs(true);

});

I am using the jQuery document ready event in the above example, though it works equally well with the standard on load event used in the ace examples.     I hope this helps!

Brett :-)

--
You received this message because you are subscribed to the Google Groups "Ajax.org Cloud9 Editor (Ace)" group.
To view this discussion on the web visit https://groups.google.com/d/msg/ace-discuss/-/yt2l2Bll534J.
To post to this group, send email to ace-d...@googlegroups.com.
To unsubscribe from this group, send email to ace-discuss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/ace-discuss?hl=en.

[vooboo13]

How do you handle the spacing when using HAML?

For instance, the initial text and element looks like this:

#webeditor
Task main(}
{

}

But because it's HAML, it uses the extra "tabs" and spacing so the
output looks like this:
http://screencast.com/t/G2P7kS1Om

Any ideas?

On Mar 18, 5:08 pm, Brett Valantine <bre...@onboardingsystems.com>
wrote:

> > To view this discussion on the web visithttps://groups.google.com/d/msg/ace-discuss/-/yt2l2Bll534J.

[vooboo13]

I figured out how to handle this, but I figure I'll answer myself here
in case anyone is looking.

Instead of writing my "initial text" the way I had it:
#webeditor
Task main(}
{

}

You have to use the return character ascii code &#13;