Widok WYSIWYG związany z edytorem Ace - javascript, angularjs, as-editor

Używam edytora Ace do stworzenia prostego edytora WYSIWYG dla klienta.

Widziałem divshot.com ma edytor WYSIWYG, który również używa Ace, ale nie mogę zrozumieć, w jaki sposób wybiera elementy na stronie, a także potrafi poprawnie wybrać elementy w ich widoku kodu i odpowiednio wybiera elementy w widoku strony.

ustawianie zawartości w edytorze Ace jest całkiem proste

editor.setValue("some text content");

więc jak mogę uczynić elementy w moim widoku wysiwyg związanym z edytorem Ace?

btw Używam również Angulara, a mój widok treści WYSIWYG to element iframe.

Odpowiedzi:

To bardzo, bardzo trudne (jestem współzałożycielem Divshot).

Napisaliśmy zastrzeżony element rozpoznawaniasilnik umożliwiający dwukierunkową synchronizację między instancją edytora ACE i renderowanym obszarem HTML. Obejmuje dużo przechodzenia przez DOM, rozpoznawanie selektorów, czyszczenie źródeł i hakowanie ACE.

Możesz zajrzeć do sesji edytora i pobrać aktualny tekst w ten sposób.

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