Summer note
OPEN SOURCE & having a wide range of facility which I tried this time after CKEDITOR obsulating the maximum features to take PRO.
I setup with CDN and then use the below code to complete the setup along with uploading image as well.
summer-setup.js - and for not confliction with other jquery function I used
jQuery132(document).ready(function() {
jQuery132('.summernote').each(function() {
var $summernote = jQuery132(this);
$summernote.summernote({
height: 350,
minHeight: null,
maxHeight: null,
focus: false,
callbacks: {
onImageUpload: function(files) {
var data = new FormData();
data.append("file", files[0]);
jQuery132.ajax({
url: 'upload',
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json', // Expect JSON response
success: function(response) {
if (response.url) {
$summernote.summernote('insertImage', response.url);
} else {
console.error('Failed to upload image:', response.error);
}
},
error: function(xhr, status, error) {
console.error('Error uploading image:', error);
}
});
},
onMediaDelete: function($target, editor, $editable) {
// Get the image URL from the editor
var imageUrl = $target.attr('src');
// Send AJAX request to delete the image
jQuery132.ajax({
url: 'delete_image',
type: 'POST',
data: {
url: imageUrl
},
success: function(response) {
console.log('Image deleted:', response);
},
error: function(xhr, status, error) {
console.error('Error deleting image:', error);
}
});
},
onPaste: function(e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text/html');
e.preventDefault();
var div = $('<div></div>');
div.append(bufferText);
div.find('*').removeAttr('style'); // Remove all styles
div.find('*').removeAttr('class'); // Remove all classes
var plainText = div.html();
document.execCommand('insertHtml', false, plainText);
}
}
});
});
});upload-image.php
$base_url = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$base_url .= "://" . $_SERVER['HTTP_HOST'];
$base_url .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);
// Check if file is uploaded
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$file = $_FILES['file'];
// Check for upload errors
if ($file['error'] !== UPLOAD_ERR_OK) {
http_response_code(400); // Bad Request
echo json_encode(['error' => 'Upload error: ' . $file['error']]);
exit;
}
// Directory to store uploads
$uploadDir = 'uploads/';
// Ensure the uploads directory exists
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true); // Adjust permissions as necessary
}
// Generate a unique filename
$uniqueFilename = uniqid() . '_' . $file['name']; // Prefix with timestamp or unique identifier
// Move uploaded file to specified directory with unique filename
$uploadPath = $uploadDir . $uniqueFilename;
if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
// File uploaded successfully
$imageUrl = $base_url. $uploadPath; // Construct full URL
echo json_encode(['url' => $imageUrl]); // Return full URL to Summernote
} else {
http_response_code(500); // Internal Server Error
echo json_encode(['error' => 'Failed to move uploaded file.']);
}
} else {
http_response_code(400); // Bad Request
echo json_encode(['error' => 'No file uploaded.']);
}delete-image.php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['url'])) {
// Retrieve the image URL from POST data
$imageUrl = $_POST['url'];
// Extract filename from URL
$filename = basename($imageUrl);
// Directory where images are stored (adjust as needed)
$uploadDir = 'uploads/';
// Construct full path to the image file
$filePath = $uploadDir . $filename;
// Check if file exists
if (file_exists($filePath)) {
// Attempt to delete the file
if (unlink($filePath)) {
echo 'Image deleted successfully.';
} else {
echo 'Failed to delete image.';
}
} else {
echo 'Image not found: ' . $filePath;
}
} else {
echo 'Invalid request.';
}But by setting all this also I found small small mistakes and refining them you can other solutions on site for better. Also don't forget to try Summernote