使用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, 29,