[DISCONTINUED] A simple web-based WYSIWYG editor, written in MooTools.
Home Page: http://cheeaun.github.io/mooeditable/
License: MIT License
Note: This project is currently on hiatus. Watch out for the forks instead.
A simple web-based WYSIWYG editor, written in MooTools.
There are two ways. Note that textarea-1 is the id of a textarea element. This is the simple one:
#JS
$('textarea-1').mooEditable();
And this is the Classic one:
#JS
new MooEditable('textarea-1');
Code to reproduce:
new MooEditable(textarea, {
'baseCSS': 'html { height: 100%; cursor: text } body.focus { background: red; } ',
'onEditorFocus': function() {
this.doc.body.addClass('focus');
},
'onEditorBlur': function() {
this.doc.body.removeClass('focus');
}
});
Expected result: iframe body background color change
Actual result: no change in Chrome or IE8
If there is plain text, no html, in the clipboard the MooEdtiable.CleanPaste.js function call
`````` e.clipboardData.getData('text/html')on line 51 returns nothing in current versions of **Google Chrome** (Firefox works just fine) thus failing the paste action. Use additionale.clipboardData.getData('Text')```
to fix that.
Editing continues directly inside the main container. IE8 works. Other editors like wymeditor get it right in Firefox.
This bug only appears on Chrome. Didn't test on IE, but FF and Safari handle it well.
It's a focus issue, which I believe it close to the bug you recently fixed.
On a chrome browser, if you hit the tab key to switch from one to the next, MooEditable doesn't get selected properly. It looks like every button on the toolbar gets selected before it reaches the text area.
Tested with the latest repo from today. Running out of ideas on how to fix this bug.
A comma on line 211 is breaking IE6/7 emitting the usual IE error message
Error: Object doesn't support this property or method
Hello
After this line you need to call this.checkStates() to update Safari's states as the selected node has now changed.
Thanks
Ryan
To overcome this I have added another option, 'dimensions', and changed line 111 to
var dimensions = this.options.dimensions || this.textarea.getSize();
which works for me.
I have a form with multiple input fields and a mooeditable. before I transformed the textarea to a mooeditable, I could send the form via pressing enter/return on a input-field. but now on pressing return, the focus is moved to the first mooeditable-toolbar button and this button is toggled - and the form is not sent. this happens in chromium and firefox.
There are some error which stop MooEditable.js from working when compessed:
so code should look like:
line 39 :-
baseCSS: 'html{ height: 100%; cursor: text }\ body{ font-family: sans-serif; border: 0; }',
line 43 :-
html: '<html>\ <head>\ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\ <style>{BASECSS} {EXTRACSS}</style>\ {EXTERNALCSS}\ </head>\ <body>{CONTENT}</body>\ Z</html>'
line 1022:-
input.focus();
see MooEditable.js for edits.
Just for my reference - I will fix this soon ;o)
greetings André
Hello,
I think that the "Remove useless BRs" feature is faulty because it removes all BRs following a markup, when the removal should only occur when the BR is following a block type markups. Consider the following HTML code:
<p><strong>Du lundi au vendredi</strong><br />9h - 12h30 / 14h - 19h</p>
In this example, the BR element is removed because it follows a STRONG element, but this is unexpected is not desired, and would not happen if "Du lundi au vendredi" was not emphasized. I made a patch, maybe you'll find it useful:
if (this.options.paragraphise) source = source.replace(/(div|h1|h2|h3|h4|h5|li|object|ol|p)><br ?\/?>/gi, '$1>');
Best regards,
Olivier Laviale
All my buttons are blank and there's an undefined error on line 84 (dialog.name = action + ':' + name;) when using More/Locale (for a different script) with MooEditable.
Version 1.3.1
It would be great if MooEditable supported tables. It is the only thing that keeps me from moving to this editor from other.
To work around this I have, prior to (approx) line 1038;
return (action == '|') ? this.addSeparator() : this.addItem(action);
added
if (action == '~') return new Element('br').inject(this.el);
Obviously it should be a switch statement with an 'addLineBreak()' function.
I doubt it warrants more code than this.
-or- should I simply extend 'MooEditable.UI.Toolbar' and write my own 'render' method?
in Mooeditable.Smiley we need to make sure el.tagname exists.
When a user clicks on the scroll bar IE8 likes to send the scroll bar as the event.target which does not have a tagname.
http://webodf.org/
http://webodf.org/demo/
http://www.vandenoever.info/blog/2015/05/30/typing-together-alone.html
Collaborative editing, rich interface, collaborative editing.
Line 44:
MooEditable.Actions.settings.forecolor.colors.each(function(row){
should read
MooEditable.Actions.Settings.forecolor.colors.each(function(row){
note capital 'S'
Thanks
Add Scribe to the wiki
Sorry I accidenty closed this so I have created a new Issue.
There are some error which stop MooEditable.js from working when compessed:
so code should look like:
line 39 :-
baseCSS: 'html{ height: 100%; cursor: text }\ body{ font-family: sans-serif; border: 0; }',
line 43 :-
html: '<html>\ <head>\ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\ <style>{BASECSS} {EXTRACSS}</style>\ {EXTERNALCSS}\ </head>\ <body>{CONTENT}</body>\ </html>'
line 1022:-
input.focus();
see MooEditable.js for edits.
In IE8 the demo "MooEditable.Extras.html" :
formatBlock seems to do nothing.
In IE9, the editor isn't being loaded at all at the moment - only the raw textarea element is seen.
The following error comes up when the domready function is run:
Object doesn't support property or method 'mooEditable'
Depending of current view, Pagebreak inserts into text different code:
(in simple mode) eitherimg class="mooeditable-visual-aid mooeditable-pagebreak"(in rich text mode).
Why such difference?
Also pagebreak really breaks some tags, e.g. paragrahg tag.
IE 8 doenst support Range-methods like "selectNode()". So extend the Range-Object. TinyMCE does this in a good way. I think it can easily be adapted.
Hi @cheeaun,
Thank you for putting together https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors. I'm one of the editors who tried to improve the page.
As you have seen, that wiki format just isn't good for collaboration. You can't revert, people can vandalize it, new contributors are discouraged from editing because they have to bug you instead etc.
To solve those problems, I have created a simple Markdown file on Github, that anyone can submit PRs to. I've also done a lot of work on documenting each editor's main features.
Would you like to work together on it?
Hi
Is there any online demo of your WYSIWYG editor?
Thanks!
Hi, I've prepared an Italian localization file for MooEditable.
Locale.define('it-IT', 'MooEditable', {
// MooEditable
ok: 'OK',
cancel: 'Annullare',
bold: 'Grassetto',
italic: 'Corsivp',
underline: 'Sottolineato',
strikethrough: 'Barrato',
unorderedList: 'Lista non ordinata',
orderedList: 'Lista ordinata',
indent: 'Aumentare il rientro',
outdent: 'Diminuire il rientro',
undo: 'Annulla',
redo: 'Ripristina',
removeHyperlink: 'Rimuovere il link',
addHyperlink: 'Aggiungere un link',
selectTextHyperlink: 'Prego selezionare il testo da includere nel link.',
enterURL: 'Inserire un URL',
enterImageURL: 'Inserire l\'URL dell\'immagine',
addImage: 'Aggiungere un\'immagine',
toggleView: 'Cambia la Vista',
// MooEditable.Charmap
insertCustomCharacter: 'Aggiungi un carattere speciale',
insertCharacter: 'Aggiungi',
// MooEditable.Extras
blockFormatting: 'Blocca la Formattazione',
paragraph: 'Paragrafo',
heading1: 'Titolo 1',
heading2: 'Titolo 2',
heading3: 'Titolo 3',
alignLeft: 'Allineamento a sinistra',
alignRight: 'Allineamento a destra',
alignCenter: 'Allineamento centrato',
alignJustify: 'Allineamento Giustificato',
removeFormatting: 'Rimuovere la Formattazione',
insertHorizontalRule: 'Inserimento di una Linea Orizzontale',
// MooEditable.Flash
embed: 'Inserire il codice da incorporare',
flashEmbed: 'Aggiungere un oggetto flash',
// MooEditable.Forecolor
changeColor: 'Cambiare il colore',
// MooEditable.Image
imageAlt: 'alt',
imageClass: 'classe',
imageAlign: 'allineamento',
imageAlignNone: 'nessuno',
imageAlignLeft: 'sinistra',
imageAlignCenter: 'centrato',
imageAlignRight: 'destra',
addEditImage: 'Aggiungere/Modificare un\'immagine',
// MooEditable.Pagebreak
pageBreak: 'Interruzione di Pagina',
// MooEditable.Smiley
insertSmiley: 'Ajouter un Smiley',
// MooEditable.Table
tableColumns: 'colonne',
tableRows: 'righe',
tableWidth: 'larghezza',
tableClass: 'classe',
tableType: 'tipo',
tableHeader: 'intestazione',
tableCell: 'cella',
tableAlign: 'allineamento',
tableAlignNone: 'nessuno',
tableAlignCenter: 'centrato',
tableAlignRight: 'destra',
tableValign: 'allineamento verticale',
tableValignNone: 'nessuno',
tableValignTop: 'in testa',
tableValignMiddle: 'al centro',
tableValignBottom: 'in fondo',
addTable: 'Aggiungere una tabella',
editTable: 'Modificare una tabella',
addTableRow: 'Aggiungere una riga',
editTableRow: 'Modificare una riga',
mergeTableRow: 'Unire la riga',
splitTableRow: 'Dividere la riga',
deleteTableRow: 'Cancellare la riga',
addTableCol: 'Aggiungere una colonna',
editTableCol: 'Modificare la colonna',
mergeTableCell: 'Unire la colonna',
splitTableCell: 'Dividere la colonna',
deleteTableCol: 'Cancellare la colonna'
});
cheeaun, thanks for the google ads fix from the previous issue I posted, but with that I discovered a new issue.
We had a situation here where a user was trying to put two google ad blocks in one content area (that uses mooeditable). He'd paste them into the source view, update, then if he went back to the updated form and looked at the edit view he'd now be showing 3 blocks of google code.
With a lot of debugging I was able to determine that the initial this.doc.write() call in the attach method of MooEditable was causing the <script> blocks to be parsed by the browser (Firefox Mac 3.6), which resulted in only one of the doc blocks to be written to the iframe. I believe that this then caused MooEditable to think the content in the iframe, and the original content was different, and it'd end up appending the textarea content and the iframe content together, resulting in 3 blocks of the google adsense code.
This Stack Overflow question sort of describes what I believe to be happening here: http://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write
I was able to fix it by forcing a replace on any <script and </script tags to something that would likely not be used (I did <scrmooipt and </scrmooipt) in the cleanup method (before the final trim). Then after the document.id(this.doc.body) in the attach method, I'd do a MooTools .set('html') on the body, and replace "scrmooipt" with "script" (this may not be necessary if it doesn't really matter if the JS is "proper" in the Iframe). I also had to do a similar replace in the getContent() method so that when viewed in source mode, or saved, the "scrmooipt"s aren't there.
My fix seems very hacky, but it appears to work as is.
Let me know if this all makes sense, if not, I can try to put together a couple of mooshells showing the bug, and my hack.
Hi! I just click the link specified in the gh-page, but it load a blank page
Can you reproduce this bug also? I'm testing on Firefox 3.6 on Snow Leopard. I figured out a hack to fix the problem.
Change line 288:
this.selection = new MooEditable.Selection(this.win, this);
Change the initialize function of MooEditable.Selection to:
initialize: function(win, editor){
this.win = win;
this.editor = editor;
},
Then add this before the insertHTML line in the nonIE section of the insertContent function:
if (Browser.firefox) {
this.win.document.execCommand('insertHTML', false, content);
this.editor.execute('undo');
}
after toggling the view preformated text looses formating,
new lines become html line breaks
There's a bug in the ensure root element function on line 598. You need to replace:
for (k=start+1; k<=i; k++){
with
for (k=start+1; k<i; k++){
I'm a bit out of sync with your codebase right now, so it seemed quicker to do it this way rather than do a commit.
To edit a link you either Remove and Add a link, or view the source to make such a change.
In the 'createlink' command function, this would do it;
var node = this.selection.getNode();
if (node.get('href')) prompt.el.getElement('.dialog-input').set('value', node.get('href'));
Keep up the good work!
https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors
Etherpad uses it's own Editor..
When pasting in some javascript source code to the source view of mooeditable (can be done using the MooEditable.html demo file in this package) quotes get moved around, breaking the JS code pasted.
Example:
Load Demos/MooEditable/MooEditable.html in your browser (Firefox 3.6 Mac is what I've been testing with), open the source view, paste in the following Google Anayltics code:
<script type="text/javascript"><!--
google_ad_client = "pub-1234567789";
/* comment */
google_ad_slot = "1234567890";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Go back to wysiwyg mode, then click on the source icon again, notice now that the source for the JS pasted above now looks like:
<p><script type="text/javascript"><!--
google_ad_client = "pub-1234567789";
/* comment */
google_ad_slot =" "1234567890";
google_ad_width" =" 300;
google_ad_height" =" 250;
//--">
</script></p>
<p><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
The extraneous paragraph tags aren't so much a problem as the moving of the quotes are (though the paragraph tags shouldn't be added either, IMO, since this was done in source view, not in wysiwyg view).
I'll look in the source some and see if I can patch this, but I'm not familiar with mooeditable's code base yet, so figured I'd post the issue first in case the pros out there know where to look. :)
How to integrate with bbPress default theme?
Thanks?
Hi! Please update the code to MooTools 1.3 and MooMore 1.3! Thank you very much for your hard work!
Fehler: dialog.attempt is not a function
Quelldatei: file:///C:/Users/SunboX/Desktop/vincentbluff-mooeditable-8b4ecb0aed7d7dcc87000cdab7c6dbdc3706a8c2/Source/MooEditable/MooEditable.js
Zeile: 61
The content borks when textarea value is "<strong>This</strong> is cool!" (sans quotes, without
tags)
The editor doesn't work in mobile browsers, including those on the iPhone/iPad, at the moment. You can tap the button to edit in HTML view but the main iframe version doesn't work at all, unfortunately.
Would be nice if someone can implement "Lang" support. :o)
Hi There,
We found a little bug in the Forecolor function in IE.
If you allready posted some content and you want to edit this content again the HTML code is changed to uppercase elements like FONT and the quotes are gone on the color attribuut.
We use the content output for flash. Without the quoted attributes we get errors.
Ik hope you have a soloution.
Thx
Greetings
Patrick
Los Banditos
Hi,
I'm using MooEditable on a site where I'm using TypeKit. I'd really like to get TypeKit working inside the MooEditable iframe, but I haven't had any luck. I tried editing options[html] to include the TypeKit script tags but that broke everything. Any suggestions?
Thanks!
Nick Chapman
When creating an html-element with an id-attribute in an empty editor-field, the function MooEditable::ensureRootElement() deletes this attribute.
Change MooEditable.js line 642 from
html += new Element('div').adopt($(childNode).clone()).get('html');
to
html += new Element('div').adopt($(childNode).clone(true, true)).get('html');
to fix this.
Line 40:
var settings = MooEditable.Actions.settings.smiley;
should read;
var settings = MooEditable.Actions.Settings.smiley;
Thanks
When adding a link with an image selected, after clicking OK to put link on image the image is completely removed from the editor.
Throws a JS error at this line:
this.win.document.execCommand('insertHTML', false, content);
in:
MooEditable.Selection
MooEditable doesn't load properly in IE8 because of this code in the attach function:
this.doc.addEventListener('focus', function(){
self.win.fireEvent('focus');
}, true);
IE says "object doesn't support this property or method". I'm running Windows 7.
Hello
Using Safari 4.0.5 clicking on an image in the mooeditable window and dragging it around would result in the image becoming a broken link icon.
Remove line 380 block:
// make images selectable and draggable in Safari
if (Browser.Engine.webkit){
var el = e.target;
if (el.get('tag') == 'img'){
this.selection.selectNode(el);
}
}
And all works as expected...
I'm not sure if I added this originally or you did, but either way it seems redundant now.
Thanks,
Ryan
Small small typo on line 247 in MooEditable.js:
dbllick: this.editorDoubleClick.bind(this),
should be:
dblclick: this.editorDoubleClick.bind(this),
Also would you be interested in expanding
editorDoubleClick: function(e){
this.fireEvent('editorDoubleClick', [e, this]);
},
to
editorDoubleClick: function(e){
this.actions.each(function(action){
var item = this.toolbar.getItem(action);
if (item) {
var dblclick = MooEditable.Actions[action]['ondblclick'];
if (typeOf(dblclick) == 'function'){
dblclick.attempt([item,e], this);
return;
}
}
}.bind(this));
this.fireEvent('editorDoubleClick', [e, this]);
},
This would allow custom buttons to have a double click feature. For example, the createlink button can be extended so that if the users double clicks on a link then the link dialog will open up for edting.
When using only a table (so remove all the text) in the editor it is not possible to place the cursor before or after the table anymore. The cursor can only be placed inside the table
The workaround I use now is to place a
before or after the table in the 'code-view'.I had been trying to set a new Locale for my language Spanish but i just can't do it properly, could you point me in the right direction?
thanks for your help.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.