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

最新推荐文章于 2024-07-06 16:55:42 发布

米粒宝的爸爸

最新推荐文章于 2024-07-06 16:55:42 发布

阅读量673

点赞数 5

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/chenghao13834505361/article/details/139231478

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

<Editor style="height: 200px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="handleChange" />

然后设置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下找找看。