avue中富文本属性设置

继第一个项目使用了vue-element-admin框架实现了我们的业务需求, 后来公司想重构产品, 随后购买了一套商业框架 - BladeX(服务真是的差劲), 这套框架包含了前后端, 而前端使用的是avue框架实现的, 这个框架又高度集成了element-plus, 使用起来也算是比较简单, 也可以使用代码生成器去实现,在此只记录使用avue框架富文本组件遇到的问题.

    富文本引入的是wangEditor, 而avue在此基础上又做了一个插件, 使用样例如图

富文本是用

根据上面的样例写富文本组件, 服务进行内容的上传, 提示传入的action不起作用, 查看avue-plugin-ueditor node_modules, 可以看到, options根本没有起作用,修改, options同级添加action, 上传, 完成;

但是产品又对富文本提出了新的需求,

    1. 字号设置中, 没有设置16px, 17px;

    2. 修改编辑器的默认行高,字体, 字号等;

查看文档, 设置字号可以, 可以在customConfig里设置, 但是这里我们遇到个问题, 我的avue-plugin-ueditor版本和他的版本不一致,导致设置customConfig不生效, 所以,更新最新版本吧.

使用方法:

customConfig: {

      MENU_CONF:{

        fontSize:{

          fontSizeList:[

            '12px',

            '13px',

            '14px',

            '15px',

            '16px',

            '17px',

            '18px',

            '19px',

            '22px',

            '24px',

            '29px',

            '32px',

            '40px',

            '48px'

          ],

        }

      },

      excludeKeys:[

        'blockquote',

        'todo',

        'bulletedList',

        'group-justify',

        'group-indent',

        'codeBlock',

        'undo',

        'redo',

        '|',

        'fullScreen',

      ]

    },

MENU_CONF中为设置内容, excludeKeys为不显示的工具按钮, 这里有个问题,设置uploadImage不起作用, 因为avue-plugin-ueditor没有取MENU_CONF设置的uploadImage内容;

设置编辑器默认值, wangEditor中有设置默认值的属性,defaultContent,但是avue-plugin-ueditor没有, 因此要设置defaultContent只能改源码了,

设置defaultContent

defaultContent: [

    {

      type: 'paragraph',

      children: [

        { text: '', fontFamily: '宋体', fontSize: '14px' },

      ],

      // lineHeight ,关于默认行高的设置，可查看源码或通过官方demo

      // https://www.wangeditor.com/demo/index.html

      // 输入文字，设置默认字体、行高之后 在控制台输入 ，this.editor.children 会显示如下内容：

      /*

      *[{"type": "paragraph", "children": [ {  "text": "faskdfjaslkdfj" } ], "lineHeight": "2.5" } ]

      * 按对应格式设置 jsonContent 即可

      * */

      lineHeight: 1

    }

  ],