On a project that I am working on, there is a feature that must use the text editor to input the value. Because the project deadline is so fast. I don't have much time to make HTML -based text editors . Therefore, the fastest way is to use an existing text editor, namely TinyMCE. Well, on this occasion, I will share how to implement TinyMCE on the Web.1. Download TinyMCE
Please download TinyMCE on its official website: tinymce.com. After that, extract it into the assets directory .
2. HTML Code (Form)
The following is the form code that I have prepared. In essence, TinyMCE will only affect elements<textarea>.<div class=“panel panel-default”>
<form action=”<?php echo site_url(‘admin/produk/tambah_produk’) ?>” method=“post” enctype=“multipart/form-data”>
<div class=“panel-body”>
<div class=“row”>
<div class=“col-md-4”>
<div class=“form-group”>
<label for=“nama-barang”>Nama</label>
<input type=“text” class=“form-control” name=“nama_barang” placeholder=“Nama Produk…” />
</div>
<div class=“form-group”>
<label for=“nama-barang”>Harga</label>
<input type=“text” class=“form-control” name=“harga_barang” id=“harga-barang” placeholder=“Harga…” />
</div>
<div class=“form-group”>
<label for=“nama-barang”>Jenis</label><br>
<span class=“check”>
<label><input type=“radio” name=“jenis” value=“barang”> Barang</label>
<label><input type=“radio” name=“jenis” value=“jasa”> Jasa</label>
<label><input type=“radio” name=“jenis” value=“paket”> Paket</label>
<label><input type=“radio” name=“jenis” value=“promo”> Promo</label>
</span>
</div>
</div>
<!– Kolom ke-2/deskripsi dan keterangan –>
<div class=“col-md-8”>
<div class=“form-group”>
<label for=“nama-barang”>Keterangan/Spesifikasi</label>
<textarea name=“keterangan” class=“form-control” rows=“15” placeholder=“Keterangan atau spesifikasi…”></textarea>
</div>
<div class=“form-group”>
<label for=“nama-barang”>Foto/Gambar</label>
<input type=“file” name=“gambar_barang” placeholder=“Foto…” />
</div>
</div>
</div>
<button type=“submit” class=“btn btn-success”><i class=“fa fa-send”></i> Simpan</button>
</div><!– panel body –>
</form>
</div>3. Insert TinyMCE Javascript Code
The insertion of the TinyMCE Javascript file must be placed before the preparation code, or in other words, insert the TinyMCE first, and then prepare it. TinyMCE insertion can be in tags<head>or at the end (before) of the body ( </body>) cover .<script src=”<?php echo base_url()?>assets/tinymce/js/tinymce/tinymce.min.js”></script>4. Preparation code
In the preparation code, we can set how TinyMCE is displayed. And want to be displayed on which element.<script type=‘text/javascript’>
tinymce.init({ selector:‘textarea’, menubar:“, theme: ‘modern’});
</script><textarea>, because there is only one element <textarea>in the form. In addition, I removed the menubar and set the theme using modern . More complete information with the preparation code, may be read in the TinyMCE documentation .Reference: https://www.petanikode.com/tinymce-web/
0 Komentar untuk "Using TinyMCE on the Web Project"
Silahkan berkomentar sesuai artikel