ue.vue 4.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div>
  3. <el-card style="height: 610px;width: 700px;">
  4. <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
  5. <!-- 自定义toolar -->
  6. <div id="toolbar" slot="toolbar">
  7. <!-- Add a bold button -->
  8. <button class="ql-bold" title="加粗">Bold</button>
  9. <button class="ql-italic" title="斜体">Italic</button>
  10. <button class="ql-underline" title="下划线">underline</button>
  11. <button class="ql-strike" title="删除线">strike</button>
  12. <button class="ql-blockquote" title="引用"></button>
  13. <button class="ql-code-block" title="代码"></button>
  14. <button class="ql-header" value="1" title="标题1"></button>
  15. <button class="ql-header" value="2" title="标题2"></button>
  16. <!--Add list -->
  17. <button class="ql-list" value="ordered" title="有序列表"></button>
  18. <button class="ql-list" value="bullet" title="无序列表"></button>
  19. <!-- Add font size dropdown -->
  20. <select class="ql-header" title="段落格式">
  21. <option selected>段落</option>
  22. <option value="1">标题1</option>
  23. <option value="2">标题2</option>
  24. <option value="3">标题3</option>
  25. <option value="4">标题4</option>
  26. <option value="5">标题5</option>
  27. <option value="6">标题6</option>
  28. </select>
  29. <select class="ql-size" title="字体大小">
  30. <option value="10px">10px</option>
  31. <option value="12px">12px</option>
  32. <option value="14px">14px</option>
  33. <option value="16px" selected>16px</option>
  34. <option value="18px">18px</option>
  35. <option value="20px">20px</option>
  36. </select>
  37. <select class="ql-font" title="字体">
  38. <option value="SimSun">宋体</option>
  39. <option value="SimHei">黑体</option>
  40. <option value="Microsoft-YaHei">微软雅黑</option>
  41. <option value="KaiTi">楷体</option>
  42. <option value="FangSong">仿宋</option>
  43. <option value="Arial">Arial</option>
  44. </select>
  45. <!-- Add subscript and superscript buttons -->
  46. <select class="ql-color" value="color" title="字体颜色"></select>
  47. <select class="ql-background" value="background" title="背景颜色"></select>
  48. <select class="ql-align" value="align" title="对齐"></select>
  49. <button class="ql-clean" title="还原"></button>
  50. <!-- You can also add your own -->
  51. </div>
  52. </quill-editor>
  53. </el-card>
  54. </div>
  55. </template>
  56. <script>
  57. import {Quill,quillEditor} from 'vue-quill-editor'
  58. import 'quill/dist/quill.core.css'
  59. import 'quill/dist/quill.snow.css'
  60. import 'quill/dist/quill.bubble.css'
  61. import '@/assets/css/font.css'
  62. let Size = Quill.import('attributors/style/size')
  63. Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
  64. Quill.register(Size, true)
  65. // 自定义字体类型
  66. var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  67. '宋体', '黑体'
  68. ]
  69. var Font = Quill.import('formats/font')
  70. Font.whitelist = fonts
  71. Quill.register(Font, true)
  72. export default {
  73. name:'ue',
  74. components: {
  75. quillEditor
  76. },
  77. data () {
  78. return {
  79. content: null,
  80. editorOption: {
  81. placeholder: "请输入",
  82. theme: "snow", // or 'bubble'
  83. modules: {
  84. toolbar: {
  85. container: '#toolbar'
  86. }
  87. }
  88. },
  89. }
  90. },
  91. }
  92. </script>