Cara Buat Tool Text Editor di Blogger

Cara Buat Tool Text Editor di Blogger –  Sebagai pengguna blogger.com yang mengharuskan pengeditan HTML, CSS dan JavaScript manual, terkadang kita membutuhkan sebuah text editor yang dapat membantu kita untuk mengubah script dengan lebih cepat.

Seperti menemukan kode atau parameter khusus dengan lebih cepat, atau mengganti kode atau parameter khusus dengan lebih cepat.

Karena alasan itulah, ONLEN.ID membuat Tool Text Editor Blogger yang dapat mempermudah urusan kalian terkait hal tersebut.

Namun tools ini tidak hanya digunakan untuk mengedit file HTML, CSS dan JavaScript, karena tools ini juga bisa digunakan untuk mengedit file text biasa.

Cara Buat Text Editor Blogger

Langsung saja, berikut ini tutorial membuat text editor di blogger dengan mudah :

• Buka Blogger.com
• Sing In dengan Akun kalian
• Buat Halaman Baru dan beri Judul “Text Editor” atau “Tool Text Editor”
• Setelah itu ubah mode penulisan menjadi Tampilan HTML seperti pada gambar berikut ini :

Jika sudah, silakan masukkan script berikut ini :

a. HTML

<div id="custom-text-editor-tool">
  <h2>Text Editor Tool</h2>
  <textarea id="inputText" rows="10"></textarea>
  
  <div class="custom-button-group">
    <button class="undo-btn" onclick="undo()">Undo</button>
    <button class="redo-btn" onclick="redo()">Redo</button>
    <button class="clear-btn" onclick="clearText()">Clear</button>
  </div>

  <!--Kotak Search-->
  <div class="custom-section">
    <h3>Pencarian Kata</h3>
    <div class="custom-input-group">
      <input id="searchTerm" type="text" />
      <button class="custom-search-btn" onclick="searchText()">Search</button>
    </div>
    <div class="custom-search-result" id="searchResult"></div>
  </div>

  <!--Kotak Count-->
  <div class="custom-section">
    <h3>Hitung Kata Kunci</h3>
    <div class="custom-input-group">
      <input id="countTerm" type="text" />
      <button class="custom-count-btn" onclick="countKeyword()">Count</button>
    </div>
  </div>

  <!--Kotak Replace-->
  <div class="custom-section">
    <h3>Ganti Kata</h3>
    <div class="custom-input-group">
      <input id="replaceOld" type="text" />
      <input id="replaceNew" type="text" />
      <button class="custom-replace-btn" onclick="replaceText()">Replace</button>
    </div>
  </div>

  <div class="custom-word-count">
    <strong>Word Count: </strong><span id="wordCount">0</span>
  </div>

  <!--Output Preview-->
  <div id="custom-textPreview"></div>
</div>

b. CSS

<style>
/* Pembungkus spesifik untuk text editor */
  #custom-text-editor-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    font-family: Arial, sans-serif;
  }

  #custom-text-editor-tool h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  #custom-text-editor-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    margin-top: 10px;
    resize: vertical;
    height: 200px;
  }

  .custom-button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  #custom-text-editor-tool button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    min-width: 120px;
  }

  #custom-text-editor-tool button:hover {
    background-color: #45a049;
  }

  .custom-section {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    background-color: #f9f9f9;
  }

  .custom-section h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .custom-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .custom-input-group input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .custom-input-group button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }

  .highlight {
    background-color: yellow;
    color: black;
  }

  #custom-textPreview {
    white-space: pre-wrap;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    min-height: 100px;
  }

  @media (max-width: 768px) {
    #custom-text-editor-tool button {
      padding: 8px 16px;
      font-size: 14px;
      min-width: 100px;
    }
  }
</style>

c. JavaScript

<script>
let inputTextArea = document.getElementById('inputText');
  let wordCountDisplay = document.getElementById('wordCount');
  let searchResultDisplay = document.getElementById('searchResult');
  let searchTermInput = document.getElementById('searchTerm');
  let countTermInput = document.getElementById('countTerm');
  let replaceOldInput = document.getElementById('replaceOld');
  let replaceNewInput = document.getElementById('replaceNew');
  let textPreview = document.getElementById('custom-textPreview');

  let history = [];
  let currentHistoryIndex = -1;

  function updateWordCount() {
    const text = inputTextArea.value;
    const wordCount = text.trim().split(/s+/).filter(word => word.length > 0).length;
    wordCountDisplay.innerText = wordCount;
  }

  function saveToHistory() {
    history.push(inputTextArea.value);
    currentHistoryIndex++;
  }

  function undo() {
    if (currentHistoryIndex > 0) {
      currentHistoryIndex--;
      inputTextArea.value = history[currentHistoryIndex];
      updateWordCount();
      updateTextPreview();
    }
  }

  function redo() {
    if (currentHistoryIndex < history.length - 1) {
      currentHistoryIndex++;
      inputTextArea.value = history[currentHistoryIndex];
      updateWordCount();
      updateTextPreview();
    }
  }

  function clearText() {
    inputTextArea.value = '';
    updateWordCount();
    history = [];
    currentHistoryIndex = -1;
    updateTextPreview();
  }

  function searchText() {
    let searchTerm = searchTermInput.value.trim();
    let regex = new RegExp(searchTerm, 'gi');
    let text = inputTextArea.value;
    let resultText = text.replace(regex, match => `<span class="highlight">${match}</span>`);
    updateTextPreview(resultText);

    let count = (text.match(regex) || []).length;
    searchResultDisplay.innerText = `Found "${searchTerm}" ${count} time(s).`;
  }

  function countKeyword() {
    let keyword = countTermInput.value.trim();
    let regex = new RegExp(keyword, 'gi');
    let text = inputTextArea.value;
    let count = (text.match(regex) || []).length;
    alert(`The word "${keyword}" appears ${count} time(s).`);

    let resultText = text.replace(regex, match => `<span class="highlight">${match}</span>`);
    updateTextPreview(resultText);
  }

  function replaceText() {
    let oldText = replaceOldInput.value.trim();
    let newText = replaceNewInput.value.trim();
    if (oldText && newText) {
      let regex = new RegExp(oldText, 'gi');
      let text = inputTextArea.value;
      let resultText = text.replace(regex, newText);
      inputTextArea.value = resultText;
      updateWordCount();
      updateTextPreview(resultText);
    }
  }

  function updateTextPreview(highlightedText = inputTextArea.value) {
    textPreview.innerHTML = highlightedText;
  }

  inputTextArea.addEventListener('input', function () {
    saveToHistory();
    updateWordCount();
    updateTextPreview();
  });

  updateWordCount();
  updateTextPreview();
</script>

Jika sudah silahkan kalian Simpan dengan cara Publikasikan halaman

Apabila kalian kesusahan menyalin script di atas, kalian juga dapat menyalinnya melalui GitHub ONLEN.ID dengan mengakses halaman berikut => https://github.com/onlendotid/tool-text-editor-blogger

Pengujian Tool Text Editor Blogger

Jika sudah, jangan lupa melakukan testing tool text editor blogger yang sudah kalian buat tadi, agar dapat dipastikan bahwa tool tersebut benar-benar berfungsi.

Silahan buka halamn Tool Text Editor Blogger yang sudah kalian buat, contonya milik ONLEN.ID dapat ditemukan di sini => https://www.onlen.id/p/text-editor.html

Beberapa fitur dalam tool ini antara lain :

• Kolom Input : Kolom yang berguna untuk memasukkan text atau script yang ingin diproses menggunakan tool editor bloger.
• Tombol Undo : Untuk melakukan Undo atau membatalkan perintah sebelumnya
• Tombol Redo : Untuk membatalkan perintah Undo
• Tombol Clear : Untuk menghapus seluruh text atau script yang ada di tool text editor blogger
• Kolom Pencarian Kata : Untuk mencari keyword tertentu di dalam text atau script
• Kolom Hitung Kata Kunci : Untuk menghitung jumlah keyword tertentu di dalam text atau script
• Kolom Ganti Kata : Untuk mengganti kata/replace keyword tertentu

Pastikan 7 (Tujuh) fitur tersebut dapat benar-benar berfungsi sehingga tool bisa kalian gunakan. Jika tool belum bisa berfungsi maka kalian perlu membuat ulang tool tersebut hingga tool dapat benar-benar berjalan.

Penutup

Itulah Tutorial membuat tool text editor di Blogger yang dapat membantu pekerjaan kalian terkait pengembangan situs web dan blog berbasis Blogger.com.

Tool ini bisa digunakan oleh siapapun tidak terbatas hanya untuk pelanggan Jasa Pembuatan Website Murah dari ONLEN.ID, siapapun yang menggunakan platform blogger.com boleh menggunakan tools ini di situs kalian.