2077 Posts in 484 Topics- by 821 Members - Latest Member: liricklagu

Web Development and Design Forum - dremi.info > Webmaster > PHP Advance > Penggunaan tinyMCE dalam PHP
Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: Penggunaan tinyMCE dalam PHP  (Read 7300 times)
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« on: July 25, 2008, 03:16:44 AM »
Penggunaan tinyMCE dalam PHP

untu klebih mudahna, gw mau bikin form bwat input artikel. siapkan file baru untuk php

untuk script antara tinyMCE na ambil dari sample aja, letakkan antar <HEAD></HEAD>

Code:
<!-- TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,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",

// 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",
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",

// 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"
}
});

function convLinkVC(strUrl, node, on_save) {
            strUrl=strUrl.replace("../","");
            return strUrl;
       }

function ajaxLoad() {
var ed = tinyMCE.get('elm');

// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
ed.setContent('HTML content that got passed from server.');
}, 3000);
}

function ajaxSave() {
var ed = tinyMCE.get('elm');

// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
}, 3000);
}

</script>
<!-- /TinyMCE -->


gunakan sedikit sintaks form:

Code:
<div style="border: solid 1px #CCCCCC;">
<?
if($_POST['submit'])
{
$newsText1 = addslashes ($_POST['elm']);
echo stripslashes (stripslashes ($newsText1));
}
?>
</div>

<form id="form1" name="form1" method="post" action="">
  Judul<br />
  <label>
  <input type="text" name="textfield" />
  </label>
  <br />
  <br />
  Artikel:<br />
  <label>
  <textarea name="elm"></textarea>
  </label>
  <br />
  <br />
  <label>
  <input type="submit" name="submit" value="Submit" />
  </label>
</form>




Word Processor lu udah siap ... !! hehe..
« Last Edit: January 01, 1970, 07:00:00 AM by webmaster » Logged

huhui
phpBB Guru
*
Offline Offline

Posts: 102


View Profile WWW
« Reply #1 on: August 01, 2008, 08:49:57 AM »
kalo mo nentuin ukuran areanya gimana
misal tuinggainya berapa px terus width nya berapa!
« Last Edit: January 01, 1970, 07:00:00 AM by huhui » Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #2 on: August 01, 2008, 12:27:57 PM »
ni ke na si idik, belajar css na cuman diliat dowank,  :lachtot:

pake style untuk div / area na brother  :motz:  :lachtot:  :lachtot:
« Last Edit: January 01, 1970, 07:00:00 AM by webmaster » Logged

huhui
phpBB Guru
*
Offline Offline

Posts: 102


View Profile WWW
« Reply #3 on: August 02, 2008, 02:17:33 PM »
wah kela di coba dulu


ah angger mi euy  :?


di setting 300px angger we panjangna sakitu
« Last Edit: January 01, 1970, 07:00:00 AM by huhui » Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #4 on: August 02, 2008, 08:32:21 PM »
make table Huh??

mun make table, ubah na dina table...

mun teu bisa keneh, lapor ka incuna ma erot .... bisa panjang siahh  :lachtot:  :lachtot:  :lachtot:
« Last Edit: January 01, 1970, 07:00:00 AM by webmaster » Logged

huhui
phpBB Guru
*
Offline Offline

Posts: 102


View Profile WWW
« Reply #5 on: August 04, 2008, 07:54:38 AM »
justru eta geus di rubah tablena kalahka melebihi table



aneh euy

kieu ari jadi jalma bodo teh
« Last Edit: January 01, 1970, 07:00:00 AM by huhui » Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #6 on: August 04, 2008, 02:29:09 PM »
ulah kitu ... cobaan we... pasti bisa... mana atuh ningal kode kabehan na na
« Last Edit: January 01, 1970, 07:00:00 AM by webmaster » Logged

huhui
phpBB Guru
*
Offline Offline

Posts: 102


View Profile WWW
« Reply #7 on: August 07, 2008, 10:16:22 AM »
ini script saya

Code:
<div class="title">Insert Berita </div>
<?php
if &#40;$_POST['instberita'&#93;&#41;
&#123;
    //date_default_timezone_set&#40;'Asia/Jakarta'&#41;;
 $waktu=date&#40;'Y-m-d H&#58;i&#58;s'&#41;;
 $qina=mysql_query&#40;"insert into sj_berita &#40;
 judul,
 headline,
 isi,
 poster,
 date_post
&#41;values&#40;
 '"&#46;$_POST['txtjudul'&#93;&#46;"',
 '"&#46;$_POST['txtheadline'&#93;&#46;"',
 '"&#46;$_POST['txtisi'&#93;&#46;"',
 '"&#46;$_POST['txtposter'&#93;&#46;"',
 '"&#46;$waktu&#46;"'
 &#41;"&#41; or die &#40;"ERROR&#58;"&#41;;
 $messege='Data Inserted';
&#125;
?>
<?php
if&#40;!empty&#40;$messege&#41;&#41;
&#123;
echo "<div style='color&#58;red' align='center'>$messege</div>";
&#125;
?>

<!-- TinyMCE -->
<script type="text/javascript" src="../library/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
   tinyMCE.init({
      // General options
      mode : "textareas",
      theme : "advanced",
      plugins : "safari,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",

      // 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",
      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",

      // 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"
      }
   });
   
   function convLinkVC(strUrl, node, on_save) {
            strUrl=strUrl.replace("../","");
            return strUrl;
       }
   
   function ajaxLoad() {
   var ed = tinyMCE.get('elm');

   // Do you ajax call here, window.setTimeout fakes ajax call
   ed.setProgressState(1); // Show progress
   window.setTimeout(function() {
      ed.setProgressState(0); // Hide progress
      ed.setContent('HTML content that got passed from server.');
   }, 3000);
}

function ajaxSave() {
   var ed = tinyMCE.get('elm');

   // Do you ajax call here, window.setTimeout fakes ajax call
   ed.setProgressState(1); // Show progress
   window.setTimeout(function() {
      ed.setProgressState(0); // Hide progress            
   }, 3000);
}

</script>
<!-- /TinyMCE -->
<form action="" method="post">
  <table width="100%"  border="0" cellspacing="1" cellpadding="1">
    <tr>
      <td>Judul</td>
    </tr>
    <tr>
      <td width="91%"><input name="txtjudul" type="text" size="60"></td>
    </tr>
    <tr>
      <td>Headline</td>
    </tr>
    <tr>
      <td><div style="width:500px;"><textarea name="txtheadline" cols="50" rows="4" ></textarea></div>
      </td>
    </tr>
    <tr>
      <td>Isi</td>
    </tr>
    <tr>
      <td ><textarea id="isi" name="txtisi" ></textarea>
 
 </td>
    </tr>
    <tr>
      <td>Poster</td>
    </tr>
    <tr>
      <td><input name="txtposter" type="text" size="50"></td>
    </tr>
    <tr>
      <td><input name="instberita" type="submit" id="instberita" value="Insert Berita"></td>
    </tr>
  </table>
</form>



kenapa tinymce areana selalu melebihi lebar framenya
« Last Edit: January 01, 1970, 07:00:00 AM by huhui » Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #8 on: August 07, 2008, 06:04:26 PM »
Quote from: "huhui"
kenapa tinymce areana selalu melebihi lebar framenya


itu udah bner, knapa melebihi dari ukuran yang diharapkan, karena semua plugin di load, jadi otomatis textareanya ikut melebar, ngikut content plugin na, kalo mao di sederhanakan saja jumlah plugin na:

Code:

<script type="text/javascript">
tinyMCE.init({
// General options
mode : "exact",
theme : "advanced",
plugins : "safari,pagebreak,advhr,advimage,advlink,emotions,preview",
plugins : "imagemanager",
    plugins : "emotions",
setupcontent_callback : "TinyMceSetupContentCallback",

        force_p_newlines : true,
        force_br_newlines : false,

        auto_cleanup_word : false,
document_base_url : "./huhui_fodlerbase/",
        relative_url : true,
        remove_script_host : false,
        verify_html : false,
        convert_newlines_to_brs : false,
extended_valid_elements : "a[href|target|name]",
        urlconvertor_callback: "convLinkVC",
    convert_urls : true,
elements : "elm",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "",

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 : "./huhui_fodlerbase/tinymce/examples/lists/css/content.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "./huhui_fodlerbase/tinymce/examples/lists/template_list.js",
external_link_list_url : "./huhui_fodlerbase/tinymce/examples/lists/link_list.js",
external_image_list_url : "./huhui_fodlerbase/tinymce/examples/lists/image_list.js",
media_external_list_url : "./huhui_fodlerbase/tinymce/examples/lists/media_list.js",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
function convLinkVC(strUrl, node, on_save) {
            strUrl=strUrl.replace("../","");
            return strUrl;
       }

function ajaxLoad() {
var ed = tinyMCE.get('elm');

// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
ed.setContent('HTML content that got passed from server.');
}, 3000);
}

function ajaxSave() {
var ed = tinyMCE.get('elm');

// Do you ajax call here, window.setTimeout fakes ajax call
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
}, 3000);
}

</script>


sedikti koreksi, Idik keliru di bagian penamaan element, kalo mao ganti nama element dari "elm" menjadi "textisi", maka baris ini harus di sesuaikan juga:

Code:

var ed = tinyMCE.get('elm');


Note:

Gunakan mode : "exact" untuk meng-applay tinyMCE pada textarea tertentu saja, jadi kalo make mode : "textareas" maka semua textarea dalam halaman, akan di applay dengan tinyMCE plugin....

jangan nyerah, pasti bisa Smiley
« Last Edit: January 01, 1970, 07:00:00 AM by webmaster » Logged

huhui
phpBB Guru
*
Offline Offline

Posts: 102


View Profile WWW
« Reply #9 on: August 09, 2008, 09:22:50 AM »
nah misalkan saya punya textareanya 3


penamaannya gimana


misal yang 2 mau ada tinymce nya


<textarea id ='elm' name="txtpilihana" cols="50" rows="4" ></textarea>

<textarea  name="txtpilihanb" cols="50" rows="4" ></textarea>

<textarea  id ='elm' name="txtpilihanc" cols="50" rows="4" ></textarea>

ini malah yang ada tinymcenya cuman satu yang textarea yang paling atas!


gimana solusina?
« Last Edit: January 01, 1970, 07:00:00 AM by huhui » Logged
irones
phpBB Guru
*
Offline Offline

Posts: 6


View Profile Email
« Reply #10 on: May 12, 2010, 11:21:14 AM »
Quote from: huhui on August 07, 2008, 10:16:22 AM
ini script saya

Code:
<div class="title">Insert Berita </div>
<?php
if ($_POST['instberita'])
{
    //date_default_timezone_set('Asia/Jakarta');
 $waktu=date('Y-m-d H:i:s');
 $qina=mysql_query("insert into sj_berita (
judul,
headline,
isi,
poster,
date_post
)values(
'".$_POST['txtjudul']."',
'".$_POST['txtheadline']."',
'".$_POST['txtisi']."',
'".$_POST['txtposter']."',
'".$waktu."'
)") or die ("ERROR:");
 $messege='Data Inserted';
}
?>
<?php
if(!empty($messege))
{
echo "<div style='color:red' align='center'>$messege</div>";
}
?>

<!-- TinyMCE -->
<script type="text/javascript" src="../library/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
   tinyMCE.init({
      // General options
      mode : "textareas",
      theme : "advanced",
      plugins : "safari,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",

      // 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",
      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",

      // 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"
      }
   });
  
   function convLinkVC(strUrl, node, on_save) {
            strUrl=strUrl.replace("../","");
            return strUrl;
       }
  
   function ajaxLoad() {
   var ed = tinyMCE.get('elm');

   // Do you ajax call here, window.setTimeout fakes ajax call
   ed.setProgressState(1); // Show progress
   window.setTimeout(function() {
      ed.setProgressState(0); // Hide progress
      ed.setContent('HTML content that got passed from server.');
   }, 3000);
}

function ajaxSave() {
   var ed = tinyMCE.get('elm');

   // Do you ajax call here, window.setTimeout fakes ajax call
   ed.setProgressState(1); // Show progress
   window.setTimeout(function() {
      ed.setProgressState(0); // Hide progress            
   }, 3000);
}

</script>
<!-- /TinyMCE -->
<form action="" method="post">
  <table width="100%"  border="0" cellspacing="1" cellpadding="1">
    <tr>
      <td>Judul</td>
    </tr>
    <tr>
      <td width="91%"><input name="txtjudul" type="text" size="60"></td>
    </tr>
    <tr>
      <td>Headline</td>
    </tr>
    <tr>
      <td><div style="width:500px;"><textarea name="txtheadline" cols="50" rows="4" ></textarea></div>
      </td>
    </tr>
    <tr>
      <td>Isi</td>
    </tr>
    <tr>
      <td ><textarea id="isi" name="txtisi" ></textarea>
 
 </td>
    </tr>
    <tr>
      <td>Poster</td>
    </tr>
    <tr>
      <td><input name="txtposter" type="text" size="50"></td>
    </tr>
    <tr>
      <td><input name="instberita" type="submit" id="instberita" value="Insert Berita"></td>
    </tr>
  </table>
</form>


kenapa tinymce areana selalu melebihi lebar framenya
Nambah stylena bukan bikin div, tapi di jero textarea-na, mis
Code:
<textarea style="width: 100%; height: 200px;"></textarea>
Logged
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: