使用execCommand将文字样式设置成css样式的办法

最新推荐文章于 2024-06-16 02:24:30 发布

原创

最新推荐文章于 2024-06-16 02:24:30 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文探讨了在富文本编辑器中使用execCommand遇到的问题，尤其是fontSize限制。了解到execCommand的fontSize只接受1到7的数值，而无法直接设置CSS样式。为了解决这个问题，提出了一种方法，通过寻找并修改span元素的样式来实现将文字样式设置成CSS样式，例如设置字体大小。

使用execCommand将文字样式设置成css样式的办法

前言

最近解决富文本编辑器umeditor中增加更多字号的需求，发现一个非常有意思的 API execCommand 。我们可以通过这个 API 操控富文本中的内容。关于此execCommand 详解，基于以上知识的介绍，来看看如何在umeditor组件基础上增加更多字号

问题描述

看完umeditor文档我想你应该知道，给编辑器增加字号再简单不过了，就是在配置文件中umeditor.config.js增加一行代码就完事儿了，像这样：

fontsize: [ 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 60, 72, 96]

然而我加完发现，有如下的bug：

输入时候选择字号输入字号是正确展示，不过我想把输入完的某些字改字号，这时候不正确显示设置的字号，如下：

于是开始看源码，定位到比较关键的代码如下：

源码中有默认的字号：

    ///import core
    ///import plugins\removeformat.js
    ///commands 字体颜色,背景色,字号,字体,下划线,删除线
    ///commandsName  ForeColor,BackColor,FontSize,FontFamily,Underline,StrikeThrough
    ///commandsTitle  字体颜色,背景色,字号,字体,下划线,删除线
    /**
     * @description 字体
     * @name UM.execCommand
     * @param {String}     cmdName    执行的功能名称
     * @param {String}    value             传入的值
     */
    UM.plugins['font'] = function () {
   
   
        var me = this,
            fonts = {
   
   
                'forecolor': 'forecolor',
                'backcolor': 'backcolor',
                'fontsize': 'fontsize',
                'fontfamily': 'fontname'
            },
            cmdNameToStyle = {
   
   
                'forecolor': 'color',
                'backcolor': 'background-color',
                'fontsize': 'font-size',
                'fontfamily': 'font-family'
            },
            cmdNameToAttr = {
   
   
                'forecolor': 'color',
                'fontsize': 'size',
                'fontfamily': 'face'
            };
        me.setOpt({
   
   
            'fontfamily': [{
   
   
                    name: 'songti',
                    val: '宋体,SimSun'
                },
                {
   
   
                    name: 'yahei',
                    val: '微软雅黑,Microsoft YaHei'
                },
                {
   
   
                    name: 'kaiti',
                    val: '楷体,楷体_GB2312, SimKai'
                },
                {
   
   
                    name: 'heiti',
                    val: '黑体, SimHei'
                },
                {
   
   
                    name: 'lishu',
                    val: '隶书, SimLi'
                },
                {
   
   
                    name: 'andaleMono',
                    val: 'andale mono'
                },
                {
   
   
                    name: 'arial',
                    val: 'arial, helvetica,sans-serif'
                },
                {
   
   
                    name: 'arialBlack',
                    val: 'arial black,avant garde'
                },
                {
   
   
                    name: 'comicSansMs',
                    val: 'comic sans ms'
                },
                {
   
   
                    name: 'impact',
                    val: 'impact,chicago'
                },
                {
   
   
                    name: 'timesNewRoman',
                    val: 'times new roman'
                },
                {
   
   
                    name: 'sans-serif',
                    val: 'sans-serif'
                }
            ],
            // 'fontsize': [10, 12, 16, 18, 24, 32, 48]
            'fontsize': [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28,