如何在一个可信的div中监控文本样式和格式?

时间:2013-04-14 09:10:12

标签: javascript angularjs text-editor addeventlistener execcommand

我有这个文本编辑器plunker example问题是当我点击粗体按钮或任何其他按钮按钮没有显示可编辑div的状态时,我知道如果我添加了一个类可以修复到ng-mousedown事件函数中的按钮但是如果我点击一个带有粗体文本的区域也不能解决问题,这个区域也应该将一个类添加到正确的工具栏按钮,也许我应该使用类似观察者的东西但要观看什么?

更新

好的,我做了一些挖掘工作,我正在尝试观察插入符号的位置,这样我就可以将正确的样式应用到文本编辑器的工具栏按钮,我想到了$ watchers但我从未使用它们。
我正在使用的例子来自这个StackOverflow post帖子中有一个Jsfiddle,但是我用AngularJS做了一个plunker示例,它展示了如何在可信任的div中获得插入位置。
有没有更好的方法来实现这一点,比如获取内部contenteditable div的DOM树,然后制作元素和位置的映射,然后使用数据绑定来控制工具栏中按钮的状态?
任何帮助,提前谢谢。

1 个答案:

答案 0 :(得分:1)

我在SO post中找到了答案:

  

浏览器不是手动执行所有操作,而是使用方法告诉您当前选择或插入符号是粗体,斜体还是其他:document.queryCommandState()MSDN),用于二进制命令,例如粗体和斜体,document.queryCommandValue()MSDN)用于带有值的命令,例如与字体相关的命令。