Owen asked for this, so here it is... YUI has a rich text editor that is really nice and simple, looks professional and it easy to integrate into your app. Here's how to add it to a Hobo app:
Define the following tag in application.dryml: <def tag="yahoo-editor-javascripts"> <!-- Skin CSS file --> <link rel="stylesheet" type="text/css" href="http:// yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css"/> <!-- Utility Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/ build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/ build/element/element-beta-min.js"></script> <!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> <script src="http://yui.yahooapis.com/2.5.2/build/container/ container_core-min.js"></script> <script src="http://yui.yahooapis.com/2.5.2/build/menu/menu- min.js"></script> <script src="http://yui.yahooapis.com/2.5.2/build/button/button- min.js"></script> <!-- Source file for Rich Text Editor--> <script src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta- min.js"></script> </def> This links in the appropriate CSS and Javascript files which are hosted on Yahoo servers. If you like you can download them and host them yourself, modifying the above to use your local files instead. Yahoo have done a good job of namespacing their javascripts so they don't clash with Prototype / Scriptaculous etc. Next you need to create a function to initialise the yahoo editor. Add the following to application.js: function yui_init() { $$('.html').each(function(e,i) { var myEditor = new YAHOO.widget.Editor(e.id, { height: '300px', width: '99%', handleSubmit: true }); myEditor.render(); }); } This will give you quite a lot of buttons by default. I prefer to fully customise the toolbar to make a much smaller set of options as follows: function yui_init() { $$('.html').each(function(e,i) { var myEditor = new YAHOO.widget.Editor(e.id, { height: '300px', autoHeight: true, width: '99%', handleSubmit: true, toolbar: { draggable: false, buttonType: 'advanced', buttons: [ { group: 'textstyle', buttons: [ { type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' }, { type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' }, { type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' }, ] }, { type: 'separator' }, { group: 'parastyle', buttons: [ { type: 'select', label: 'Normal', value: 'heading', disabled: true, menu: [ { text: 'Normal', value: 'none', checked: true }, { text: 'Header 1', value: 'h1' }, { text: 'Header 2', value: 'h2' }, { text: 'Header 3', value: 'h3' }, { text: 'Header 4', value: 'h4' }, { text: 'Header 5', value: 'h5' }, { text: 'Header 6', value: 'h6' } ] } ] }, { type: 'separator' }, { group: 'indentlist', buttons: [ { type: 'push', label: 'Indent', value: 'indent', disabled: true }, { type: 'push', label: 'Outdent', value: 'outdent', disabled: true }, { type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' }, { type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' } ] }, { type: 'separator' }, { group: 'insertitem', buttons: [ { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }, { type: 'push', label: 'Insert Image', value: 'insertimage' } ] }, { type: 'separator' }, { group: 'insertitem', buttons: [ { type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true }, { type: 'push', label: 'Show/Hide Hidden Elements', value: 'hiddenelements' } ] } ] } }); myEditor.render(); }); } Refer to the YUI docs for more information on customising the editor. Now all that is required is to enable the editor on specific pages that you want it. This is achieved by adding the following to each page: <page> <append-scripts:> <yahoo-editor-javascripts/> </append-scripts:> <body: class="yui-skin-sam" onload="yui_init();"/> </page> Replace <page> above with <show-page> or <index-page> etc, depending on the action. This will enable the YUI editor for any field with class "html" as defined in the yui_init method above. This class is added automatically by hobo to model fields with a "html" type, e.g. in your model: fields do description :html end That's it! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Hobo Users" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/hobousers?hl=en -~----------~----~----~----~------~----~------~--~---
