Usage

Rich Text in one line

Add richtext as class of input to enable it accept rich text.


		
 <input type='text' class="richtext form-control" name='richtl' value='' >

Rich Text

Add richtext as class of textarea to enable it accept rich text.


		
 <textarea class='richtext' name='richt' cols=100 rows=5 > </textarea>

Rich Text without tool bar

Add divinput as class of input or textarea to enable it accept rich text.


	
		
<input type='text' class="divinput" name='simpleinput' value='' placeholder="A sample for rich text without tool bar, try drop/copy colourful text to here">

<textarea class='divinput' name='simpleinput2' cols=100 rows=3 placeholder="A textarea sample " ></textarea>

Rich Text in one line with source code

Add richtextcode as class of input to enable it accept rich text and could edit its raw data.


		
 <input type='text' class="richtextcode col-md-12" name='richtcl' value='' placeholder="Click 'code' at top-right to see text source code ">

Rich Text with source code

Add richtextcode as class of textarea to enable it accept rich text and could edit its raw data.


	
		
 <textarea class='richtextcode col-md-12' name='richtc' cols=100 rows=6 title="Click 'code' at top-right to see text source code"> </textarea>

Rich Text Group with one Tool bar

Add divinputs as class of div and specified its targets by rt-selector to provide a common tool bar for all rich text inputs.


<div class='divinputs' rt-selector='.issue_item' id='issue-zone'>
<div class="form-group"><label for="i_title">Title</label><input type='text' class="divinput issue_item" id='i_title' value='' placeholder="a title for issue"></div>
<div class="form-group"><label for="i_description">Description</label><textarea class="divinput issue_item" id='i_description' cols=100 rows=6 value='' placeholder="detail description for issue"></textarea></div>
</div>

Rich Text works with AngularJS

Add rich text keywords into input elemnt's class like richtextcode.

姓名 :

描述 :

{{name}}的描述: {{Description}}


<div ng-app="">
  <p>姓名 : <input type="text" class='form-control richtext' ng-model="name" options='"sfont":"yes", "img":"no", "link":"no", "undo":"no"'></p>
  <p>描述 : <textarea type="text" class='form-control richtext' ng-model="Description" options='"undo":"no"'></textarea></p>
  <h1>{{name}}的描述: {{Description}}</h1>
</div>

Hotkeys for Rich Text

Following hotkeys could be used in any rich text box even there is no such button in tool bar:

'ctrl+b': 'bold',
'ctrl+i': 'italic',
'ctrl+u': 'underline',
'ctrl+z': 'undo',
'ctrl+y': 'redo',
'ctrl+l': 'justify left',
'ctrl+r': 'justify right',
'ctrl+e': 'justify center',
'ctrl+j': 'justify full',
'shift+tab': 'outdent',
'tab': 'indent'

Options for rich text bar

To use icons, initial richTextOptions in html with local icons like following:

<script>
richTextOptions = {"icons": ["img/b1.png", "img/b2.png", "img/b3.png", "img/b4.png"]};
</script>

To always show tool bar, richTextOptions["autohide"] = "no" in html or like following:

<script>
richTextOptions = {"autohide": "no"};
</script>

To hide buttons in tool bar for all rich text, change following:

<script>
richTextOptions["font"] = "no";  //  hide following buttons from  to  
richTextOptions["sfont"] = "yes"; // hide font, font color, font size, only show simple font style, including: B I U S
richTextOptions["p"] = "no";  // hide following buttons from  to  
richTextOptions["link"] = "no";  // hide following buttons:    
richTextOptions["img"] = "no";  // hide following button:  
richTextOptions["undo"] = "no"; // hide following buttons:    
richTextOptions["clear"] = "no"; // hide following button: 
</script>

To hide buttons in tool bar for current rich text, add options into attribute, like:

<textarea class='richtextcode col-md-12' cols=100 rows=6 options='"autohide":"no", "sfont":"yes", "img":"no", "link":"no", "undo":"no"' > </textarea>

JS/CSS files required 

<link rel='stylesheet' href='./css/bootstrap.min.css' />
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel='stylesheet' href='./css/font-awesome.min.css' />
<!--[if IE 7]>
<link rel="stylesheet" href="./css/font-awesome-ie7.min.css">
<![endif]-->

<link rel='stylesheet' href='./css/style.css' />
<script src="./js/jquery.js"></script>
<script src="./js/jquery.hotkeys.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/richtext.js"></script>

Dependencies