Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Using TinyMCE on the Web Project

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.comAfter that, extract it into the assets directory .
TinyMCE location on web projects

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>&nbsp;
                        <label><input type=“radio” name=“jenis” value=“jasa”> Jasa</label>&nbsp;
                        <label><input type=“radio” name=“jenis” value=“paket”> Paket</label>&nbsp;
                        <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>
Ignore the PHP code, because I use CodeIgniter on this project. If you do not use CodeIgniter , please match theTinyMCE path .

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>
In the preparation code above, I select all elements <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

 
Template By Kunci Dunia
Back To Top