vue wangeditor 富文本编辑器的使用

wangeditor 富文本编辑器，是实现类似CSDN文章编辑功能的插件（CSDN官方使用的是CKEditor 富文本编辑器）。

一、使用步骤

1.引入库

wangEditor官方文档

根据自己项目使用的框架，采取不同的引入方式，如vue2：

npm install @wangeditor/editor-for-vue --save

2.在页面中使用

在vue2中使用wangeditor  （官方文档配置）

1. <template>
2. <div>
3. <!-- 富文本编辑器 -->
4. <div class="editor-box">
5. <Toolbar
6. style="border-bottom: 1px solid #ccc"
7. :editor="editor"
8. :defaultConfig="toolbarConfig"
9. :mode="mode"
10. />
11. <input v-model="articleForm.title" class="article-title-box" maxlength="30" :border="false" placeholder="请输入文章标题（2~30字以内）" />
12. <Editor
13. style="height: 500px;overflow-y: hidden;"
14. v-model="defaultHtml"
15. :defaultConfig="editorConfig"
16. :mode="mode"
17. @onCreated="onCreated"
18. @customPaste="customPaste"
19. />
20. </div>
21. </div>
22. </template>
24. <script>
25. import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
27. export default {
28. components: { Editor, Toolbar },
29. // 文章编辑相关配置
30. data(){
31. let that = this;
32. return{
33. editor: null,
34. defaultHtml: '', // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
35. toolbarConfig: { // 工具栏配置
36. toolbarKeys:[ // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。
37. "fontSize", // 字号
38. // "fontFamily", // 字体
39. // "color", // 颜色
40. "bold", // 加粗
41. "italic", // 斜体
42. "underline", // 下划线
43. "insertLink",// 插入链接
44. "bulletedList", // 无序列表
45. "numberedList", // 有序列表
46. // 对齐
47. {
48. key: "group-justify",
49. title: "对齐",
50. iconSvg:"0 0 1024 1024\">M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\">",
51. menuKeys: ['justifyLeft',"justifyRight","justifyCenter","justifyJustify"]
52. },
53. "uploadImage", // 上传图片
54. ]
55. },
56. editorConfig: { // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
57. placeholder: '

          从这里开始写正文...

    ',
58. MENU_CONF:{
59. // 插入图片
60. uploadImage: {
62. base64LimitSize: 1024 * 1024 * 10 // 10MB 小于该值就插入 base64 格式（而不上传），默认为 0
63. },
64. }
65. },
66. mode: 'default', // 'default' or 'simple'
67. }
68. },
69. methods:{
70. // 编辑器创建完毕时的回调函数。
71. onCreated(editor) {
72. this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
73. },
75. // 对用户剪切板内容的处理
76. customPaste(editor, event){
77. // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
78. const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
79. editor.insertText(text);
80. event.preventDefault(); // 阻止默认的粘贴行为
81. return false;
82. }
83. }
84. }
85. </script>
87. <style>
88. .editor-box{
89. width: 800px; // 配置编辑器宽度
90. height: auto;
91. margin: 0 40px 20px 0;
92. border: 1px solid #dddddd; // 编辑器外边框
93. }
94. </style>

上例配置的效果：

 3、配置参数

以vue2中的配置为例：Vue2中使用wangeditor

（1）工具栏配置——也就是字体、对齐方式、字号等配置

官网工具栏配置

        自定义工具栏：在data中配置toolbarConfig

（2）编辑器配置——默认的placeholder、配置颜色、字体、链接校验、上传图片等

 官网编辑器配置

  自定义工具栏：在data中配置editorConfig

  拓展：自定义插入图片，上传到七牛云

拓展1：将标题栏单列出来

        需求中要求把标题栏单列出来，也就是示例图片中"请输入文章标题..."栏，直接写在editor的placeholder会导致上传文章后，无法判断为正文内容还是文章标题，所以可以看到我在引入的工具栏和编辑器中间加了一个input标签，完美融入整个编辑器（当然，得修改input框的样式，让它融合的更好）。