Buat editor teks web menggunakan JavaScript dengan Editor.js

Programming

oleh Vinci terakhir diubah pada 20 Oktober 2022.

Editor.js adalah solusi JavaScript untuk membuat editor teks web. Ini adalah editor WYSIWYG yang memungkinkan pengeditan sebaris konten teks web.

Editor hosting online menawarkan lebih banyak fitur untuk membuat dan memformat konten dengan cara yang kaya. Pustaka JavaScript Editor.js membantu membuat editor Anda sendiri dalam aplikasi.

Ada banyak editor online dengan alat canggih. Tapi, memiliki editor khusus bisa lebih elegan untuk digunakan dan dirawat.

Editor.js memiliki banyak fitur untuk menyematkan konten tekstual yang kaya dengan membuat tempat di editor dengan bantuan alatnya. Alat diaktifkan menggunakan pustaka eksternal yang dikembangkan untuk Editor.js.

Alat perpustakaan ini memperkaya fungsionalitas plugin editor teks web ini. Tabel berikut menunjukkan alat yang diaktifkan oleh startup JavaScript Editor.js ini. Alat-alat ini digunakan untuk membuat berbagai jenis konten teks kaya dalam format yang berbeda.

Demo ini memungkinkan Anda untuk merasakan fitur editor online dengan mengintegrasikan perpustakaan ini.

Tampilkan demo

Alat Keterangan
tajuk utama Membuat blok judul H1, H2, H3, H4, H5 dan H6 untuk editor web.
Sematkan tautan Ini memungkinkan menempelkan URL dan mengekstrak konten dari tautan yang ditempelkan ke entri ini.
Blok HTML mentah Ini memungkinkan penyematan kode HTML mentah dalam editor teks web.
Gambar sederhana Menerima jalur gambar lengkap atau mengizinkan menempelkan konten gambar yang disalin untuk merender gambar tanpa pemrosesan sisi server.
Gambar Ini mendukung memilih file, menempelkan URL, menempelkan gambar atau menyeret dan menjatuhkan gambar ke area konten teks kaya.
daftar periksa Digunakan untuk membuat item daftar periksa.
Daftar itu Menambahkan item daftar yang dipesan dan tidak dipesan.
menyematkan Menyematkan konten dengan memuat iFrame ke dalam konten.
kutipan Membuat blok kutipan yang memiliki bilah alat untuk memformat konten teks kaya dan menambahkan tautan.

Tutorial Memulai resmi memiliki dokumentasi penggunaan terperinci untuk editor JavaScript ini. Daftar alat di atas dijelaskan dengan tautan yang sesuai ke manual perpustakaan tiga arah mereka.

Buat editor teks web JavaScript

Cara menginstal Editor.js

Editor.js dan pustakanya dapat diintegrasikan menggunakan salah satu dari beberapa metode yang tercantum di bawah ini.

  1. Modul paket simpul.
  2. Menggunakan URL CDN yang ada dari pustaka JavaScript ini.
  3. Dengan menyertakan file perpustakaan lokal yang diperkecil yang diunduh ke dalam folder program.

Setelah menyertakan file library yang diperlukan, Editor.js harus dibuat instance-nya.

const editor = new EditorJS('editorjs');
[OR]
const editor = new EditorJS({
  holder: 'editorjs'
});

Di sini, “editorjs” digunakan sebagai pemegang yang mereferensikan target HTML untuk merender editor teks web.

Isi editor dengan data awal

Jika editor harus menampilkan beberapa template default, editor harus membuat template landing untuk dirender. Kelas plugin editor web ini menerima format konten teks kaya melalui a data Properti. Formatnya akan seperti gambar di bawah ini.

{
	time: 1452714582955,
	blocks: [
		{
			"type": "header",
			"data": {
				"text": "Title of the Editor",
				"level": 2
			}
		}
	],
	version: "2.10.10"
}

Contoh: Integrasikan Editor.js dengan blok HTML mentah, gambar, penyematan tautan, dan lainnya

Contoh ini berisi kode yang mengajarkan cara mengonfigurasi alat pustaka Editor.js yang umum digunakan. Itu membuat blok kode HTML dan menyematkan gambar dan ekstrak tautan.

Alat pengunggahan gambar dan ekstraksi tautan dikonfigurasi dengan titik akhir sisi server. Ini menangani fungsionalitas backend pada peristiwa unggahan atau ekstraksi.

Dengan menyimpan konten teks kaya, data Editor.js disimpan dalam database. Data yang ditampilkan di editor web berasal dari database dinamis.

<?php
require_once __DIR__ . '/dbConfig.php';
$content = "''";
$sql = "SELECT * FROM editor";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();
if(!empty($row["content"])) {
    $content = $row["content"];
}
?>
<html>
<head>
<title>Create Web Text Editor using JavaScript with Editor.js</title>
<link href="https://phppot.com/javascript/create-web-text-editor-javascript/style.css" rel="stylesheet" type="text/css" />
<link href="form.css" rel="stylesheet" type="text/css" />
<style>
#loader-icon {
    display: none;
    vertical-align: middle;
    width: 100px;
}
</style>
</head>
<body>
    <div class="phppot-container">
        <h1>Create Web Text Editor using JavaScript with Editor.js</h1>
        <div id="editorjs" name="editor"></div>
        <input type="submit" onClick=save() value="save">
        <div id="loader-icon">
            <img src="loader.gif" id="image-size" />
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/raw"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script>
    <script src="editor-tool.js"></script>
    <script>
    const editor = new EditorJS({
        /**
         * Id of Element that should contain Editor instance
         */
        holder: 'editorjs',
        tools: {
            header: Header,
            list: List,
            raw: RawTool,
            image: {
                class: ImageTool,
                config: {
                    endpoints: {
                        byFile: 'http://localhost/phppot/javascript/create-web-text-editor-javascript/ajax-endpoint/upload.php', // Your backend file uploader endpoint
                        byUrl: 'http://localhost/phppot/javascript/create-web-text-editor-javascript/ajax-endpoint/upload.php', // Your endpoint that provides uploading by Url
                    }
                }
            },
            checklist: {
                class: Checklist
            },
            linkTool: {
                class: LinkTool,
                config: {
                    endpoint: 'http://localhost/phppot/jquery/editorjs/extract-link-data.php', // Your backend endpoint for url data fetching,
                }
            }
        },
        data: <?php echo $row["content"]; ?>,
    });
</script>
</body>
</html>

Tangga ini memiliki enam alat Editor.js dengan kode JavaScript. Dalam contoh ini, ini membuat gambar, tautan penyematan, dan lebih banyak jenis konten teks kaya. Beberapa di antaranya bersifat basic seperti header, index, default text tool dan lain-lain.

Alat penyematan gambar dan tautan bergantung pada URL titik akhir PHP untuk melakukan tindakan di backend.

Kunci untuk mengonfigurasi alat gambar dan skrip titik akhir

Alat gambar memerlukan URL titik akhir PHP untuk menyimpan file yang diunggah di folder target. Kunci editor JavaScript untuk mengonfigurasi titik akhir tercantum di bawah ini.

  1. byFile – Titik akhir ini digunakan saat menempelkan file.
  2. byUrl – Titik akhir ini digunakan saat memilih file, menyeret dan menjatuhkan file, dan semuanya.
tools: {
	image: {
		class: ImageTool,
			config: {
			endpoints: {
				byFile: 'http://localhost/phppot/javascript/create-web-text-editor-javascript/ajax-endpoint/upload.php',
				byUrl: 'http://localhost/phppot/javascript/create-web-text-editor-javascript/ajax-endpoint/upload.php'
                    }
		}
	}
}

Titik akhir PHP untuk mengunggah file

Ini adalah operasi pengunggahan gambar yang sederhana dan mudah di PHP. File gambar dikirim ke skrip sisi server ini melalui tautan JavaScript.

<?php
$targetDir = "../uploads/";
$output = array();
if (is_array($_FILES)) {
    $fileName = $_FILES['image']['name'];
    if (is_uploaded_file($_FILES['image']['tmp_name'])) {
        if (move_uploaded_file($_FILES['image']['tmp_name'], $targetDir . $fileName)) {
            $output["success"] = 1;
            $output["file"]["url"] = "http://localhost/phppot/javascript/create-web-text-editor-javascript/ajax-endpoint/" . $targetDir . $fileName;
        }
    }
}
print json_encode($output);
?>

Ekstrak konten dari tautan tersemat

Alat ini dikonfigurasi seperti di bawah ini untuk mengatur titik akhir PHP untuk mengekstrak konten.

Dalam contoh ini, ia mengekstrak konten seperti judul, gambar, dan deskripsi teks dari tautan yang disematkan.

tools: {
	linkTool: {
        class: LinkTool,
        config: {
            endpoint: 'http://localhost/phppot/jquery/editorjs/extract-link-data.php', // Your backend endpoint for url data fetching,
        }
    }
}

Titik akhir PHP untuk mengekstraksi konten dari file jarak jauh

Permintaan kirim cURL membuat titik akhir dalam file PHP untuk mengekstrak data dari tautan. Setelah menerima respons cURL, kode berikut mem-parsing respons dan membuat komponen DOM untuk merender konten teks kaya di editor web WYSIWYG.

Selama permintaan cURL, ia menggunakan metode GET untuk mengekstrak teks kaya dan konten gambar dari tautan. Dalam tutorial sebelumnya, kami menggunakan metode GET dan POST dalam permintaan PHP cURL.

<?php
$output = array();
$ch = curl_init();

curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $_GET["url"]);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

$data = curl_exec($ch);
curl_close($ch);

$dom = new DOMDocument();
@$dom->loadHTML($data);

$nodes = $dom->getElementsByTagName('title');
$title = $nodes->item(0)->nodeValue;

$metas = $dom->getElementsByTagName('meta');
$body = "";
for ($i = 0; $i < $metas->length; $i ++) {
    $meta = $metas->item($i);
    if ($meta->getAttribute('name') == 'description') {
        $body = $meta->getAttribute('content');
    }
}

$image_urls = array();
$images = $dom->getElementsByTagName('img');

for ($i = 0; $i < $images->length; $i ++) {
    $image = $images->item($i);
    $src = $image->getAttribute('src');

    if (filter_var($src, FILTER_VALIDATE_URL)) {
        $image_src[] = $src;
    }
}

$output["success"] = 1;
$output["meta"]["title"] = $title;
$output["meta"]["description"] = $body;
$output["meta"]["image"]["url"] = $image_src[0];
echo json_encode($output);
?>

Simpan konten editor ke database

Mengklik tombol “Simpan” di bawah editor teks web akan menerima data keluaran editor dan menyimpannya dalam database.

Ia memanggil callback()editor.save untuk mendapatkan output dari editor web WYSIWYG. Panggilan AJAX mengirimkan data ini ke PHP untuk disimpan dalam database.

function save() {
	editor.save().then((outputData) => {
		document.getElementById("loader-icon").style.display = 'inline-block';
		var xmlHttpRequest = new XMLHttpRequest();
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == XMLHttpRequest.DONE) {
				document.getElementById("loader-icon").style.display = 'none';
				if (xmlHttpRequest.status == 200) {
					// on success get the response text and
					// insert it into the ajax-example DIV id.
					document.getElementById("ajax-example").innerHTML = xmlHttpRequest.responseText;
				}
				else if (xmlHttpRequest.status == 400) {
					// unable to load the document
					alert('Status 400 error - unable to load the document.');
				}
				else {
					alert('Unexpected error!');
				}
			}
		};
		xmlHttpRequest.open("POST", "ajax-endpoint/save-editor.php", true);
		xmlHttpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
		xmlHttpRequest.send("btnValue=" + JSON.stringify(outputData));
	}).catch((error) => {
		console.log('Saving failed: ', error)
	});
}

Kode PHP untuk menyimpan data Editor.js

File PHP ini adalah titik akhir untuk memproses output teks kaya dari editor backend. Ini membuat kueri untuk mempersiapkan dan menjalankan operasi penyisipan untuk menyimpan konten teks kaya dalam database.

<?php
require_once __DIR__ . '/../dbConfig.php';

$sql = "SELECT * FROM editor";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();
if (isset($_POST['btnValue'])) {

    $editorContent = $_POST['btnValue'];

    if (empty($row["content"])) {
        $query = "INSERT INTO editor(content,created)VALUES(?, NOW())";
        $statement = $conn->prepare($query);
        $statement->bind_param("s", $editorContent);
        $statement->execute();
    } else {
        $query = "UPDATE editor SET content = ? WHERE id = ?";
        $statement = $conn->prepare($query);
        $statement->bind_param("si", $editorContent, $row["id"]);
        $statement->execute();
    }
}
?>

Tampilkan DemoUnduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *