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

result: 一个函数，会赋给按钮作为点击事宜，调用之前所提到的 exec() 函数来对文本进行操作

如今已有了 actions 对象，那么若何应用它呢？这就要看看 init() 函数了，它会根据必定的规矩大年夜 actions 对象中选出元素构成一个数组，数组的每一项都邑生成一个按钮。下面代码中的 settings.actions 即为此数组，个中的每个元素都对应一个显示在对象老喔赡按钮。settings.actions 的生陈规矩会在后面进行解释。

// pell.js 中的 init() 函数 
 
settings.actions.forEach(action => { 
 
    // 新建一个按钮元素 
 
    const button = document.createElement('button') 
 
    // 给按钮加上 css 样式 
 
    button.className = settings.classes.button 
 
    // 把 icon 属性作为内容显示出来 
 
    button.innerHTML = action.icon 
 
    button.title = action.title 
 
    // 把 result 属性赋给按钮作为点击事宜 
 
    button.onclick = action.result 
 
    // 将创建的按钮添加到对象栏上 
 
    actionbar.appendChild(button) 
 
})

如许数组中的每个元素就都生成了一个对象老喔赡按钮了。

想应用 pell 编辑器时，只要调用 init() 函数来初始化一个编辑器即可。它接收一个 setting 对象作为参数，个中包含如许的一些属性：

element: 编辑器的 DOM 元素
styleWithCSS: 设置为 true 时，将会用代替
actions
onChange

export const exec = (command, value = null) => { 
 
    document.execCommand(command, false, value); 
 
};

个中最重要的是 actions，它是一个数组，包含了你想在对象栏显示的按钮列表。

actions 数组中可以有这几种元素：

一个字符串
一个有 name 属性的对象
一个对象，没有 name 属性，但有生成一个按钮的必须属性 icon，result 等

在 init() 函数中会把这个 actions参数和 pell.js 中定义的 actions对象组合起来，可以将 actions 对象算作一个默认设置，看以下代码：

actions: [ 
 
  'bold', 
 
  'underline', 
 
  'italic', 
 
  { 
 
    name: 'image', 
 
    result: () => { 
 
      const url = window.prompt('Enter the image URL') 
 
      if (url) window.pell.exec	
			 2/4   首页 上一页 1 2 3 4 下一页 尾页	
			

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


本文标题：不到200行JavaScript代码如何实现富文本编辑器
地址：http://www.17bianji.com/lsqh/40288.html
 1/2    1