WYSIWYG view bound to Ace Editor

Question

I'm using Ace Editor to create a simple WYSIWYG editor for a client.

I've seen divshot.com has a WYSIWYG editor that also uses Ace, but I can't figure out how they select elements on the page. They also are able to properly select elements in their code view and it properly selects items in the page view.

setting content in Ace editor is pretty basic

editor.setValue('some text content');

so how can i make the elements in my wysiwyg view bound to Ace editor?

btw I'm using Angular as well and my WYSIWYG content view is an iframe.

Answer 1

It's very, very difficult (I'm a cofounder of Divshot).

We wrote a proprietary component recognition engine that allows for two-way syncing between an ACE Editor instance and a rendered HTML canvas. It involves lots and lots of DOM traversal, selector recognition, source cleaning, and ACE hacking.

Answer 2

You can look at the session for the editor and grab the current text that way.

rte.editor.getSession().on('change', function(e) {
   var text = rte.editor.getSession().getValue();
   $('#output').html(text);
});