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?
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>
2
If you only need simple editing I would recommend implementing your own using a client side MVC framework. check out http://todomvc.com/ for some simple examples of editable lists. You can then extend on your favorite to add advanced features and use one of those plugins if needed.
You can get the code for a basic list editing and be set up for a snappy and scalable web app.
The core library for CodeMirror uses a <textarea> with JavaScript and CSS to provide rich text editing functionality. The disadvantage is that the code is 135kb, minified.
Still, the most functional cross-browser approach is likely to use a <textarea> and change the style as required:
textarea {
font-family: Verdana, Tahoma, "DejaVu Sans", Arial, Helvetica, sans-serif;
}