Hello sobat ICloudzer kali ini admin akan menjabarkan mengenai cara membuat tools Text Editor di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Tools Text Editor
Apa itu tools text editor? Tools text editor adalah alat yang memungkinkan pengguna untuk mengedit teks langsung di dalam browser, Tools text editor ini biasanya digunakan pada platform website yang membutuhkan pengaturan teks atau kode secara interaktif, seperti pada platform blogging, sistem manajemen konten (CMS), atau platform e-commerce.
Fitur-fitur yang biasanya ditawarkan oleh tools text editor antara lain formatting teks, mengubah font, mengubah ukuran teks, mengubah warna teks, manambahkan warna pada background teks, menambahkan gambar atau media, insert hyperlink, dan lain sebagainya.
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari tools text editor di blogger, silahkan periksa menggunakan tombol di bawah ini
Cara pembuatan
Baiklah sekarang saatnya admin jelaskan bagaimana caranya membuat tools text editor di blogger, silahkan baca dan ikuti setiap arahan yang bakal admin jelaskan di bawah ini
- Langkah pertama yang bisa kamu lakukan adalah pergi ke menu Halaman kemudian buat halaman baru dan berikan judul Tools Text Editor atau terserah kamu aja
- Langkah selanjutnya kamu bisa menyalin seluruh kode untuk membuat tools text editor di bawah ini
<div class="icloudiceEditor">
<div class="icloudiceEditorTool">
<button id="boldButton"><b>B</b></button>
<button id="italicButton"><i>I</i></button>
<button id="underlineButton"><u>U</u></button>
<button id="strikeThroughButton"><s>S</s></button>
<select id="fontFamilySelect">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<select id="fontSizeSelect">
<option value="12">12px</option>
<option value="14">14px</option>
<option value="16">16px</option>
<option value="18">18px</option>
<option value="20">20px</option>
</select>
<input type="color" id="textColorInput">
<input type="color" id="bgColorInput">
<button id="undoButton">Undo</button>
<button id="redoButton">Redo</button>
</div>
<div contenteditable="true" class="editor" id="editor"></div>
<div class="icloudiceEditorStatus">
<span id="wordCount"></span>
<span id="cursorPosition"></span>
</div>
</div>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/ICloudice.com/script/rahTextEditor.js'></script>
- Jika sudah silahkan kamu publikasikan halaman dan lihat bagaimana hasil tampilan dari tools text editor tersebut, semoga bermanfaat
