Saturday, September 6, 2014

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.

36 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. Nice blog...Very useful information is providing by ur blog. Great beginning php tutorials Very clear and helpful for beginners.

    ReplyDelete
  12. hello, How about remove images from server. removeMedia ?

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

      Did you try?

      Delete
  13. 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
  14. 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
  15. http://stackoverflow.com/a/35815418/2847436 this could help

    ReplyDelete
  16. 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
  17. Correct but how do you retrieve the image name to delete?

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

    ReplyDelete
  19. 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. Nice info about Php it’s reallyhelpful…. If it possible share some more tutorials……….

    ReplyDelete
  21. 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. Good Blog on Summernote WYSWIG Editor PHP Tutorial with Full Code Nice information and good level of content can be easily understood by all the level of persons When my PMP in Kuwait Certification training is there i was supposed to know the things of WYSIWYG Thankyou so much for the blog

    ReplyDelete
  23. hi, Actually It should be as What you see is What you get(WYSIWYG) Anywayz good note on the concept Well to execute any project the first computing concept is What you see is What you get As I completed my PMP Course in Bangalore I was supposed to know these set of concepts in a brief method Thank you for the blog

    ReplyDelete