Список флажков в contentEditable div

Я хочу создать простой wysiwyg, и я хочу, чтобы один из вариантов заключался в том, чтобы добавить список флажков, как и неупорядоченный список, но имеющий флажки в начале каждого элемента.Список флажков в contentEditable div

Моя основная идея заключается в том, чтобы использовать Javascript document.execCommand редактировать окно WYSIWYG с contentEditable DIV, так же, как это: http://www.quirksmode.org/dom/execCommand/

Но когда я создаю кнопку для CheckBoxList, я до сих пор нет идея о том, как я могу создать его с тем же поведением, что и ul, генерируя новые, нажав enter и останавливаясь при двойном вводе. Есть идеи?

источник

2014-09-30 raphadko

Это должно работать так, как вы просите, хотя, возможно, должны быть отредактированы, чтобы отразить то, что вы действительно хотите сделать со списком флажков:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>test-page</title> 
<script type="text/javascript"> 
//<!-- 

var bxs, clk, dv, lng, tx, spn, und; 

function newone() 
{ if(bxs == und) //if undefined do initialization stuff once 
    { bxs = []; //array of checkboxes, accessible any time 
    clk = document.getElementById("clk"); //"click" message 
    dv = document.getElementById("addmore"); //"div" element 
    tx = document.getElementById("txbx"); //"textbox" element 
    } 
    lng = bxs.length;     //current number of checkboxes 
    spn = document.createElement("span") //create a "span" element 
    spn.innerHTML = "&nbsp; &nbsp;";  //indent from left of page 
    bxs[lng] = document.createElement("input"); //create checkbox 
    bxs[lng].type = "checkbox"; 
    spn.appendChild(bxs[lng]); //put it inside the "span" element 
    dv.insertBefore(spn, tx); //put the "span" element inside the "div" 
    tx.value = "";   //ensure textbox has no text 
    tx.hidden = false;  //display the textbox 
    clk.hidden = true;  //hide the "click" message 
    tx.focus();    //let user start typing in the textbox 
    return; 
} 

function tstkey(e) 
{ if((e.keyCode == 13) &&  //Enter key pressed? 
    (tx.value.length > 2)) //check minimum entry length 
    { spn.innerHTML += (tx.value + "<br />"); //finish current line 
    newone(); //create another checkbox 
    } 
    else if((e.keyCode == 27) || //Escape pressed? 
      ((e.keyCode == 13) &&  //or 
      (tx.value.length == 0))) //blank entry? 
    { dv.removeChild(spn); //remove last-added "span" 
    bxs.length = lng; //remove last-added checkbox 
    tx.hidden = true; //hide the textbox 
    clk.hidden = false; //display the "click" message 
    } 
    return; 
} 

// --> 
</script> 
</head> 
<body> 
<div id="addmore"> 
<input id="txbx" type="text" size="30" maxlength="50" hidden="hidden" onkeydown="tstkey(event);" /><br /> 
<span id="clk" onclick="newone();" style="background-color:#C0C0C0;">click to create a new checkbox item</span> 
</div> 
</body> 
</html>

источник

2014-09-30 09:31:15 vernonner3voltazim

Список флажков в contentEditable div

ответ

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