温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中怎么实现富文本编辑器

发布时间:2021-08-10 16:17:37 来源:亿速云 阅读:154 作者:Leah 栏目:web开发

JavaScript中怎么实现富文本编辑器,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

Document.execCommand()

先从最简单的部分看起, exec() 函数只有下面三行:

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

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

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
  • aCommandName 是表示想执行的命令的字符串,比如:加粗 ‘bold’,创建链接 ‘createLink’,改变字体大小 ‘fontSize’ 等等

  • aShowDefaultUI 是否显示默认的用户界面

  • aValueArgument 有些命令需要额外的输入,如插入图片、链接时需要给出地址

注:经过我的试验,在 Chrome 下改变 aShowDefaultUI 的值并未发现影响,这个 stackoverflow 的问题中提到这是一个来自于旧版 IE 的参数,所以这里设置为默认的 false 即可。

actions 对象

文件中定义了一个名为 actions 的对象,对应的是下图工具栏上的这一行按钮, actions 中的每个子对象都保存了一个按钮的属性。

JavaScript中怎么实现富文本编辑器

部分代码:

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')      },      // &hellip;  }

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

  • icon: 如何在工具栏中显示

  • title: 就是 title 啦

  • 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)  })

这样数组中的每个元素就都生成了一个工具栏上的按钮了。

init() 初始化函数

想使用 pell 编辑器时,只要调用 init() 函数来初始化一个编辑器即可。它接收一个 setting 对象作为参数,其中包含这样的一些属性:

  • element: 编辑器的 DOM 元素

  • styleWithCSS: 设置为 true 时,将会用 代替

  • actions

  • onChange

其中最重要的是 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('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 数组中。

看完上述内容,你们掌握JavaScript中怎么实现富文本编辑器的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI