富文本编辑器——UEditor的使用——基础积累

富文本编辑器——UEditor的使用——基础积累

之前在做后台管理系统时，遇到了一个富文本编辑器的功能，用于新闻内容的编辑。

话不多说，直接上效果图：

全屏的效果及对应的功能菜单如下：

上面的菜单已经能够满足基本的富文本编辑功能了。如果还需要其他的功能，则需要自行查看文档了。

代码如下：

1.下载UEditor的文件——放在public/static下面

public中的文件是可以不进行编译就可以使用的文件。

UEditor文件夹中的内容如下：

具体文件我会上传到CSDN资源中，可自行下载。

2.安装vue-ueditor-wrap——我这边使用的版本号是：^2.5.6

3.main.js中全局注册——vue-ueditor-wrap

import VueUeditorWrap from 'vue-ueditor-wrap';
Vue.component('vue-ueditor-wrap', VueUeditorWrap);
1
2

4.封装UEditorTxt.vue组件

这边是把公用的组件放在了components中。

组件内容如下：

<template>
  <div>
    <vue-ueditor-wrap v-model="html" :config="ueConfig" mode="observer">
    </vue-ueditor-wrap>
  </div>
</template>

<script>
export default {
  name: 'UeditorTxt',
  props: ['txt'],
  watch: {
    html(val) {
      this.$emit('text_content', val);
    },
  },
  data() {
    return {
      html: '',
      html_of: this.txt,
      dialogVisible: false,
      imageList: [],
      ueConfig: {
        toolbars: [
          [
            'fullscreen',
            'source',
            '|',
            'undo',
            'redo',
            '|',
            'bold',
            'italic',
            'underline',
            'fontborder',
            'strikethrough',
            'superscript',
            'subscript',
            'removeformat',
            'formatmatch',
            'autotypeset',
            'blockquote',
            'pasteplain',
            '|',
            'forecolor',
            'backcolor',
            'insertorderedlist',
            'insertunorderedlist',
            'selectall',
            'cleardoc',
            '|',
            'rowspacingtop',
            'rowspacingbottom',
            'lineheight',
            '|',
            'customstyle',
            'paragraph',
            'fontfamily',
            'fontsize',
            //"|",
            //"directionalityltr",
            //"directionalityrtl",
            //"indent",
            '|',
            'justifyleft',
            'justifycenter',
            'justifyright',
            'justifyjustify',
            '|',
            //"touppercase",
            //"tolowercase",
            //"|",
            'link',
            'unlink',
            //"anchor",
            //"|",
            'imagenone',
            'imageleft',
            'imageright',
            'imagecenter',
            '|',
            // 'simpleupload',
            'insertimage',
            //"emotion",
            //"scrawl",
            //"insertvideo",
            //"music",
            //"attachment",
            //"map",
            //"gmap",
            //"insertframe",
            //"insertcode",
            //"webapp",
            'pagebreak',
            //"template",
            //"background",
            '|',
            'horizontal',
            //"date",
            //"time",
            'spechars',
            //"snapscreen",
            //"wordimage",
            '|',
            'inserttable',
            'deletetable',
            'insertparagraphbeforetable',
            'insertrow',
            'deleterow',
            'insertcol',
            'deletecol',
            'mergecells',
            'mergeright',
            'mergedown',
            'splittocells',
            'splittorows',
            'splittocols',
            //"charts",
            //"|",
            //"print",
            //"preview",
            //"searchreplace",
            //"drafts",
            //"help"
          ],
        ],
        fontfamily: [
          {
            label: '',
            name: 'songti',
            val: '宋体,SimSun',
          },
          {
            label: '仿宋',
            name: 'fangsong',
            val: '仿宋,FangSong',
          },
          {
            label: '仿宋_GB2312',
            name: 'fangsong',
            val: '仿宋_GB2312,FangSong',
          },
          {
            label: '',
            name: 'kaiti',
            val: '楷体,楷体_GB2312, SimKai',
          },
          {
            label: '',
            name: 'yahei',
            val: '微软雅黑,Microsoft YaHei',
          },
          {
            label: '',
            name: 'heiti',
            val: '黑体, SimHei',
          },
          {
            label: '',
            name: 'lishu',
            val: '隶书, SimLi',
          },
          {
            label: '',
            name: 'andaleMono',
            val: 'andale mono',
          },
          {
            label: '',
            name: 'arial',
            val: 'arial, helvetica,sans-serif',
          },
          {
            label: '',
            name: 'arialBlack',
            val: 'arial black,avant garde',
          },
          {
            label: '',
            name: 'comicSansMs',
            val: 'comic sans ms',
          },
          {
            label: '',
            name: 'impact',
            val: 'impact,chicago',
          },
          {
            label: '',
            name: 'timesNewRoman',
            val: 'times new roman',
          },
        ],
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        serverUrl:
          process.env.VUE_APP_API_BASE_URL_API +'/api/jpodmadmin/UploadFile/Upload',
        imageActionName: 'uploadimage',
        imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
        imageCompressBorder: 1600,
        imageCompressEnable: true,
        imageFieldName: 'streamContent',
        imageInsertAlign: 'none',
        imageMaxSize: 20480000,
        imagePathFormat: '/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}',
        imageUrlPrefix: '',
      },
    };
  },
  created() {
    if (this.html_of != '') {
      this.html = this.html_of;
    }
  },
  methods: {
    openModule(e) {
      this.html = e;
    },
  },
};
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227

上面代码中最重要的就是配置了，如果配置有问题，则无法实现想要的效果了

4.1 上传图片需要指定一个上传接口——serverUrl字段

4.2 上传图片的格式——imageAllowFiles字段

4.3 上传图片需要指定文档流的参数名——imageFieldName字段，默认的是file

4.4 文件名的格式转化——imagePathFormat，这个我没有用到

5. 关于图片上传，上传成功后需要做一下处理才行

6.关于工具栏浮动到页面顶部的缺陷问题

当页面中出现滚动条时，如果此时再打开控制台，改变控制台的高度时，会出现下图的情况，就是工具栏浮动到页面的顶部了，此时的编辑器中内容上面出现一大段的空白区域，也就是原来工具栏占据的位置。

如上图所示：这种工具栏浮动到顶部的效果不好看，此时可以通过修改ueditor.config.js中的配置来进行处理。
找到public/static/ueditor/ueditor.config.js中的第387行，autoFloatEnabled默认为true，此时改为false即可。

修改此配置后，就不会出现工具栏读浮动的情况了。

完成！！！多多积累，多多收获！！！