The most simple rich text editor

Copyright: for them to learn together, prohibiting plagiarism! ! ! https://blog.csdn.net/qq_38036909/article/details/84869355

summernote rich text editor

Most easy to use for initial contact with new people

Only need to add summernote.css and summernote.js can achieve a simple editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <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> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

Here Insert Picture Description
Initialization summernote There are many ways you can reference

$(document).ready(function() {
        $('#summernote').summernote();
    });

Clear Editor

$('#summernote').summernote('destroy');

Get HTML content summernote of.

var markupStr = $('#summernote').summernote('code');

Summernote set of HTML content.

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

summernote official website has a lot of rich tutorials, you can refer to the official website.
I just want to record this simple rich text editor, easy to find, do not like do not spray.

Guess you like

Origin blog.csdn.net/qq_38036909/article/details/84869355
Recommended