Home > jQuery > Tiny MCE – Rich Text Editor

Tiny MCE – Rich Text Editor

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

You can download the editor from following url

http://www.tinymce.com/download/download.php

  • After downloading extract the package
  • Using following script tag refer tinymce js file
 <script type="text/javascript" 
src="/_layouts/KKraft/js/jscripts/tiny_mce/tiny_mce.js"></script>
  • Now add following html element
 <textarea id="txtRichText" cols="50" rows="100"></textarea>
  • Use following script to convert above textarea to RTE control
 <script type="text/javascript">
    tinyMCE.init({
        // General options
        width: "600",
        height: "360",
        mode: "textareas",
        theme: "advanced",
        plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink
,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print
,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking
,xhtmlxtras,template,wordcount,advlist,autosave",
        // Theme options
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline
,strikethrough,|,justifyleft,justifycenter
,justifyright,justifyfull,styleselect,formatselect
,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|
,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink
,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid
,|,sub,sup,|,charmap,emotions,iespell
,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|
,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: false,
        // Example content CSS (should be your site CSS)
        content_css: "css/content.css",
        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",
        // Style formats
        style_formats: [
                { title: 'Bold text', inline: 'b' },
                { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
                { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
                { title: 'Example 1', inline: 'span', classes: 'example1' },
                { title: 'Example 2', inline: 'span', classes: 'example2' },
                { title: 'Table styles' },
                { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
            ]
    });
</script>
Advertisements
Categories: jQuery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: