Wangeditor 编辑器如何扩展字体颜色

Wangeditor 编辑器如何扩展字体颜色

  1. 实例wangEditor 后,直接修改实例config.colors颜色数组
    在这里插入图片描述 在这里插入图片描述
  2. 源码:
this.editor = new E(this.$refs.editor);
         this.editor.config.colors = [
           "#000000", "#ffffff", "#eeece0", "#1c487f", "#4d80bf", "#c24f4a", "#8baa4a", "#7b5ba1", "#46acc8",
            "#f9963b",
            "#FF0000",
            "#00FF00",
            "#0000FF",
            "#FF00FF",
            "#00FFFF",
            "#FFFF00",
            "#000000",
            "#70DB93",
            "#5C3317",
            "#9F5F9F",
            "#B5A642",
            "#D9D919",
            "#A67D3D",
            "#8C7853",
            "#A67D3D",
            "#5F9F9F",
            "#D98719",
            "#B87333"
            ];

3.附带常用字体颜色

1白色                    #FFFFFF
  2红色                #FF0000
  3绿色                #00FF00
  4蓝色                #0000FF
  5牡丹红              #FF00FF
  6青色              #00FFFF
  7黄色                #FFFF00
  8黑色           #000000
  9海蓝                #70DB93
  10 巧克力色          #5C3317
  11 蓝紫色         #9F5F9F
  12 黄铜色            #B5A642
  13 亮金色           #D9D919
  14 棕色             #A67D3D
  15 青铜色      #8C7853
  16 2号青铜色      #A67D3D
  17 士官服蓝色    #5F9F9F
  18 冷铜色      #D98719
  19 铜色       #B87333
  20 珊瑚红      #FF7F00
  21 紫蓝色      #42426F
  22 深棕       #5C4033
  23 深绿       #2F4F2F
  24 深铜绿色     #4A766E
  25 深橄榄绿     #4F4F2F
  26 深兰花色     #9932CD
  27 深紫色      #871F78
  28 深石板蓝     #6B238E
  29 深铅灰色     #2F4F4F
  30 深棕褐色     #97694F
  32 深绿松石色    #7093DB
  33 暗木色      #855E42
  34 淡灰色      #545454
  35 土灰玫瑰红色   #856363
  36 长石色      #D19275
  37 火砖色          #8E2323
  38 森林绿      #238E23
  39 金色       #CD7F32
  40 鲜黄色      #DBDB70
  41 灰色       #C0C0C0
  42 铜绿色      #527F76
  43 青黄色      #93DB70
  44 猎人绿      #215E21
  45 印度红      #4E2F2F
  46 土黄色      #9F9F5F
  47 浅蓝色      #C0D9D9
  48 浅灰色      #A8A8A8
  49 浅钢蓝色     #8F8FBD
  59 浅木色      #E9C2A6
  60 石灰绿色     #32CD32
  61 桔黄色      #E47833
  62 褐红色      #8E236B
  63 中海蓝色     #32CD99
  64 中蓝色      #3232CD
  65 中森林绿     #6B8E23
  66 中鲜黄色     #EAEAAE
  67 中兰花色     #9370DB
  68 中海绿色     #426F42
  69 中石板蓝色    #7F00FF
  70 中春绿色     #7FFF00
  71 中绿松石色    #70DBDB
  72 中紫红色     #DB7093
  73 中木色      #A68064
  74 深藏青色     #2F2F4F
  75 海军蓝      #23238E
  76 霓虹篮      #4D4DFF
  77 霓虹粉红     #FF6EC7
  78 新深藏青色    #00009C
  79 新棕褐色     #EBC79E
  80 暗金黄色     #CFB53B
  81 橙色       #FF7F00
  82 橙红色      #FF2400
  83 淡紫色      #DB70DB
  84 浅绿色      #8FBC8F
  85 粉红色      #BC8F8F
  86 李子色      #EAADEA
  87 石英色      #D9D9F3
  88 艳蓝色      #5959AB
  89 鲑鱼色      #6F4242
  90 猩红色      #BC1717
  91 海绿色      #238E68
  92 半甜巧克力色   #6B4226
  93 赭色       #8E6B23
  94 银色       #E6E8FA 
  95 天蓝       #3299CC
  96 石板蓝      #007FFF
  97 艳粉红色     #FF1CAE
  98  春绿色     #00FF7F
  99  钢蓝色     #236B8E
  100 亮天蓝色     #38B0DE
  101 棕褐色      #DB9370
  102 紫红色      #D8BFD8
  103 石板蓝色     #ADEAEA
  104 浓深棕色     #5C4033
  105 淡浅灰色     #CDCDCD
  106 紫罗兰色     #4F2F4F
  107 紫罗兰红色    #CC3299
  108 麦黄色         #D8D8BF
  109 黄绿色      #99CC32
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果在使用 WangEditor 编辑器时,设置了文字颜色、背景色、字体大小或字体类型等样式无效,可能是因为缺少相应的 CSS 样式。 解决方法如下: 1. 打开 WangEditor 的 CSS 文件,一般是 `wangeditor.min.css` 或 `wangeditor.css`。 2. 确认文件中是否包含了设置样式的 CSS 规则,例如: ```css /* 设置字体颜色 */ .wangEditor-txt-color1 { color: #ff0000; } /* 设置背景颜色 */ .wangEditor-bgcolor1 { background-color: #ffff00; } /* 设置字体大小 */ .wangEditor-font-size-16 { font-size: 16px; } /* 设置字体类型 */ .wangEditor-font-family-simkai { font-family: simkai; } ``` 3. 如果 CSS 文件中没有包含这些 CSS 规则,可以手动添加,也可以从官方提供的样式库中复制相应的样式,例如: ```html <!-- 引入样式库 --> <link rel="stylesheet" type="text/css" href="https://unpkg.com/wangeditor/release/wangEditor.min.css"> <!-- 设置字体颜色 --> <div class="wangEditor-txt-color1">这是一段红色文字</div> <!-- 设置背景颜色 --> <div class="wangEditor-bgcolor1">这是一段黄色背景文字</div> <!-- 设置字体大小 --> <div class="wangEditor-font-size-16">这是一段16px字号的文字</div> <!-- 设置字体类型 --> <div class="wangEditor-font-family-simkai">这是一段宋体文字</div> ``` 4. 如果 CSS 文件中有这些 CSS 规则,但样式仍然无效,可能是因为样式被覆盖了。可以尝试使用 `!important` 关键字强制应用样式,例如: ```css .wangEditor-txt-color1 { color: #ff0000 !important; } ``` 5. 保存文件并重新加载 WangEditor 编辑器,就可以看到设置的样式了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值