Background Looking to develop a WYSIWYG editor for ordered lists so that people
ID: 647127 • Letter: B
Question
Background
Looking to develop a WYSIWYG editor for ordered lists so that people can directly edit lists of instructions on a web page.
Problem
The contentEditable attribute is woefully immature for editing ordered lists (e.g., <ol contentEditable="true">...</ol>). I discovered four bugs in Firefox 25.0.1 within seconds of editing; Chromium was acceptable; IE8+ will likely border on nightmarish.
A number of inline editors exist, and I've gone through almost all of them. Even the lightest-weight editors are far too heavy, or have too many bugs, for accomplishing such a seemingly simple task.
Question
What approach would you take to developing a browser-based WYSIWYG inline editor for enumerated lists? Some of my ideas have included:
Take the most robust inline editor and trim back all needless functionality.
Build up an inline editor that meets my needs.
Both approaches will be time-consuming.
What other approaches are worth considering?
Explanation / Answer
This is the leanest inline example list editor example I could produce. The list item has a span with the value. The reason for the span is that the value needs to be hidden while the input is used for editing. Hope this helps. Mike.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>InlineListEditor</title>
<style>
.editing {
display: none;
}
</style>
</head>
<body>
<ul class="editable-list">
<li class="item"><span class="value">one</span></li>
<li class="item"><span class="value">two</span></li>
</ul>
<script>
console.log('loading');
function editView (value,callBack) {
var div = document.createElement('div'),
input = document.createElement('input'),
value = value;
input.addEventListener('keydown', function (event) {
if (event.keyCode === 13) {
value = this.value;
this.parentElement.removeChild(this);
callBack.call(null,[value]);
}
});
input.setAttribute('type',"text");
input.value = value;
div.appendChild(input);
return div;
}
function dblClick (event) {
var element = event.srcElement.parentElement,
value,
edit;
if (element.tagName === "LI") {
value = element.getElementsByClassName('value')[0];
value.classList.toggle('editing');
edit = editView(value.innerHTML,function (text) {
value.innerHTML = text;
value.classList.toggle('editing');
});
element.appendChild(edit);
}
console.dir(event.srcElement);
}
var el = document.getElementsByClassName('editable-list')[0];
el.addEventListener('dblclick',dblClick,false);
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.