textarea.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6. <title>summernote</title>
  7. <!-- include jquery -->
  8. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  9. <!-- include libraries BS -->
  10. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" />
  11. <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.js"></script>
  12. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
  13. <!-- include summernote -->
  14. <link rel="stylesheet" href="../dist/summernote-bs4.css">
  15. <script type="text/javascript" src="../dist/summernote-bs4.js"></script>
  16. <script type="text/javascript">
  17. $(function() {
  18. $('.summernote').summernote({
  19. height: 200
  20. });
  21. $('form').on('submit', function (e) {
  22. e.preventDefault();
  23. alert($('.summernote').summernote('code'));
  24. alert($('.summernote').val());
  25. });
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <form action="#" novalidate>
  31. <div class="form-group">
  32. <label for="input">Text</label>
  33. <input type="text" class="form-input" id="input" value="Title">
  34. </div>
  35. <div class="form-group">
  36. <label for="contents">Contents</label>
  37. <textarea name="text" class="summernote" id="contents" title="Contents"></textarea>
  38. </div>
  39. <button type="submit" class="btn btn-default">submit</button>
  40. </form>
  41. </body>
  42. </html>