external-api.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>summernote - external-api</title>
  6. <!-- include jquery -->
  7. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  8. <!-- include libs stylesheets -->
  9. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" />
  10. <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.js"></script>
  11. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
  12. <!-- include summernote -->
  13. <link rel="stylesheet" href="../dist/summernote-bs4.css">
  14. <script type="text/javascript" src="../dist/summernote-bs4.js"></script>
  15. <style>
  16. .container {
  17. position: absolute;
  18. left: 10%;
  19. right: 10%;
  20. top: 10%;
  21. bottom: 10%;
  22. }
  23. .custom-toolbar {
  24. padding: 5px;
  25. }
  26. h1 {
  27. text-align: center;
  28. }
  29. </style>
  30. <script type="text/javascript">
  31. var $summernote;
  32. $(document).ready(function () {
  33. $summernote = $('.summernote');
  34. // init summernote
  35. $summernote.summernote({
  36. height: 300,
  37. toolbar: false
  38. });
  39. $("button").popover({
  40. trigger: 'hover'
  41. });
  42. });
  43. function command() {
  44. $summernote.summernote(arguments[0], arguments[1]);
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <div class="container">
  50. <h1>External API Sample</h1>
  51. <div class="custom-toolbar">
  52. <div class="btn-group" role="group" aria-label="...">
  53. <button type="button" class="btn btn-default" data-container="body" data-trigger="hover" data-placement="left" data-content="Sample Content" title="Sample Button" onclick="command('justifyLeft')">Left </button>
  54. <button type="button" class="btn btn-default" onclick="command('justifyCenter')">Middle</button>
  55. <button type="button" class="btn btn-default" onclick="command('justifyRight')">Right</button>
  56. </div>
  57. <div class="btn-group" role="group" aria-label="...">
  58. <button type="button" class="btn btn-default" data-container="body" data-trigger="hover" data-placement="bottom" data-content="Apply bold style to selected text" title="Bold (CTRL+B)" onclick="command('bold')"><i class="fa fa-bold"></i> Bold </button>
  59. <button type="button" class="btn btn-default" title="Italic (CTRL+I)" onclick="command('italic')"><i class="fa fa-italic"></i> Italic </button>
  60. <button type="button" class="btn btn-default" title="Underline (CTRL+U)" onclick="command('underline')"><i class="fa fa-underline"></i> Underline </button>
  61. <button type="button" class="btn btn-default" title="Remove Font Style (CTRL+\)" onclick="command('removeFormat')" style="color:red;"><i class="fa fa-eraser"></i> Remove Format </button>
  62. </div>
  63. </div>
  64. <div class="summernote">Hello World</div>
  65. </div>
  66. </body>
  67. </html>