Ckeditor 5 resim yükleme yapılandırması nasıl olmalı?
Ckeditor 5
Backend Dili: Nodejs
Resim seçiyorum ancak resim kutucuk içine gelmiyor!
Henüz backend tarafında resim yükleme dosyam da hazır değil.
Önyüzün çözümü nedir?
<script>
let md_editor;
ClassicEditor.create(document.querySelector(".md-editor"), {
//plugins:[HtmlEmbed],
//toolbar:["htmlEmbed"]
})
.then((neweditor) => {
md_editor = neweditor;
//neweditor.setData("<b>merhaba</b>");
})
.catch((error) => {
console.error(error);
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resim Seçme</title>
</head>
<body>
<label for="imageInput">Resim Seç:</label>
<input type="file" id="imageInput" accept="image/*">
<div class="md-editor"></div>
<script>
let md_editor;
const imageInput = document.getElementById("imageInput");
imageInput.addEventListener("change", function (event) {
const file = event.target.files[0];
if (file) {
// Burada seçilen resmi kullanarak istediğiniz işlemleri gerçekleştirebilirsiniz.
// Örneğin, resmi önizleme olarak göstermek için aşağıdaki satırı kullanabilirsiniz:
// const imageUrl = URL.createObjectURL(file);
// const imgElement = document.createElement("img");
// imgElement.src = imageUrl;
// document.body.appendChild(imgElement);
// ClassicEditor veya başka bir editörle ilgili işlemleri burada gerçekleştirin.
}
});
ClassicEditor.create(document.querySelector(".md-editor"))
.then((neweditor) => {
md_editor = neweditor;
})
.catch((error) => {
console.error(error);
});
</script>
</body>
</html>