Approach to develop an inline editor for enumerated lists

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?

score 0 · Answer 1 · answered Nov 29 '13 at 02:28

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>

Your question as it reads now, did not mention "cross-browser" it only mentioned "browser based" solution. Any cross browser solution will be bloated and expensive. What is not expensive is telling the user what browsers you do support and making sure you write quality code for those browsers. — nappySoft, Nov 29 '13 at 03:17
I really want to ignore your reply but here is what the posted question is: 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? — nappySoft, Nov 29 '13 at 03:31

score 0 · Answer 2 · answered Dec 01 '13 at 08:49

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.

score 0 · Accepted Answer · answered Nov 03 '14 at 23:43

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;
}

Approach to develop an inline editor for enumerated lists

Background

Problem

Question

3 Answers3