Hi all,

At Amherst College, we are using the Wysiwyg module and had a need for a good HTML source editor so I modified the Wysiwyg module to add the Ace HTML editor as an editor. I figured I'd post it here in case it's useful to anyone.

I actually only added a few files, all separate and distinct from Wysiwyg so I didn't actually have to modify any of the Wysiwyg code, but I don't know a good way of adding the files I used and telling easily how to drop them into the existing Wysiwyg folder hierarchy. (for example, a diff wouldn't work because I'm not editing lines in the Wysiwyg module, just adding files)

Anyway, I just took our Wysiwyg directory (based on 6.x-2.4, the latest version), tarred it up, and attached it to this issue.

As for the version of Ace, this is tested off the latest in Github (so git clone git://github.com/ajaxorg/ace.git is the easiest way to get that) and it expects the library to be in sites/all/libraries in a folder called "ace". Should be self-explanatory and basically the same as the rest of the wysiwyg jazz and it also checks for the library as with any of the other wysiwyg libraries before allowing it to be enabled. This also expects jQuery UI to be present in sites/all/libraries. It also ignores basically all configuration options at the time being so if changing configuration options isn't working, that's basically expected behavior.

Regards,
Victor
Amherst College

Disclaimer: This is unsupported. It works for us and I thought it may be useful so we're sharing as good members of the Drupal community ;) But if it doesn't work for you, then sorry, you're on your own. There is nothing we can do to help you, we cannot offer any support and will not respond to any requests for support. If anyone wants to take this and run with it, feel free to modify, tweak, etc. to your heart's content!

It would be nice to get some version of this committed back into the Wysiwyg module at some point, but we'd probably have to remove some of the dependencies first (like the dependency on jQuery UI).

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mail@victorquinn.com’s picture

FileSize
132.2 KB
111.73 KB
75.06 KB
80.36 KB
82.05 KB
80.37 KB
85.36 KB

Attached are some screenshots of the Ace editor in action on our website. Sorry it's kind of difficult to tell the screenshots from the text as they both have white backgrounds. drupal.org strips any styling I apply so I can't put borders or anything on the images.

Light:
Light

Dark:
Dark

Find:
Find

Replace:
Replace

Goto Line

Preview:
Preview

Fullscreen:
Fullscreen

indytechcook’s picture

This works great even on D7. just need a little change to the loading of the library since d7 includes jquery ui. Thank you for saving me HOURS/Days of work :) I created a separate module locally. But i can create a patch if needed.

/**
 * Perform additional actions upon loading this editor.
 *
 * @param $editor
 *   A processed hook_editor() array of editor properties.
 * @param $library
 *   The internal library name (array key) to use.
 */
function wysiwyg_ace_load($editor, $library){
  // Load jQuery UI
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.position');
  drupal_add_library('system', 'ui.widget');
  drupal_add_library('system', 'ui.mouse');
  drupal_add_library('system', 'ui.draggable');
  drupal_add_library('system', 'ui.dialog');
  drupal_add_library('system', 'ui.button');
}
sun’s picture

Version: 6.x-2.4 » 7.x-2.x-dev

There's a wysiwyg_EDITOR_load() callback that can be used for this purpose; have a look into editors/yui.inc.

Moving to D7, as I'm not sure whether we're going to be able to resolve the jQuery UI library dependency handling in D6 soonish, and jQuery UI is shipped with D7 core already.

TravisCarden’s picture

Title: Add support for Ace (Ajax.org Cloud9 Editor) » Ace Ajax Editor
FileSize
5.38 KB

Here's a patch to get this moving. It implements Ace only. It has no custom buttons or extras. As a consequence, it's much simpler, and it has no dependency on jQuery UI. This gets things awfully close, but there are a few loose ends yet:

  1. How do you expose the theme selection to the user? Right now it's just using the first in the list of defined options (Ambiance). The existence of hook_INCLUDE_themes() suggests to me that it must be meant to be user configurable. Not yet implemented. See #414496: Allow to select editor theme/skin.
  2. Is there any way to give the user a non-boolean configuration option somewhere? I want to expose the editor mode (i.e. syntax highlighting scheme: HTML, CSS, JavaScript, etc.), but I don't know if that's possible. Figured it out in later patch.
  3. I don't know the WYSIWYG API thoroughly. Can someone confirm I haven't left any essential hooks unimplemented or anything? Specifically, I did nothing in the way of plugin handling. I don't frankly know what that would mean for Ace or whether it needs to be accounted for if the editor won't use it.
  4. The "Editor appearance", "Cleanup and output", and "CSS" filter options tabs don't make any sense for Ace as they are. Is there a way to hide or disable them? Figured it out in later patch.
TravisCarden’s picture

Title: Ace Ajax Editor » Add support for Ace (Ajax.org Cloud9 Editor)
Status: Active » Needs review
TravisCarden’s picture

Here's an updated patch. I figured out how to add theme and mode selection to the profile settings form and hide the irrelevant settings. I also discovered that ace.js doesn't like being aggregated, so I disabled preprocessing for it. I could expose other configuration options, but I think this pretty much gets the job done for a first go. I feel pretty comfortable with the patch, if someone could review it now. :)

TravisCarden’s picture

FileSize
8.7 KB
601 bytes

Oops. Little error with the mode setting. This is better.

TravisCarden’s picture

Title: Ace Ajax Editor » Add support for Ace (Ajax.org Cloud9 Editor)
FileSize
9.1 KB
3.98 KB

Sorry for the patch spam. I tweaked and fixed a few more small things and made the rest of the major settings configurable. I think I'm done now. :)

TravisCarden’s picture

Oh dear; I'm so sorry. I found a bug in the latest patch. Here's an updated patch. It contains a couple of other small improvements, too. Namely, I grouped the themes in the interface by "Bright" and "Dark" and fixed some of the theme names.

TravisCarden’s picture

Oh no; using the OPTGROUPs on the theme selector broke something, but I missed it in my testing. Here's a fix, and then I'm gonna be quiet until someone reviews it. Sorry again for all the noise!

squaretone’s picture

Re-added the very nice grouping of "Bright" and "Dark" themes.

jonhattan’s picture

+++ b/editors/ace.inc
@@ -0,0 +1,247 @@
+function wysiwyg_ace_version($editor) {
+  // @todo Detect this for real (perhaps from ChangeLog.txt) rather than
+  //   hardcoding it.
+  return '0.2.0';
+}

Other editors do parse changelog file. See markitup.inc or openwysiwyg.inc. BTW Ace has wrong version numbers in changelog, reported at: https://github.com/ajaxorg/ace/issues/1107

OTOH I've set up the editor and used it with no issues.

jonhattan’s picture

They fixed the changelog upstream. Attached patch implements wysiwyg_ace_version().

TravisCarden’s picture

Nice! Thank you for fixing my array merging snafu, @squaretone. And @jonhattan, thanks for getting the upstream issue fixed in Ace! As soon as that gets into the latest Ace build, your change will work great. Until then, the library will report version 0.1.0 and the module will say it doesn't support such an old version, because it's coded for 0.2.0 or later. If someone wants to confirm that the actual 0.1.0 release of Ace would work with our implementation, we could RTBC now. Otherwise we probably need to wait for the next Ace build.

jonhattan’s picture

TravisCarden’s picture

Apparently they use a separate repository for actual builds: https://github.com/ajaxorg/ace-builds/—at least that's where the main web site directs you to go to download it. The repository you refer to seems to be the upstream development repository. Am I mistaken?

TravisCarden’s picture

I noticed today that if I have a file field in the node edit form with an instance of Ace and I upload a file or remove one it detaches the Ace instance and doesn't replace it. Can anyone shed any light on the issue there and what I need to do to fix it?

TravisCarden’s picture

FileSize
656 bytes
9.63 KB

Ah; I figured it out.

TravisCarden’s picture

mstrelan’s picture

Hi guys. I'm having difficulty getting this to work. I have downloaded the library and patched WYSIWYG. I can choose the Ace editor from the WYSIWYG profiles page, select a theme and plugins etc. Then when I edit a node and select the text format with the WYSIWYG profile assigned to it I don't see the ace editor or any syntax highlighting. Just a plain textarea, but with "grippie" removed. I get no javascript errors and the source HTML seems to update as per the kitchen sink demo. Any ideas?

mstrelan’s picture

To follow up my previous comment, the following styles are being output to the HTML.

.ace_editor {
  position: relative;
  overflow: hidden;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

This seems to be coming from libraries\ace\src-noconflict\ace.js

var editorCss = ".ace_editor {\
position: relative;\
overflow: hidden;\
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\
}\
...

This is easily resolved by increasing the specificity of the WYSWIYG specific ace styles. Patch attached. I'm not sure how to do an interdiff, but I simply added .wysiwyg-ace-wrapper before .ace_editor in ace.css.

TravisCarden’s picture

FileSize
301 bytes

Thanks, @mstrelan. That's certainly a harmless change; it looks good to me. I take it everything else works for you with that tweak?

Attached is an interdiff for the patch. Here's how to create your own. :)

mstrelan’s picture

Yes it seemed fine for me. I tested with TinyMCE on 2 formats, no editor on a 3rd format and Ace on the 4th. Switching between formats seemed fine. The only issue I noticed is that the Ace editor was not resizeable but this is minor and could potentially be fixed later.

andeersg’s picture

Is there a single patch in this thread i can use? Or do i have to apply them in order?

yannickoo’s picture

You can use the patch from #21.

Alan D.’s picture

Status: Needs review » Reviewed & tested by the community

So far no issues detected ;)

@sun/TwoD
What is the likelyhood of this feature?

I am making it part of a standard installation for our internal work and wondering if we should keep patching or to define our own hook_INCLUDE_editor().

Alan D.’s picture

Issue summary: View changes

Added Amherst College to my signature.

mikeprinsloo’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Needs review
FileSize
9.67 KB

The ChangeLog.txt file no longer has the version number at the top of the file. The first line in the file is blank causing the ace library to fail to load. I've placed the wysiwyg_ace_version() function to loop over each line in the file until it finds the version number. Patch attached.

netsensei’s picture

Status: Needs review » Reviewed & tested by the community

This works for me. Would love to see this as a part of WYSIWYG!

netsensei’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
10.01 KB

Hm. Applying the patch in #27 returns a few indentation and whitespace errors.
Attached a new patch which should fix that.

ksenzee’s picture

I've been running this code in production for almost a year. I've only now found a bug, which is that we need a Drupal.wysiwyg.editor.instance.ace object with insert, getContent, and setContent methods. (In my case, the missing getContent() method broke media_wysiwyg integration when I tried adding a wysiwyg-enabled field to images.) Patch and interdiff attached.

Alan D.’s picture

Thanks, we never saw that issue, but we too have used this for what now seems like years.

It is a great add-on for code based format support :)

TwoD’s picture

Thanks for the updates.

The patch still has some whitespace errors (and the function wysiwyg_ace_plugins is a techically a callback rather than a hook implementation), but I won't be applying this now anyway.
I can not take on supporting an editor which I have limited experience with before Wysiwyg itself gets some much needed love.

It would still be possible to implement support for the editor in another module though, if it also implements hook_wysiwyg_include_directory($type) to return the name of a subfolder in which ace.inc could be found when the $type argument is 'editors'. The PHP contents of the patch would then go into that file.

That way you won't have to re-apply the patch when upgrading Wysiwyg.

Alan D.’s picture

WYSIWYG Ace Editor sandbox module can be found here: http://drupal.org/sandbox/netsensei/2177597

joseph.olstad’s picture

Status: Needs review » Reviewed & tested by the community

This patch still works great!

ace editor is actually really cool , syntax highlighting for just about any programming language worth mentionning.

Alan D.’s picture

Status: Reviewed & tested by the community » Closed (won't fix)

I won't be applying this now anyway.

The maintainer has spoken in #32.

Personally I haven't used the sandbox, but the code was easy enough to build into your own module if you want to use it :)

joseph.olstad’s picture

ah ok, either way, it looks good, ace editor is pretty cool for programer / programming type websites.

joseph.olstad’s picture

Status: Closed (won't fix) » Needs work

Lets make the recommended whitespace fixes to the patch.

Also, I'd hesitate to close this, as wysiwyg project could use some extra maintainers, ones familiar with ace_editor if need be, however it was super easy to set up btw , I spent only a few minutes and got it working.