Skip to main content

WYSIWYG super light editor with jQuery & Bootstrap

Yes! It is. Summernote is the super light WYSIWYG editor for the web. It supports most of the features tinyMCE or CKEditor does but with smallest Javascript & CSS files.

 You can download Summernote from here. It is the official website for the same. It has very simple getting started tutorial. 

 This is article will show you how to start with summernote and couple of fixes or plugin which you don't find on the official website.

 Getting started:
If you want to download and start with, click here.
For CDN, place below snippet under head tag.


<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
Now create a textarea and attach summernote to it. 

<textarea id="Description" name="Description"></textarea>


$(document).ready(function(){
   $('#Description).summernote();
});
When you don't want to show/use all the buttons in the toolbar, then you can choose/define like below 
$('#Description').summernote({toolbar: [
       // [groupName, [list of button]]
       ['style', ['bold', 'italic', 'underline', 'clear']],
       ['font', ['strikethrough', 'superscript', 'subscript']],
       ['fontsize', ['fontsize']],
       ['para', ['ul', 'ol', 'paragraph']],
       ['insert', ['picture', 'link', 'video', 'table', 'hr']]
     ]});
That's it! But, if you are using summernote in Bootstrap modal, then there is a small problem. Whenever you click on Image, Video or link buttons another modal opens up with the options and while closing the second modal it will close all the modals. Quick fix: You can add this line of code as option to summernote. 
$('#Description').summernote({
  dialogsInBody: true,
  toolbar: [ 
    // toolbar code if needed
  ]
});
Summernote inserts base64 code (image data URL) for any image inserted. If you don't want to store image data URL in the text (as it will hold huge data), then you can use below code: 
$('#Description').summernote({
  dialogsInBody: true,
  toolbar: [ 
    // toolbar code if needed
  ],
  callbacks: {
      onImageUpload: function(image) {
          uploadImage(image[0]);
      }
  }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("file", image);
    $.ajax({
        url: SITE_URL + "admin/upload-image",
        cache: false,
        contentType: false,
        processData: false,
        data: data,
        type: "post",
        success: function(url) {
            var image = $('').attr('src', url);
            $('#Descrpition').summernote("insertNode", image[0]);
        },
        error: function(data) {
            //console.log(data);
        }
    });
}
PHP code to upload an image to any directory and return URL for the image: 

if (isset($_FILES['file']['name'])) {
    if (! $_FILES['file']['error']) {
        $name = md5(rand(100, 200));
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name . '.' . $ext;
        $destination = $this->getMediaPath() . 'images/' . $filename;
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo 'media/images/' . $filename;
    } else {
        echo "Ooops!  Your upload triggered the following error:  " . $_FILES['file']['error'];
    }
}
That's it...
Labels:

Comments

Post a Comment

Want to tell something about this post. Please feel free to write...

Popular posts from this blog

Survey says: PHP passes Microsoft Active Server Pages

By JT Smith on June 11, 2002 (8:00:00 AM) With a faltering economy forcing companies to cut spending whenever possible, less expensive and freely available Open Source software solutions may be gaining in popularity. Those wanting proof can look no further to PHP taking the top server-side scripting spot in a recent Internet host survey. In April 2002, Netcraft's monthly Web server survey revealed that 24 percent, or around 9 million of the 37 million sites it surveyed, were using Hypertext Preprocessor (PHP) for a server side scripting language. For the first time, an Open Source scripting solution had passed Microsoft's proprietary Active Server Pages scripting to claim the top spot on the Netcraft survey. For both the April and May Netcraft surveys, PHP and ASP were almost too close to call, with Microsoft's product offering coming in just a hair under 24 percent of all hosts running a server-side script...
Post a Comment
Find more....

PHP script to upload file securely

How to Write a Secure PHP Script for File Uploads File uploads are a common feature in web applications, but they can introduce significant security risks if not handled properly. In this article, we'll walk through the steps to securely upload files to a server using PHP. We'll cover key security measures such as file validation, limiting file types, setting file size limits, and managing file storage. We will also create reusable functions to handle the upload process. 1. Create the HTML Form First, we need an HTML form that allows users to select and upload a file. Ensure that the form uses the POST method and includes the enctype="multipart/form-data" attribute. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Secure File Upload</title> </head> <body> <form action="upload.php" method="post" enctype="multipart/...
Post a Comment
Find more....

The 7 Types of Leadership: Inspiring Examples and Insights

Leadership is a multifaceted concept with various styles that cater to different needs and situations. Understanding these styles can help you develop your leadership skills and adapt to diverse scenarios. In this article, we'll explore seven prominent leadership styles, each accompanied by insightful examples from influential authors. Let's dive in! Type 1: Transformational Leadership 🚀 Transformational Leadership: Inspiring Change and Innovation Transformational leadership focuses on inspiring and motivating followers to achieve extraordinary outcomes and, in the process, develop their own leadership capacity. Example from Author: James MacGregor Burns James MacGregor Burns, in his book "Leadership," describes transformational leaders as those who seek to change the status quo by appealing to their followers' values and sense of higher purpose. 🔸 Characteristics: - Inspirational Motivation - Intellectual Stimulation - Individualized Consideration - Idealized I...
Post a Comment
Find more....