WYSIWYG view bound to Ace Editor - javascript

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.


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.


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);
});

Related

React WYSIWYG editor with Material UI components support

So I'm building a dashboard that allows clients to write some text with a WYSIWYG editor and publish it so it is available in an online reader.
Previously, I integrated TinyMCE as my text editor and it works well. It generates HTML from the text and formatting the user inputs. Now, I need to allow clients to be able to add some Material-UI components such as an ExpansionPanel to their content (by maybe clicking a button in the text editor toolbar).
I stumbled upon mui-rte that allows adding custom components the way I want but it appears to only generate a draft-js format which I'm unfamiliar with and will not be backwards compatible with HTML strings that have already been generated by clients.
My question is, how do I generate an HTML string in the format below with a WYSIWYG editor
<div>
<h1>this is some text</h1>
<ExpansionPanel></ExpansionPanel>
</div>

there is a module called draftjs-to-html. In order to get html from wysiwyg editor you could write something like this.
import draftToHtml from 'draftjs-to-html';
console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
convertToRaw comes from draft-js editorState.getCurrentContent() comes from state change event in the editor which is documented in wysiwyg documentation.

Rich Text Editor : Display MathJax

Parent doc uses MathJax to display mathematics. To display the maths in Rich text editors which uses iframe, could any one suggest a good and simple approach? I am now left with the following
a. to load the MathJax again in iframe.
Since the browser caches the js and css, this may not create additional overhead.
b. get all the scripts and css using js and reattach to the editor
c. or use rich text editor which uses div instead iframe.

Javascript: ACE editor inside a FancyBox

I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.

I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.

How to mimic/implement a WYSWYG editor on a web page?

All I know is that it uses a IFRAME tag as it's presentation layer, how does it store the data, how does it switch between WYSIWYG mode and source mode?

Most in-browser WYSIWYG editors (Google Docs is a notable exception) use the contenteditable attribute to make an element editable.
The data doesn't need to be stored in any special way, it's just the HTML content of the editable node.
Switch to source mode by dumping the innerHTML of your editable element into a textarea, showing the textarea, and hiding the editable element.
You can find lots of information and tutorials by googling contenteditable.

I'd use one of the many free ones:
http://akzhan.github.com/jwysiwyg/
example: http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html

Which wysiwyg editor in Drupal will give me most control over markup?

At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?

WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.

In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor

I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.

I would suggest BUEditor, you can configure all buttons and thus control the output

Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.

Categories

Resources