Membuat Form dengan TinyMCE Editor

Dengan menggunakan TinyMCE Editor kita dapat  dengan mudah membuat form input dengan data berformat HTML, sebab TinyMCE Editor bersifat WYSIWYG (What You See Is What You Get). Iya, apa yang kamu lihat itulah yang kamu dapatkan, coba berlaku juga buat para jomblo yah, hihihi…

Berikut contoh form HTML yang memanfaatkan TinyMCE Editor:

<!DOCTYPE html>
<html>
  <head>
    <title>Form dengan TinyMCE Editor</title>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>tinymce.init({ selector: "textarea", plugins: "image", media_live_embeds: true});</script>
    <script src="toggle.js"></script>
  </head>
    <body>
    <div id="container">
      <h1>Tambah Artikel</h1>
      <form action="." method="POST">
        <p>Judul Artikel: <input type="text" size="50" id="title" name="title" /></p>
        <p><textarea cols ="133" rows="25" id="content" name="content"></textarea></p>
        <p><a href="javascript:;" onclick="tinymce.execCommand('mceToggleEditor',false,'content');">Toggle TinyMCE</a>
        <span id="submit"><input type="submit" value="Simpan" /></span></p>
      </form>
    </div>
  </body>
</html>

Berikut file CSS (style.css) yang digunakan, agar sedikit enak dipandang:

body,html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #333;
  background-color:#D3D3D3;
  margin: 0px;
  padding: 0px; }

#theme, #title {
  border: 1px solid #D3D3D3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #333;}

#content {
  border: 1px solid #D3D3D3;
  font-family: Arial, Helvetica, sans-serif;}

#container {
  width: 1000px;
  margin: auto auto;
  background-color:#fff;
  padding: 10px;}

#submit {
  float: right;}

Agar kita bisa melihat tampilan TinyMCE Editor dalam mode HTML atau plain text, berikut file JavaScript-nya (toggle.js):

tinymce.init({
  selector: 'textarea',
  height: 500,
  toolbar: 'mybutton',
  menubar: false,
  setup: function(editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function(e) {
        var $ = tinymce.dom.DomQuery;
        var myTextarea = $('textarea');
        var myIframe = $(editor.iframeElement);
        myTextarea.value = editor.getContent({
          source_view: true
        });
        myIframe.toggleClass("hidden");
        myTextarea.toggleClass("visible");
        if ($('iframe.hidden').length > 0) {
          myTextarea.prependTo(".mce-edit-area");
        } else {
          myIframe.value = myTextarea.value;
          myTextarea.appendTo('body');
        }
      }
    });
  },
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});