0

我正在开发一个基于跨浏览器 Web 的注释工具集，它允许用户选择网页的任何部分

  • 突出显示，如果您选择：

约翰是<li>大</li> <li>转储</li>

结果

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

  • 删除格式：如果您选择：

john

从

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

结果

<span style="background-color: rgb(106, 168, 79)"></span> john <span style="background-color: rgb(106, 168, 79)">is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

  • UNDO/REDO : 很高兴有功能

能够撤消和重做已执行的操作

我有一个突出显示的部分解决方案

function highlight(colour) {
var range, sel;
if (document.selection && (!window.getSelection)) {
 // IE case
    range = document.selection.createRange();  
    range.execCommand("BackColor", false, colour);  
} else if (window.getSelection) {    
// Non-IE case 
    sel = window.getSelection();
    if (sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
//without designmode=on, you can't highlight the selected html (chrome)
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // HiliteColor avoids FF3.5 from painting the background of the whole block
    if (!document.execCommand("HiliteColor", false, colour) ) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

}

由于我的要求与富文本编辑器有很多相似之处，我查看了 ckeditor 的代码和（广泛地）在 google 闭包编辑器中。我已经放弃了对它们的希望，因为它们只能在可编辑的 iframe 中工作。我的要求之一是不允许用户更改原始文本，而只能添加自己的注释（突出显示、内联注释等）。

我很想在这里发表你所有的意见，如果可能的话，我会指出正确的方向。

——崔桑

4

3 回答 3

1

我认为您仍然可以使用“富文本编辑器”方式（iframe），但随后尝试捕获“onkeypress”、“onkeydown”和其他交互事件以停止默认行为（编辑文档）。

于 2009-12-10T14:19:21.620 回答
0

这是一个很好的资源，可以帮助我做类似的事情：http ://www.quirksmode.org/dom/execCommand.html

以第一页链接为例：

http://www.quirksmode.org/dom/execCommand/

于 2009-12-10T14:16:31.890 回答
0

您将在论坛中找到解决方案：http ://cksource.com/forums/viewtopic.php?f=11&t=15659

为了清楚起见，我在下面插入代码：

// Temporary workaround for providing editor 'read-only' toggling functionality.  
   ( function()
  {
   var cancelEvent = function( evt )
  {
     evt.cancel();
  };

 CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
 {
  // Turn off contentEditable.
  this.document.$.body.disabled = isReadOnly;
  CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
  : this.document.$.designMode = isReadOnly ? "off" : "on";

  // Prevent key handling.
  this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
  this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

  // Disable all commands in wysiwyg mode.
  var command,
     commands = this._.commands,
     mode = this.mode;

  for ( var name in commands )
  {
     command = commands[ name ];
     isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
     this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
  }
 }
} )();

在你的javascript中，调用如下

// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );

以上基本上提供了一个可编辑的区域（iframe），同时它是只读的（您不能从键盘输入）。它完全满足了我所有想要的功能。我不必关心如何实现：突出显示、删除格式、撤消和重做。一切都由ckeditor处理:)

于 2009-12-16T16:47:19.310 回答