- How do I use MooRTE? Keep it simple!
- myElement.moorte()
- A little bit more descriptive - I'm new to Moo!
- Download the lite editor from here.
- Unzip and copy into the root of your website.
- Modify the body of the index.html file with your own content.
- Make sure the element that you want to keep editable has the class of rte:
<span style="width:50px"></span><div class="rte">Lorem</div><br/>
- Done!
- I would like to apply the editor to a textarea. Will that work?
- Yes.
Just call it as you would on any other element: $('myTextarea').moorte();
If the user has no javascript, the textarea will degrade gracefully.
(Technically, the textarea is replaced with an editable area, and then updated on submit.)
- How does someone submit the HTML generated by the editor?
- If the RTE is added to a textarea which is part of a form, the form can be submitted regularly.
Alternatively, there is a 'save' button, which submits the form using AJAX - not requiring a page refresh.
You can also roll your own submit button, check out the docs for more info.
- Do I have to worry about XSS attacks? Will MooRTE clean the submitted material?
-
The editor comes with a rather extensive clean function which is run when the editor or the parent form is submitted.
Nonetheless, this cleaning is not meant to be comprehensive, and NO client side tool can be 100% effective in preventing XSS hacks.
Take care to add server side protection as well, such as HTML Purifier.
- How do I modify the list of buttons?
-
- If you only need one row of buttons, they can be passed in as an object or JSON string:
myElement.moorte({ buttons:'{div.Toolbar:[bold,italic]}' });
(Technically, the editor works by recursively nesting the keys into the values. Here, MooRTE.Elements['bold'] & MooRTE.Elements['underline'] will be put into MooRTE.Elements['div']).
- For multiple rows or heavily nested buttons one can make a large JSON object. However, it is usually simpler to define groups of buttons as their own 'element' and just call the groups.
Take a look at the sourcecode of the complete editor; Its really pretty simple.
- NOTE: All buttons must be part of the MooRTE.Elements object to be usable.
If you are not sure which buttons you need, either download the complete editor (or a custom build with extra buttons) or define your own buttons.
- How do I make my own buttons?
-
Extend MooRTE.Elements with an object whose structure is {buttonName : {img:'path/to/image', onClick:function(){}, property:'customProp' } };.
So, to create a "hello" button (all properties are optional).
var myBtn = {helloButton : {img:'images/smiley.gif', onClick:function(){alert('Good Morning!')} }};
MooRTE.Elements.extend(myBtn);
- How do I join?
- 1. Drop me a mail
2. Join the Google group.
3. Fork the code over at GITHub: http://github.com/siteroller/moorte
