Применить класс к кнопке, который execCommand на contentEditable div

Есть ли встроенный способ держать кнопку активным, когда она выполняет execCommand в содержимом редактируемого div?Применить класс к кнопке, который execCommand на contentEditable div

пример:

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

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

Я хотел бы моя кнопка, чтобы оставаться активным, когда Carret находится в чем-то, где document.execCommand(command, null, false); был применен. Я полагаю, что это выполнимо, проверяя родительские элементы, но если есть встроенный способ, было бы лучше.

Другими словами, я бы хотел, чтобы моя смелая кнопка была оранжевой, когда каррет где-то должен быть смелым.

источник

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:

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

некоторые из возможных решений: execCommand method examples

источник

2016-03-20 08:31:05

Я не уверен, что вы поняли мой вопрос, я хочу, чтобы моя смелая кнопка стала оранжевой, когда активна – Ced

http://jsbin.com/ebubop/7/edit?html,output –

Я ценю, что вы пытаетесь помочь мне, но это не то, о чем я прошу. Например, если вы используете слово или gmail, жирная кнопка будет активна (оранжевая), когда каррет будет помещен в место, где текст выделен жирным шрифтом. Я задавался вопросом, есть ли встроенная функция, чтобы связать кнопку с полем contentEditable. Я подозреваю, что нет никого, кроме того, что стоит того. – Ced

Это выполнимо, но это действительно раздражает.

Каждый раз, когда контекстные изменения вы вызываете document.queryCommandState(), найдите состояние текста, в котором находится каретка, а затем обновите класс кнопки для соответствия. Так что-то вроде:

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

Оттуда вы можете применить или удалить стиль из вашей смелой кнопки, чтобы указать, является ли курсор в смелой секции или нет. Повторите для других стилей.

Досадной частью является то, что вам необходимо обновить состояние кнопки на нескольких разных событиях. Для меня это выглядит довольно исчерпывающим:

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

... но я мог ошибаться.

источник

2017-10-21 22:21:24

Применить класс к кнопке, который execCommand на contentEditable div

ответ

Смежные вопросы