Saturday, May 30, 2009

Setting up Editor by using TinyMCE

Adding Editor in your page is noe really very easy……

By adding the TinyMCE plugins and javascript its very easy to set editor

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It 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.

This example displays all plugins and buttons that comes with the TinyMCE package.

So before adding this example into ur page download the TinyMCE package from the following links…..

Download TniyMCE Package

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

//add script file of src="/…../… /tiny_mce/tiny_mce.js"

//var inst = '';

//var bm = '';

//var flag = false;

//var insertval = '';

// tinyMCE.init({

// // General options

// mode : "textareas",

// theme : "advanced",

// height:"420px",

// width:"100%",

// language : '',

// plugins : //"safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinep//opups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionalit///y,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

// // Theme options

// theme_advanced_buttons1 : //"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyr//ight,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

// theme_advanced_buttons2 : //"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blo//ckquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,p//review,|,forecolor,backcolor",

theme_advanced_buttons3 : //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,ad//vhr,|,print,|,ltr,rtl,|,fullscreen",

// theme_advanced_buttons4 : //"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,in//s,attribs,|,visualchars,nonbreaking,template,pagebreak,mybutton1,mybutton,imglink, //title, meta",

// theme_advanced_toolbar_location : "top",

// theme_advanced_toolbar_align : "left",

// theme_advanced_statusbar_location : "bottom",

// theme_advanced_resizing : true,

// // Example content CSS (should be your site CSS)

//// content_css : "css/content.css",

// content_css : "/templates/ styles.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",

// // Replace values for the template plugin

// template_replace_values : {

// username : "Some User",

// staffid : "991234"

// },

// setup : function(ed) {

// Add a custom button

// inst = ed;

// ed.addButton('mybutton', {

// title : 'Object',

// image : '/.gif', //image path were you extracted package

// onclick : function() {

//

// // Add you own code to execute something on click

// showWin('win1', '', 1); //ajaxGet('/admin/docPick.php?lang=', 'contex', true);

// tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

// // ed.focus();

// // ed.selection.setContent('Hello world!');

// }

// });

// ed.addButton('imglink', {

// title : 'Popup',

// image : '/.gif', //image path were you extracted package

// onclick : function() {

// // Add you own code to execute something on click

// showWin('win1', '', 1);

// ajaxGet('/admin/docPick.php?mod=popup&filter=1', 'contex', //true);

// tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

// // ed.focus();

// // ed.selection.setContent('Hello world!');

// }

// });

// ed.addButton('mybutton1', {

// title : 'internal link',

// image : '/.gif', //image path were you extracted package

// onclick : function() {

// bm = inst.selection.getBookmark();

// // Add you own code to execute something on click

// showWin('win1', '', 1); ajaxGet('/admin/links.php', 'contex', true);

// tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

//// alert(inst.selection.getContent());

// // ed.focus();

// // ed.selection.setContent('Hello world!');

// }

// });

// ed.addButton('title', {

// title : 'Title',

// image : '/.gif', //image path were you extracted package

// onclick : function() {

// // Add you own code to execute something on click

// showWin('win1', '', 1);

// ajaxGet('admin/modules/pages/title.php?title=' + //$('fd_pagetitle').value, 'contex', true);

// tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

// // ed.focus();

// // ed.selection.setContent('Hello world!');

// }

// });

//

// ed.addButton('meta', {

// title : 'Meta',

// image : '/admin/editor/scripts/icons/Meta.gif',

// onclick : function() {

// // Add you own code to execute something on click

// showWin('win1', '', 1);

// ajaxGet('admin/modules/pages/meta.php', 'contex', true);

// tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

// // ed.focus();

// // ed.selection.setContent('Hello world!');

// }

// });

//

// }

// });

// window.onload=function() {

//tinyMCE.execInstanceCommand("fd_pagetext", "mceFocus");

////inst = tinyMCE.selectedInstance;

//}

//function modalDialogShow(url,width,height)

//{

// //window.showModalDialog(url,window,

// //"dialogWidth:"+width+"px;dialogHeight:"+height+"px;edge:Raised;center:1;help:0;resi//zable:1;maximize:1");

// return false;

// var frm = document.getElementById('EditorForm');

// if (frm) { if (frm.PageID) { PageID = frm.PageID.value; } }

// url=url+PageID;

// var left = screen.availWidth/2 - width/2;

// var top = screen.availHeight/2 - height/2;

//

// oUtil.activeModalWin = window.open(url, "", //"width="+width+"px,height="+height+",left="+left+",top="+top);

// window.onfocus = function(){if (oUtil.activeModalWin.closed == //false){oUtil.activeModalWin.focus();};};

//}


No comments: