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.
Related
When I was looking for a live-preview inline Markdown editor for a project - live editing within an HTML page - I came across this one. The feature that interested me the most was scrollspy: when you scroll the input <textarea>, the preview <textarea> scrolls with it. This is very convenient, as the project in question relies on comfortable writing.
The problem I'm having is that such scrollspy uses jQuery, which I'm not comfortable with. One of my main points is to make the project as quick to load and responsive as possible, and jQuery minified increases the local machine loading time by ~100 ms - which, I imagine, translates into even more loading time online. I already have ~300 ms local loading time and if I have to increase it, I'd prefer to do so only when necessary.
Still, I find the text scrollspy feature very attractive and am looking for a way to implement it without relying on jQuery. I'm looking for the simplest and quickest, performance-wise, way to achieve that, using the tools already at my disposal.
I'm using AngularJS, Commonmark parser for Markdown, angular-commonmark.js (which allows me to parse any tag's input as Commonmark) and UI Bootstrap (a Twitter Bootstrap clone built solely with Angular).
EDIT: it turned out, during experimentation, that placing Angular-Commonmark attribute onto <textarea> outputs raw HTML to the <textarea> rather than Marked-down text (i.e., <h1>Text</h1> rather than a bold and big "Text"). I was using <div> to test the output and it worked just fine. Would that disallow me to use scrollspy (since <div>s are unscrollable)?
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);
});
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
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.
I was wondering how online rich text editors maintain the formatting when you paste text from a webpage or document. A standard textarea box only takes text while these WYSIWYG editors seem to use a DIV. How does it work?
Online rich text editors use contentEditable or designMode to take advantage of the browser's native support for HTML editing. When you paste into a contentEditable or designMode element, the browser puts HTML directely into the element. Try it yourself by pasting into Midas Demo and then using Firebug's inspect element to look at the HTML you pasted.
JavaScript applications can use the execCommand method to format the user's selection in a rich text editor.
WYSIWYG Editors actually build on top of basic HTML Editing functionality that the browsers already have built in. In Firefox, the technology is called Midas. In IE, contentEditable.
By using existing browser capabilities (IE - ContentEditable). This allows the developer to let the user edit html directly. They usually use an iFrame to separate the editable section from the rest of the page, but this is not required.
Then the developer can simply read the html source of the iframe (or whatever) and they're done.