Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 706 lines (505 sloc) 10.4 KB
#LyX 2.0 created this file. For more info see http://www.lyx.org/
\lyxformat 413
\begin_document
\begin_header
\textclass hobo
\use_default_options true
\begin_modules
logicalmkup
\end_modules
\maintain_unincluded_children false
\language english
\language_package default
\inputencoding auto
\fontencoding global
\font_roman default
\font_sans default
\font_typewriter default
\font_default_family default
\use_non_tex_fonts false
\font_sc false
\font_osf false
\font_sf_scale 100
\font_tt_scale 100
\graphics default
\default_output_format default
\output_sync 0
\bibtex_command default
\index_command default
\float_placement H
\paperfontsize default
\spacing single
\use_hyperref true
\pdf_bookmarks true
\pdf_bookmarksnumbered false
\pdf_bookmarksopen false
\pdf_bookmarksopenlevel 1
\pdf_breaklinks false
\pdf_pdfborder false
\pdf_colorlinks true
\pdf_backref false
\pdf_pdfusetitle true
\papersize default
\use_geometry false
\use_amsmath 0
\use_esint 0
\use_mhchem 1
\use_mathdots 1
\cite_engine basic
\use_bibtopic false
\use_indices false
\paperorientation portrait
\suppress_date true
\use_refstyle 0
\boxbgcolor #e0e0e8
\index Index
\shortcut idx
\color #008000
\end_index
\secnumdepth -1
\tocdepth 2
\paragraph_separation skip
\defskip medskip
\quotes_language english
\papercolumns 1
\papersides 2
\paperpagestyle default
\tracking_changes false
\output_changes false
\html_math_output 0
\html_css_as_file 0
\html_be_strict false
\end_header
\begin_body
\begin_layout Section
Tutorial 18
\begin_inset Newline newline
\end_inset
Using CKEditor (Rich Text) with Hobo
\end_layout
\begin_layout Standard
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
By Tola Awofolu
\end_layout
\end_inset
\end_layout
\begin_layout Subsubsection*
Tutorial Application:
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
projects
\end_layout
\end_inset
\end_layout
\begin_layout Subsubsection*
Overview
\end_layout
\begin_layout Standard
CKEditor is the new rich text editor that replaces the popular FCKeditor
used by many web developers for years.
\end_layout
\begin_layout Standard
To use CKEditor (3.x):
\end_layout
\begin_layout Standard
Download CKEditor from the download website:
\begin_inset CommandInset href
LatexCommand href
target "http://www.ckeditor.com"
\end_inset
\end_layout
\begin_layout Standard
Extract the downloaded zip file, (
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
ckeditor_3.5.zip
\end_layout
\end_inset
or
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
ckeditor_3.5.tar.gz
\end_layout
\end_inset
at the time of this writing) to a new directory,
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
public/javascripts/ckeditor
\end_layout
\end_inset
in your Hobo application from the website:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/ch5/ckeditor_source.png
width 100col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
CKEditor source folder listing
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Add the following file,
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
load_ckeditor.js
\end_layout
\end_inset
, to the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
public/javascripts
\end_layout
\end_inset
directory of your Hobo application:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "103col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
\size footnotesize
HoboCKEditor = {
\end_layout
\begin_layout Code
\size footnotesize
newEditor : function(elm, buttons) {
\end_layout
\begin_layout Code
\size footnotesize
if (elm.name != '') {
\end_layout
\begin_layout Code
\size footnotesize
oInstance = CKEDITOR.replace( elm.name ,
\end_layout
\begin_layout Code
\size footnotesize
{ toolbar : HoboCKEditor.standardToolbarConfig || buttons }
\end_layout
\begin_layout Code
\size footnotesize
);
\end_layout
\begin_layout Code
\size footnotesize
oInstance.setData( elm.value );
\end_layout
\begin_layout Code
\size footnotesize
oInstance.resetDirty();
\end_layout
\begin_layout Code
\size footnotesize
}
\end_layout
\begin_layout Code
\size footnotesize
return oInstance;
\end_layout
\begin_layout Code
\size footnotesize
},
\end_layout
\begin_layout Code
\size footnotesize
makeEditor : function(elm) {
\end_layout
\begin_layout Code
\size footnotesize
if (!elm.disabled && !elm.readOnly){
\end_layout
\begin_layout Code
\size footnotesize
HoboCKEditor.newEditor(elm);
\end_layout
\begin_layout Code
\size footnotesize
}
\end_layout
\begin_layout Code
\size footnotesize
},
\end_layout
\begin_layout Code
\size footnotesize
standardToolbarConfig: [ ['DocProps','-','Preview','-','Templates'],
\end_layout
\begin_layout Code
\size footnotesize
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
\end_layout
\begin_layout Code
\size footnotesize
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
\end_layout
\begin_layout Code
\size footnotesize
[],
\end_layout
\begin_layout Code
\size footnotesize
'/',
\end_layout
\begin_layout Code
\size footnotesize
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
\end_layout
\begin_layout Code
\size footnotesize
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
\end_layout
\begin_layout Code
\size footnotesize
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
\end_layout
\begin_layout Code
\size footnotesize
['Link','Unlink'],
\end_layout
\begin_layout Code
\size footnotesize
['Image','Rule','SpecialChar','PageBreak'],
\end_layout
\begin_layout Code
\size footnotesize
'/',
\end_layout
\begin_layout Code
\size footnotesize
['Style','FontFormat','FontName','FontSize'],
\end_layout
\begin_layout Code
\size footnotesize
['TextColor','BGColor'],
\end_layout
\begin_layout Code
\size footnotesize
['FitWindow','ShowBlocks','-','About'] ]
\end_layout
\begin_layout Code
\size footnotesize
\end_layout
\begin_layout Code
\size footnotesize
}
\end_layout
\begin_layout Code
\size footnotesize
Hobo.makeHtmlEditor = HoboCKEditor.makeEditor
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: The code listed above has line wrapping because of the width of the
paper.
Please remove any hard return characters in your code.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Notice that the “
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
standardToolbarConfig
\end_layout
\end_inset
” portion of this JavaScript customizes the CKEditor toolbar options.
Read the CKEditor documentation for more options you may wish to add.
\end_layout
\begin_layout Standard
This code also replaces the normal text box with the rich-text editor, as
long as the text box is an HTML “textarea” tag that includes this HTML
attribute in the tag definition.
\end_layout
\begin_layout Standard
Here’s an example of HTML markup that is created by Hobo:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<textarea id= “contact[notes]” class= “contact large”/>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
This HTML markup is automatically generated by Hobo for fields defined with
the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
:html
\end_layout
\end_inset
symbol in the model, so, open your
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
app/models/requirement.rb
\end_layout
\end_inset
file and change the ‘body’ field to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
:html
\end_layout
\end_inset
:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/ch5/using_html_type.png
width 100col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Using the ":html" field option to trigger rich-text editing
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Add the following lines of code to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
app/views/taglibs/application.dryml
\end_layout
\end_inset
:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<extend tag="page">
\end_layout
\begin_layout Code
  <old-page merge>
\end_layout
\begin_layout Code
    <after-scripts:>
\end_layout
\begin_layout Code
      <javascript name="ckeditor/ckeditor"/>       
\end_layout
\begin_layout Code
      <javascript name="load_ckeditor"/> 
\end_layout
\begin_layout Code
    </after-scripts:>
\end_layout
\begin_layout Code
  </old-page>
\end_layout
\begin_layout Code
</extend>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now access the Edit page for any requirement you have defined and the body
field should look as follows:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/ch5/sample_form_with_ckeditor.png
width 100col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Sample Hobo form using CKEditor
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\end_body
\end_document