Sudah bosan dengan form artikel anda yang menggunakan teks area biasa? ternyata sekarang ada tambahan aplikasi yang dapat di tambahkan ke dalam web anda sehingga tampilannya menjadi seperti word prosesor pada umumnya. yang dapat anda download di
http://ckeditor.com/ Cara memambahkan ke dalam form anda amat mudah.....ikuti langkah-langkah berikut ini :
1. ekstak file ckeditor yang anda download dan letak kan dalam 1 folder misalnya dalam aplikasi ini saya letakkan di folder FCK
2. tambahkan skrip berikut di di tag <head> </head>
<script type="text/javascript" src="FCK/ckeditor.js"></script>
<script src="FCK/_samples/sample.js" type="text/javascript"></script>
<link href="FCK/_samples/sample.css" rel="stylesheet" type="text/cs
maksud dari skrip diatas adalah kita harus menyertakan file
ckeditor.js ,file
sample.js dan sample.css yang ada di folder _samples
3. kemudian untuk bagian utama dari editornya sendiri silahkan letakkan skrip berikut di bagian <body></body>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="simpan.php" method="post">
<p>
<textarea cols="80" id="editor1" name="ringkes" rows="10" ></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
/*
* Style sheet for the contents
*/
contentsCss : 'body {color:#000; background-color#FFF;}',
/*
* Simple HTML5 doctype
*/
docType : '<!DOCTYPE HTML>',
/*
* Core styles.
*/
coreStyles_bold : { element : 'b' },
coreStyles_italic : { element : 'i' },
coreStyles_underline : { element : 'u'},
coreStyles_strike : { element : 'strike' },
/*
* Font face
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style :
{
element : 'font',
attributes : { 'face' : '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style :
{
element : 'font',
attributes : { 'size' : '#(size)' }
} ,
/*
* Font colors.
*/
colorButton_enableMore : true,
colorButton_foreStyle :
{
element : 'font',
attributes : { 'color' : '#(color)' },
overrides : [ { element : 'span', attributes : { 'class' : /^FontColor(?:1|2|3)$/ } } ]
},
colorButton_backStyle :
{
element : 'font',
styles : { 'background-color' : '#(color)' }
},
/*
* Styles combo.
*/
stylesSet :
[
{ name : 'Computer Code', element : 'code' },
{ name : 'Keyboard Phrase', element : 'kbd' },
{ name : 'Sample Text', element : 'samp' },
{ name : 'Variable', element : 'var' },
{ name : 'Deleted Text', element : 'del' },
{ name : 'Inserted Text', element : 'ins' },
{ name : 'Cited Work', element : 'cite' },
{ name : 'Inline Quotation', element : 'q' }
],
on : { 'instanceReady' : configureHtmlOutput }
});
/*
* Adjust the behavior of the dataProcessor to avoid styles
* and make it look like FCKeditor HTML output.
*/
function configureHtmlOutput( ev )
{
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
dataProcessor.writer.setRules( e,
{
indent : true,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : !dtd[ e ][ '#' ],
breakAfterClose : true
});
}
// Output properties as attributes, not styles.
htmlFilter.addRules(
{
elements :
{
$ : function( element )
{
// Output dimensions of images as width and height
if ( element.name == 'img' )
{
var style = element.attributes.style;
if ( style )
{
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
var height = match && match[1];
if ( width )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' )
{
style = element.attributes.style;
if ( style )
{
// Get the align from the style.
match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
var align = match && match[1];
if ( align )
{
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( !element.attributes.style )
delete element.attributes.style;
return element;
}
},
attributes :
{
style : function( value, element )
{
// Return #RGB for background and border colors
return convertRGBToHex( value );
}
}
} );
}
/**
* Convert a CSS rgb(R, G, B) color back to #RRGGBB format.
* @param Css style string (can include more than one color
* @return Converted css style.
*/
function convertRGBToHex( cssStyle )
{
return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
{
red = parseInt( red, 10 ).toString( 16 );
green = parseInt( green, 10 ).toString( 16 );
blue = parseInt( blue, 10 ).toString( 16 );
var color = [red, green, blue] ;
// Add padding zeros if the hex value is less than 0x10.
for ( var i = 0 ; i < color.length ; i++ )
color[i] = String( '0' + color[i] ).slice( -2 ) ;
return '#' + color.join( '' ) ;
});
}
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
maka anda kaan melihat tampilan editor anda menjadi seperti gambar berikut
untuk menyimpan isi dari arikel tinggal anda simpan dengan skrip dimpan seperti biasa dan isinya ada di skrip berikut :
<textarea cols="80" id="editor1" name="ringkes" rows="10" ></textarea>
dimana coloum dan row menentukan berapa baris dan kolom yang ada di editor sedangkan nama objeknya adalah ringkes
dan mengatur besar kecilnya editor dapat menggunakan bantuan tabel.
semooga posting ini dapat membantu bagi para pemula web php. meskipun saya juga pemula .... he....he.....
monggo di tambahkan apabila ada cara yang lebih baik demi kepentingan bersama
