web-dev-qa-db-ja.com

document.execCommand（）FontSize（ピクセル単位）？

document.execCommandを使用してフォントサイズを（たとえば）30pxに変更するにはどうすればよいですか？

この：

document.execCommand("fontSize", false, "30px");

関数execCommandの3番目の引数では、1から7までの値しか入力できないため、機能しません。

javascripteditorexeccommand
16
bordeux

これはFontSizeコマンドの制限です。私が考えることができるさまざまなオプションがあります：

  • 代わりにCSSクラスを使用して、 CSSクラスアプライヤー 私の Rangy ライブラリのモジュールを使用することができます。
  • document.execCommand("fontSize", false, "7");を呼び出してから、コマンドが作成した要素を見つけて、必要に応じて変更するなど、ハッキーな方法を使用できます。例を参照してください： http://jsfiddle.net/S3ctN/ 。これは明らかに、ドキュメントにサイズ7の<font>要素が他にないことに依存し、フォントサイズに<font>要素を使用するブラウザにも依存しています。
19
Tim Down

関数

var execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size + unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};

実行

execFontSize(30, 'px');
10
Roman S

2番目の答えとして、execcommandの後にjqueryを実行し、マークアップを独自のものに置き換えることをお勧めします。

Elemを要素に置き換え、font-sizeを目的の値に編集するだけです。

jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");
7
Benjamin Favre

それをcssで上書きするだけです：

font[size='7']{
    font-size: 20px; // or other length unit
}

または、scssを使用する場合は、ループを使用して1から7までのすべてのセレクターを生成できます。

@for $i from 1 to 7 {
    font[size='#{$i}']{
        font-size: $i * 2vw
    }
}
4
soli

これは、選択したテキストからフォントサイズを変更する要素を直接取得するため、ここで提案されている多くのソリューションよりも優れたソリューションです。

結果として、適切な要素を取得するためにDOMを参照する必要はなく、特定のfontSize（7、受け入れられた回答の最初のオプションで提案されているように、および他の回答）の使用を禁止する必要もありません。 ）。

function changeFont() {
    document.execCommand("fontSize", false, "7");
    var fontElements = window.getSelection().anchorNode.parentNode
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = "30px";
}

要約すると、execCommandを使用して選択範囲をスパンでラップするだけなので、後続のgetSelection（）の呼び出しでは、強調表示されたスパンが親として使用されます。次に、識別されたスパンにfontSizeスタイルを追加するだけです。

ここでは、fontSizeコマンドを使用しているため、<span>内ではなく、<font>内にラップされます。

ただし、これはexecCommandの任意のコマンドで機能する汎用メソッドであり、後者は、選択したコンテンツを異なる要素間でもラップするための便利な方法として使用されます。

これがライブです [〜＃〜] demo [〜＃〜]

3
Bonjour123

それは私の解決策です。それはクロムで動作します。コードは中国のウェブサイト（eqxiu）で見つかりました。

最初

document.execCommand("styleWithCSS", 0, true);
document.execCommand('fontSize', 0, '12px');

その後

jQuery.find('[style*="font-size: -webkit-xxx-large"],font[size]').css("font-size", "12px")

注：execCommandへのfontsizeパスは、少なくとも「12px」以上である必要があります。

2
姚嘉辉
$(document).ready(()=>{
        var activeFontSize = 30;
        var oDoc = document.getElementById("editor");
        var style = document.createElement("style");
        document.body.appendChild(style);
        
        function setFontSize(value){
                $editor.focus();
                document.execCommand("fontsize", false, 20);
                activeFontSize = value;
                createStyle();
                updateTags();
        }

        function updateTags(){
                var fontElements = oDoc.getElementsByTagName("font");
                for (var i = 0, len = fontElements.length; i < len; ++i) {
                        if (fontElements[i].size == "7") {
                                fontElements[i].removeAttribute("size");
                                fontElements[i].style.fontSize = activeFontSize+"px";
                        }
                }
        }

        function createStyle(){
                style.innerHTML = '#editor font[size="7"]{font-size: '+activeFontSize+'px}';
        }

        function updateToolBar(args){
                $fontSize.val(args.fontsize);
        }

        var $fontSize = $("#fontSize");
        var $editor = $("#editor");

        $fontSize.on("change", ()=>{
                setFontSize($fontSize.val())
        })

        $editor.on("keyup", ()=>{
                updateTags();
        })

        //var i = 0;
        $editor.on("keyup mousedown", (e)=>{
                //i++;
                //console.log("e.target", e.target)
                try{
                        var fontsize = $(window.getSelection().getRangeAt(0).startContainer.parentNode).css("font-size")
                        fontsize = fontsize.replace("px", "");
                        //document.execCommand("insertHTML", false, '<span class="font-size-detector'+i+'">X</span>');
                        //var fontsize = $(e.target).css("font-size")//$editor.find(".font-size-detector"+i).css("font-size");
                        //document.execCommand("undo", false, false);
                        //$editor.focus();
                        //console.log("fontsize", fontsize)
                        updateToolBar({fontsize})
                }catch(e){
                        console.log("exception", e)
                }
        })

        oDoc.focus();
        setFontSize(30);
})
.editor-box{box-shadow:0px 0px 1px 2px #DDD;max-width:500px;margin:0px auto;}
                .editor-tools{padding:20px;box-shadow:0px 2px 1px 0px #DDD}
                .editor-tools button{user-select:none;}
                #editor{height:200px;margin:10px 0px;padding:10px;font-size:14px;}
                #editor:focus{outline:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-box">
        <div class="editor-tools">
                <label>Font Size: </label>
                <select id="fontSize" >
                        <option value="10">10px</option>
                        <option value="12">12px</option>
                        <option value="14">14px</option>
                        <option value="20">20px</option>
                        <option value="22">22px</option>
                        <option value="30" selected="true">30px</option>
                        <option value="35">35px</option>
                        <option value="40">40px</option>
                        <option value="45">45px</option>
                        <option value="50">50px</option>
                </select>
        </div>
        <div id="editor" contenteditable="true">Hello, this is some editable text</div>
</div>
2
surinder singh

カスタムHTML（色、フォントファミリー）を使用して複数の行で機能する純粋なJavaScriptのソリューションを見つけました。

ドキュメントの選択を取得します。選択を解析し、そこからhtmlタグを保存します。次に、document.execCommandを使用して、選択したhtmlをインラインスタイルのdiv内に挿入します。また、document.execCommand（ 'insertHTML'、false、html）を使用する場合の利点は、WYSIWYGエディターで元に戻すことができることです。

これは機能です：

function fontSize(size) {

    var sel = document.getSelection(); // Gets selection

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}

それが役に立てば幸い。

1
Cristi Ghinea