Java 前端 在线富文本编辑器 前端富文本编辑器使用

富文本编辑器——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);

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>

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

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即可。

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