Documentation

Note: DocEditable is in a very early stage of development. Right now there may be some things that don't work, and the API may be changing. Please contribute if you'd like to help out! Send me an email at brian@foliotek.com or open an issue over on github if you'd like to help!

We have an approximate roadmap on the wiki if you'd like to contribute to the big picture idea.

The Markup

This is the bare minimum you need to get started. See an example of this online

<head>
  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/codemirror.css" rel="stylesheet">
  <link href="../css/doceditable.css" rel="stylesheet">
</head>
<body>
  <textarea id="doc">Lorem Ipsum</textarea>

  <script src="../js/jquery-1.9.1.js"></script>
  <script src="../js/codemirror.js"></script>
  <script src="../js/doceditable.js"></script>
</body>

  <script>
  var docEditable = DocEditable.fromTextArea(document.getElementById("doc") /*, options */ );
  </script>

Initialization

You can create DocEditable with a container element (just as in CodeMirror).

var docEditable1 = DocEditable(document.getElementById("container"), options);

Or you can use a helper fromTextArea function, which is a nice shortcut that will copy the changed values back into the textarea as changes happen.

var docEditable2 = DocEditable.fromTextArea(document.getElementById("doc"), options);

If you want to use custom CodeMirror options you can create the CodeMirror first then pass it in to the constructor:

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});
var docEditable3 = DocEditable(myCodeMirror, options);

Options

format (string)

The format to load the value within the editor as. Possible values are html and markdown This will process the value through DocEditable.importers[format]. Read more about importers.

var markdownEditable = DocEditable.fromTextArea(document.getElementById("doc"), {
  format: 'markdown'
});

Methods

loadJSON()

setValue()

getValue()

toMarkdown()

toHTML()

removeFormatting()

bold()

annotate()

italic()

underline()

strikethrough()

img()

linesAreList()

list()

formatBlock()

unformatBlock()

isRangeMarked()

addUndoState()

formatText()

getActiveMarks()

getActiveBlock()

on()

off()

Customization

DocEdtiable.importers

Specificy a custom formatter