ContentEditable div üzerinde execCommand sınıfı sınıfı uygulayın

Bir içerik düzenlenebilir div üzerinde execCommand yürütürken bir düğmeyi etkin tutmak için yerleşik bir yol var mı?ContentEditable div üzerinde execCommand sınıfı sınıfı uygulayın

örnek: CARRET document.execCommand(command, null, false); uygulanmış olan şey içinde olduğunda benim düğmesi etkin kalmasını istiyorum

<input type="button" onclick="doRichEditCommand('bold');" value="B"/> 

function doRichEditCommand(command){ 
    document.execCommand(command, null, false); 
}

. Ebeveyn elemanlarını kontrol ederek yapılabildiğini varsayalım, fakat eğer yerleşik bir yol varsa daha iyi olurdu. Başka bir deyişle, cesaretin kalın olması gereken bir yerlerde kalın olması için turuncu düğmemde turuncu olmasını istiyorum.

kaynak

2016-03-20 Ced

<head> 
<script type="text/javascript"> 
    var editorDoc; 
    function InitEditable() { 
     var editor = document.getElementById ("editor"); 
     editorDoc = editor.contentWindow.document;   
     var editorBody = editorDoc.body; 

      // turn off spellcheck 
     if ('spellcheck' in editorBody) { // Firefox 
      editorBody.spellcheck = false; 
     } 

     if ('contentEditable' in editorBody) { 
       // allow contentEditable 
      editorBody.contentEditable = true; 
     } 
     else { // Firefox earlier than version 3 
      if ('designMode' in editorDoc) { 
        // turn on designMode 
       editorDoc.designMode = "on";     
      } 
     } 
    } 

    function ToggleBold() { 
     editorDoc.execCommand ('bold', false, null); 
    } 
</script> 
</head> 

<body onload="InitEditable();"> 
    First, write and select some text in the editor. 
    <br /> 
    <iframe id="editor" src="editable.htm"></iframe> 
    <br /><br /> 
    You can toggle the bold/normal state of the selected text with this button: 
    <br /> 
    <button onclick="ToggleBold();">Bold</button> 
</body>

editable.html: Burada

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Editable content example</title> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     Some text in the editor. 
    </body> 
</html>

bazı olası çözüm: execCommand method examples

kaynak

2016-03-20 08:31:05

Sorumu anladığınızdan emin değilim, etkin olduğunda, Bold düğmesinin turuncu olmasını istiyorum. – Ced

http://jsbin.com/ebubop/7/edit?html, çıkış –

Bana yardım etmeye çalıştığınız için teşekkür ederim ama Bu sorduğum şey değil. Örneğin kelimeyi veya gmail'i kullanırsanız, karınca metni metnin kalın olduğu bir yere yerleştirildiğinde kalın düğme etkin olacaktır (turuncu). Düğmeyi contentEditable alanına bağlamak için yerleşik bir işlev olup olmadığını merak ettim. Hiçbiri olmadığından şüpheleniyorum ama bu bir atıştı. – Ced

Yapılabilir, ama gerçekten sinir bozucu.

Kapsamlı olarak değiştirilebilen her değişiklikte, düzeltme işaretinin bulunduğu metnin durumunu bulmak için document.queryCommandState() numaralı telefonu arayın ve eşleşecek düğme sınıfını güncelleyin. Yani böyle bir şey: Oradan uygulayabilir ya da kalın düğmeden bir stil kaldırmak

let div = document.getElementById("myContentEditable"); 
div.oninput =() => { 
    if (document.queryCommandState('bold')) { 
    console.log("bold!"); 
    } else { 
    console.log("not bold."); 
    } 
    return false; 
};

olsun cesur bölümünde imleç en olmadığını belirtmek için. Diğer stiller için tekrarlayın.

Rahatsız edici kısım, farklı durumlardaki düğme durumunu güncellemeniz gerektiğidir. Bu bana oldukça kapsamlı geliyor:

div.oninput = div.onselect = div.onchange = div.onkeyup = eventhandler;

... ama yanılıyor olabilirim.

kaynak

2017-10-21 22:21:24

ContentEditable div üzerinde execCommand sınıfı sınıfı uygulayın

cevap

İlgili konular