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

('insertImage', ensureHTTP(url))

}

// ...

]

如不雅参数对象 setting 中不包含 actions 数组, 则会默认应用之前定义的 actions 对象来初始化。

init() 函数里还有一个重要的部分，就是创建一个可编辑区域，这里创建了一个 div 元素，将其 contentEditable 属性设为 true，大年夜而可以在这里应用之前提到的 document.execCommand() 敕令了。

// 创建编辑区域的元素 
 
settings.element.content = document.createElement('div') 
 
// 让 div 成为可编辑状况 
 
settings.element.content.contentEditable = true 
 
settings.element.content.className = settings.classes.content 
 
// 当用户输入时，更新页面的响应部分 
 
settings.element.content.oninput = event => 
 
    settings.onChange(event.target.innerHTML) 
 
settings.element.content.onkeydown = preventTab 
 
settings.element.appendChild(settings.element.content)

流程整顿

一、在调用 init() 函数时，在参数对象的 action 数组中参加以下一项

{ 
 
    name: 'link', 
 
    result: () => { 
 
        const url = window.prompt('Enter the link URL') 
 
        if (url) window.pell.exec('createLink', ensureHTTP(url)) 
 
    } 
 
}

二、在 init() 的运行过程中，会检查已定义的 actions 对象中是否有 link 这个属性。经检查属性确切存在

link: { 
 
    icon: '🔗', 
 
    title: 'Link', 
 
    result: () => { 
 
        const url = window.prompt('Enter the link URL') 
 
        if (url) exec('createLink', url) 
 
    } 
 
}

因为传入的参数中有 result 这一项，所以用传入的 result 来代替 link 对象中的默认值，然后将修悛改的 link 对象放入 settings.actions 数组中。

三、对 settings.actions 数组进行一次迭代来生成对象栏，link 对象作为个中的一项生成了一个“插入链接”的按钮。result 属性成为其点击事宜。

actions 对象

3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

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

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

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

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

1/2 1