Javascript HTML注释(选择、突出显示、删除格式)
我正在开发一个基于web的跨浏览器注释工具集,它允许用户选择网页的任何部分Javascript HTML注释(选择、突出显示、删除格式),javascript,html,css,highlighting,undo-redo,Javascript,Html,Css,Highlighting,Undo Redo,我正在开发一个基于web的跨浏览器注释工具集,它允许用户选择网页的任何部分 突出显示,如果选择: 约翰是个大人物废物 结果 约翰是 大的转储 删除格式:如果选择: john 从 约翰是 大的转储 结果 约翰是 大的转储 撤消/重做:很高兴有这个功能 能够撤消和重做执行的操作 我有一个突出显示的部分解决方案 function highlight(colour) { var range, sel; if (document.selection && (!window.ge
- 突出显示,如果选择:
- 删除格式:如果选择:
john
从
约翰是
- 撤消/重做:很高兴有这个功能
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";
}
}
因为我的需求与richtext编辑器有很多相似之处,所以我在google Closes editor中查看了ckeditor和(广泛)的代码。我已经放弃了对它们的希望,因为它们只在一个可编辑的iframe中工作。我的一个要求是,不允许用户更改原始文本,只允许用户添加自己的注释(突出显示、内联注释等)
我很乐意在这里发表你的所有意见,如果可能的话,给我指出正确的方向
--Choesang这里有一个很好的资源,可以帮助我做一些类似的事情: 以第一页链接为例:
我认为您仍然可以使用“富文本编辑器”方式(iframe),但然后尝试捕捉“onkeypress”、“onkeydown”和其他交互事件来停止默认行为(编辑文档)。您将在论坛中找到解决方案: 为了清楚起见,我插入以下代码:
// 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),同时它是只读的(您不能从键盘输入)。它完全满足了我所有想要的功能。我不必关心如何实现:高亮显示、删除格式、撤消和重做。这是一个很好的例子,也是一个很糟糕的网站,但是我发现readonly按钮不是跨浏览器的(IE8,chrome不遵守规则)。谢谢你的建议。我希望它是可行的,在过去的一周里,我试着用google Close editor完全按照你说的做。你是对的,最后,我发现使用ckeditor,可以使所有内容都是只读的,并且仍然保持iframe内容的可编辑性。请在下面找到完整的代码,摘自