2

選択したテキストをタグで囲む機能を実装しました。「Apply Style」ボタンをクリックして試すことができます。
また、タグを削除する機能も実装しました。
タグが削除されたときにテキストを選択したままにしたいのですが、実装方法がわかりません。
次のコードで試してみましたが、うまくいきません...
Chrome でこのコードを実行しています。

http://jsfiddle.net/f5HaK/3/

http://youtube.com/watch?v=VtBSJzoTmys&feature=youtu.be

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link href="css/demo.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
<div id="buttons">
    <input id="applyStyle" type="button" value="Apply Style" />
    <input id="removeStyle" type="button" value="Remove Style" />    
</div>
<div contenteditable="true">hello world</div>
</body>
</html>

main.js

$(function(){

    var TextManager = function(){
        var sel;
        var naked;
    };

    TextManager.prototype = {
        execCommand: function(commandWithArgs, valueArg){
            var commandArr = commandWithArgs.split(' '),
            command = commandArr.shift(),
            args = commandArr.join(' ') + (valueArg || '');
            document.execCommand(command, 0, args);
        },
        applyStyle: function(tagName, className){
            this.sel = window.getSelection();
            var snipet = '<' + tagName + ' class="' + className + '" >' + this.sel.toString() + '</' + tagName + '>';
            this.execCommand('insertHTML', snipet);
            console.log(this.sel);
            this.sel.extend(this.sel.focusNode, 0);
        },
        removeStyle: function(){
            var jcurnode = $(this.sel.focusNode.parentNode);
            this.naked = jcurnode.text();
            jcurnode.replaceWith(this.naked);

            this.sel.extend(this.sel.focusNode, this.naked.length); //here, I'm trying to select text again which I removed the style.
        },
    };

    textManager = new TextManager();

    $('#applyStyle').on('click', function(){
        textManager.applyStyle('div', 'testclass');
    });

    $('#removeStyle').on('click', function(){
        textManager.removeStyle();
    });

});

デモ.css

div {
    outline: none;
    font-size: 20px;
    font-family: 'Meiryo'
}

#buttons{
    margin: 10px;
}

.testclass{
    font-weight: bold;
}
4

1 に答える 1

1

jcurnode.replaceWith(this.naked);を呼び出すときに DOM から要素を削除するため、テキストは選択されたままになりません。削除されたノードを選択したままにすることはできません。行を置き換えることで修正できます

jcurnode.replaceWith(this.naked);

この行でremoveStyleから：

this.execCommand('removeFormat', "");

おそらく、使用できるすべてのコマンド識別子のリストを見たいと思うかもしれません: http://help.dottoro.com/larpvnhw.php

于 2013-11-03T18:17:25.320 に答える