wangeditor的一些使用设置字体、字号、背景色等

pc项目使用wangeditor的富文本,但是发现在设置:defaultConfig的时候,里面的MENU_CONF设置不起效果。

然后设置defaultConfig里面的 值

 editorConfig: {
        placeholder: '默认初始化值',
        backColor: 'red', // 背景颜色
        MENU_CONF: {
          colors: ['#000', '#333', '#666'],
          fontSizeList: [{ name: '14px', value: '14px' }, { name: '24px', value: '24px' }],
          uploadImage: {
            customUpload: this.uploaadImg
          },
          uploadVideo: {
            customUpload: this.uploaadVideo
          }
        }
      },

然并没有任何效果。

那么我准备在onCreated这里面做点小文章。

在这里拿到editor,然后直接改它的属性。

      this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错

      console.log(this.editor.getConfig())//这里看下getConfig下的数据,然后进行改
      this.editor.getConfig().MENU_CONF.fontSize.fontSizeList = ['13px', '16px', '18px', '22px', '24px', '30px', '32px', '48px'];
      this.editor.getConfig().MENU_CONF.fontFamily.fontFamilyList = ['黑体', '宋体', '仿宋'],
        this.editor.getConfig().MENU_CONF.bgColor.colors = ['rgb(255,255,0)',
          'rgb(0,255,0)',
          'rgb(0,255,255)',
          'rgb(255,0,255)',
          'rgb(0,0,255)',
          'rgb(255,0,0)',
          'rgb(0,0,128)',
          'rgb(0,128,128)',
          'rgb(0,128,0)',
          'rgb(128,0,128)',
          'rgb(128,0,0)',
          'rgb(128,128,0)',
          'rgb(128,128,128)',
          'rgb(192,192,192)',
          'rgb(0,0,0)'
        ]
      //设置初始化字体和字号
      this.editor.children[0].fontFamily = '仿宋';
      this.editor.children[0].fontSize = '30px';

搞定,亲测有效。我这修改了字体、字号、背景色、默认字体和默认字号。有其他想改的,在getConfig或者直接在editor下找找看。

你可能感兴趣的:(前端,前端,javascript,html)