Summernote WYSWIG Editor PHP Tutorial with Full Code

byAbdul Rashid -
39
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.
Tags:

39 Comments

  1. jagsilvaSeptember 28, 2014 at 4:13 AM

    Hello
    Can you please post the php file ?
    Thanks
    jagsilva

    ReplyDelete
  2. AnonymousOctober 29, 2014 at 6:10 PM

    I second that. The php file?

    ReplyDelete
  3. Abdul RashidDecember 20, 2014 at 11:08 AM

    @jagsilva @Anonymous
    Check the Updated Code above

    ReplyDelete
  4. Abdul RashidDecember 20, 2014 at 11:10 AM

    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. UnknownJanuary 26, 2015 at 1:49 PM

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

    ReplyDelete
    Replies
    1. Abdul RashidJanuary 29, 2015 at 2:06 AM

      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. UnknownJanuary 29, 2015 at 4:28 AM

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

      Delete
    3. DaroldMay 8, 2015 at 12:17 AM

      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. UnknownFebruary 18, 2015 at 6:35 AM

    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. UnknownFebruary 18, 2015 at 6:47 AM

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

    ReplyDelete
  8. UnknownFebruary 18, 2015 at 6:48 AM

    I am not getting summernote editor instead I am getting only textarea?

    ReplyDelete
  9. f1bestMarch 5, 2015 at 6:18 AM

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

    ReplyDelete
    Replies
    1. Abdul RashidJune 5, 2015 at 1:23 PM

      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. AnonymousMay 1, 2015 at 4:15 AM

    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. AnonymousMay 1, 2015 at 3:46 PM

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

      Delete
    2. AnonymousMay 6, 2015 at 5:46 AM

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

      Delete
    3. AnonymousMay 7, 2015 at 8:43 AM

      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. JulianMay 14, 2015 at 11:58 PM

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

      Delete
    5. AnonymousMay 15, 2015 at 12:07 AM

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

      Delete
    6. محمد شایسته فرMay 15, 2015 at 4:18 PM

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

      Delete
    7. UnknownJanuary 29, 2019 at 10:02 AM

      shrdpatel9626@gmail.com

      Delete
  11. UnknownAugust 26, 2015 at 6:39 AM

    hello, How about remove images from server. removeMedia ?

    ReplyDelete
    Replies
    1. Abdul RashidAugust 26, 2015 at 7:32 AM

      Sure it will remove the Uploaded data from server.

      Did you try?

      Delete
  12. fatima saifeyNovember 12, 2015 at 4:49 PM

    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. Español BloggerDecember 7, 2015 at 6:22 PM

    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. aniDecember 28, 2015 at 8:40 AM

    thanks

    ReplyDelete
  15. AnonymousMarch 5, 2016 at 6:00 PM

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

    ReplyDelete
  16. UnknownMay 1, 2016 at 10:24 AM

    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. As chaves do SucessoJune 24, 2016 at 8:16 PM

      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
  17. UnknownJune 24, 2016 at 9:55 PM

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

    ReplyDelete
  18. Melbourne Web DeveloperJune 21, 2017 at 8:23 AM

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

    ReplyDelete
  19. UnknownJune 21, 2017 at 9:31 AM

    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
  20. SujitkumarJune 21, 2017 at 2:22 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  21. PHP training in nagpurJuly 6, 2017 at 8:13 AM

    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
  22. UnknownOctober 6, 2017 at 1:04 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  23. UnknownNovember 11, 2017 at 8:50 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  24. UnknownFebruary 3, 2018 at 6:05 PM

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

    ReplyDelete
  25. hannemacdonaldMarch 3, 2022 at 6:48 PM

    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