custom-modules.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>vue html5 editor demo</title>
  6. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  7. <script src="../dist/vue-html5-editor.js"></script>
  8. <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
  9. <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  10. <style>
  11. #app {
  12. margin: 50px auto;
  13. width: 800px;
  14. max-width: 100%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20. <vue-html5-editor :content="content" :height="500"></vue-html5-editor>
  21. </div>
  22. <script>
  23. Vue.use(VueHtml5Editor, {
  24. hiddenModules: [
  25. "image"
  26. ],
  27. visibleModules: [
  28. "info",
  29. "text",
  30. "color",
  31. "font",
  32. "align",
  33. "tabulation",
  34. "hr",
  35. "list",
  36. "link",
  37. "unlink",
  38. "full-screen",
  39. "image"//will not show in editor
  40. ]
  41. })
  42. new Vue({
  43. el: "#app",
  44. data: {
  45. content: "<h3>vue html5 editor,custom modules</h3>",
  46. }
  47. })
  48. </script>
  49. </body>
  50. </html>