init() 初始化函数

【限时免费】岁尾最强一次云计算大年夜会，看传统、社区、互联网企业若何碰撞？

前段时光在寻找一些关于富文本编辑器的材料，然后发清楚明了这个名为 Pell 的项目，它是一个所见即所得（WYSIWYG）的文本编辑器，固然它的功能很简单，然则令人吃惊的是它只有 1kb 大年夜小。而项目最核心的文件 pell.js 只有130行，即使加上其它部分，总的 js 数量也不到200行。这引起了我的兴趣，决定看看它的源码是若何做到这一点的。

项目标重要代码在 pell.js 文件中，其构造很简单，重要功能的实现依附于以下的几个部分

• actions 对象
• exec() 函数
• init() 函数

Document.execCommand()

先大年夜最简单的部分看起， exec() 函数只有下面庞行：

它将 document.execCommand() 进行了一个简单的包装，Document.execCommand() 就是这个编辑器的核心，其语法如下

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 

• aCommandName 是表示想履行的敕令的字符串，比如：加粗 ‘bold’，创建链接 ‘createLink’，改变字体大年夜小 ‘fontSize’ 等等
• aShowDefaultUI 是否显示默认的用户界面
• aValueArgument 有些敕令须要额外的输入，如插入图片、链接时须要给出地址

文件中定义了一个名为 actions 的对象，对应的是下图对象老喔赡┞封一行按钮， actions 中的每个子对象都保存了一个按钮的属性。

部分代码：

const actions = { 
 
    bold: { 
 
        icon: '<b>B</b>', 
 
        title: 'Bold', 
 
        result: () => exec('bold') 
 
    }, 
 
    italic: { 
 
        icon: '<i>I</i>', 
 
        title: 'Italic', 
 
        result: () => exec('italic') 
 
    }, 
 
    underline: { 
 
        icon: '<u>U</u>', 
 
        title: 'Underline', 
 
        result: () => exec('underline') 
 
    }, 
 
    // … 
 
} 

这段代码中显示了名为 bold，italic，underline 的三个对象属性，对应于对象栏中前方的加粗、斜体、下划线按钮，可以看出它们的构造是雷同的，都有下列三个属性：

• icon: 如安在对象栏中显示
• title: 就是 title 啦
   1/4    1 2 3 4 下一页 尾页
  
  

  　　推荐阅读

  　　2018年人工智能会如何发展？全球20位顶尖大咖这样说

  【限时免费】岁尾最强一次云计算大年夜会，看传统、社区、互联网企业若何碰撞？ 人工智能在2017年取得了一系列冲破性的结不雅。2018年，人工智能毕竟会若何成长，是否可以或许为我们的生活>>>详细阅读

  
  

  本文标题：不到200行JavaScript代码如何实现富文本编辑器

  地址：http://www.17bianji.com/lsqh/40288.html

   1/2    1