Summernote WYSWIG Editor PHP Tutorial with Full Code

Web applications still use the classical wyswig editors. In this Responsive Web Era, everyone looking for responsive wyswig editor, compatible with mobile devices also.

SummerNote is an Open source free wyswig editor build to support of Bootstrap theme framework.

Requirements

  1. JQuery
  2. Bootstrap
  3. SummerNote JS & CSS
  4. Fontawesome (Optional)
Create a plain Html File and Paste the Following code and you will get an Responsive Wyswig Editor with Bootstrap 3 support.

I request you to move summernote files to your server, so that it can load faster than Github.

Following is tested in Chrome, Firefox and IE.
Full Featured WysWig Editor

Responsive View on small screen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
  <!-- include libraries BS3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
 
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
  
<!-- include summernote css/js-->
<link href="include/summernote.css" / rel="stylesheet">
<script src="include/summernote.min.js"></script>
<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 500
        });
    });
</script>
<head>
    <title>Bootstrap WysWig Editor Summernote</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <div class="container">
            <div class="row">
                <form class="span12" id="postForm" action="/whateveryouwant.php" method="POST" enctype="multipart/form-data" >
                    <fieldset>
                        <legend>MyCodde.Blogspot.com Editor</legend>
                        <p class="container">
                            <textarea class="input-block-level" id="summernote" name="content" rows="18">
                            </textarea>
                        </p>
                    </fieldset>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </form>
            </div>
    </div>
</body>
</html>


One of the Notable feature of this editor is It supports drag and drop file upload,Image will be instantly converted into base 64. Awesome.

I have tested this in Internet Explorer 7, but style broken. From IE 8 it is working perfectly.

How to add Instant Image Upload inside Editor

Drag and Drop Image Upload Feature in summernote

Replace the above script part with the following code. Now you will get the Instant File Upload inside article, instead of base64.

Use php move_auploaded_file() function to save the uploaded data to your server.

    $(document).ready(function() {
        $('#summernote').summernote({
            height: 200,
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        });
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
            $.ajax({
                data: data,
                type: "POST",
                url: 'savetheuploadedfile.php',
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });
        }
    });

savetheuploadedfile.php

<?php

//TODO List
// 1) Rename the File
// 2) For Multiple Upload , Loop through $_FILES
$dir_name = "uploads/";
    move_uploaded_file($_FILES['file']['tmp_name'],$dir_name.$_FILES['file']['name']);
    echo $dir_name.$_FILES['file']['name'];
?>



Thats it.

39 Comments

  1. Hello
    Can you please post the php file ?
    Thanks
    jagsilva

    ReplyDelete
  2. I second that. The php file?

    ReplyDelete
  3. @jagsilva @Anonymous
    Check the Updated Code above

    ReplyDelete
  4. If you want to Save the Form using Ajax instead of Redirection use following code.
    //To Handle Ajax Form Submit
    $('form').on('submit', function (e) {
    e.preventDefault();
    alert($('.summernote').code());
    });

    ReplyDelete
  5. my project is asp.net web form. so, i add php file and it's not run. please help me?

    ReplyDelete
    Replies
    1. Unfortunately I cannot help you with ASP.NET, Yes you need to use ASP.NET Code to Save the Uploaded file to Server.

      Delete
    2. thank you so much, i have done it. i will up my code soon to help some one need

      Delete
    3. Just getting started and am a novice in php. Could you send up your working code as the image selected via the menubar is not being inserted in the editor?

      Delete
  6. Could you please explain how to save data as well as images in the same notepad file? Means how can I send code of the entire editor as a variable and it will then go to another php and in php we will store it in some notepad file.

    ReplyDelete
  7. I am getting my first image outside my textarea so is there any better way?

    ReplyDelete
  8. I am not getting summernote editor instead I am getting only textarea?

    ReplyDelete
  9. I got the following error: Not allowed to load local resource. Please, help

    ReplyDelete
    Replies
    1. If this error appear on the image/js/css, then make sure to add http://localhost or http://127.0.0.1 for your development environment.It is because the protocol the content is requesting begins with file://

      Delete
  10. Hello, thank you for your demo. I have a problem. The image is saved but it is not displayed in the editor and I get a typerror: editor is undefined for editor.insertImage(welEditable, url);\

    Can you tell me why? I am using latest summernote source and testing locally on wamp.
    Thank you

    ReplyDelete
    Replies
    1. Hello again, I solved the problem. welEditable has to be a variable. Thank you again for your tutorial.

      Delete
    2. There are difficulties with such issues. How to ask whether the description resolved.

      Delete
    3. me too, image not displayed on the editor after i upload, the image saved in the folder uploads:

      Uncaught TypeError: Cannot read property 'insertImage' of undefined

      how to correct this ?

      Delete
    4. Crikey this captcha thing is a nightmare in chrome btw...

      Delete
    5. Console Says: Uncaught TypeError: Cannot read property 'insertImage' of undefined
      I guess I need to define it? anyone know how?

      Delete
    6. use this
      $('.summernote').summernote('editor.insertImage', url);
      instead of using 'editor' object

      Delete
  11. hello, How about remove images from server. removeMedia ?

    ReplyDelete
    Replies
    1. Sure it will remove the Uploaded data from server.

      Did you try?

      Delete
  12. I want to make a tutorial website for programming language.So I must show some codes in front end for tutorial.
    I have used from Ck editor in background to insert text to show in front end. But when I use from codes to show they are compiled and I can not see them in front end.
    pleas guide me what should I do to show codes like you in - move_auploaded_file() - at the top.
    thanks.

    ReplyDelete
  13. How to have a some HTML code already inserted in the textarea? It shows HTML but I would like to see in this example just "sdlkfjs" in bold: http://screencast.com/t/a2o1wBBU3Do

    ReplyDelete
  14. http://stackoverflow.com/a/35815418/2847436 this could help

    ReplyDelete
  15. I am in search of a example of how to delete the uploaded image when removing it from the post. No luck so far finding this.

    ReplyDelete
    Replies
    1. friend is so remove the picture or file after you delete the message (DELETE FROM), Example:
      @unlink("/home/servi123/public_html/nomedosite/pasta/imagem.jpg");

      Delete
  16. Correct but how do you retrieve the image name to delete?

    ReplyDelete
  17. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    ReplyDelete
  18. thank you for sharing this informative blog.. this blog really helpful for everyone.. explanation are clear so easy to understand... I got more useful information from this blog...
    http://www.webwingtechnologies.com/hire-php-developers.html

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. It is really incredible information about the php language. it is very useful post for those who can learning the php language and getting more interest in thos language.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete
  23. Upload File is Sucessfull, but not show in Summernote,, please help

    ReplyDelete
  24. Harrah's Cherokee Casino Resort - Mapyro
    Harrah's 시흥 출장마사지 Cherokee Casino Resort. 777 Casino Drive, 화성 출장안마 Cherokee, North Carolina 28719, 28719, United States. The casino is located 통영 출장샵 in the 목포 출장샵 heart of the Great Smoky Mountains of 안성 출장마사지 Western

    ReplyDelete
Previous Post Next Post