ユーザーが Web ページの任意の部分を選択できるようにする、クロス ブラウザー Web ベースの注釈ツールセットに取り組んでいます。
- HIGHLIGHT、選択した場合:
ジョンは<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>
- REMOVE FORMAT : 以下を選択した場合:
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 でしか動作しないため、希望をあきらめました。私の要件の 1 つは、ユーザーが元のテキストを変更することは許可されておらず、独自の注釈 (ハイライト、インライン ノートなど) を追加することだけが許可されていることです。
ここにあなたのすべての意見を書きたいと思います。可能であれば、正しい方向に向けてください。
――チェサン