2.0.0 - Documentation

Sourcing

Place the snapeditor/ directory somewhere publicly accessible by your application. For example, in a public/ directory.

Assuming Snapeditor code can be reached at /snapeditor/snapeditor.js you must source it before using SnapEditor.

<script type="text/javascript" src="/snapeditor/snapeditor.js"></script>

Initialization

To initialize SnapEditor, create a new SnapEditor.InPlace or SnapEditor.Form object. Note that the object is available, but SnapEditor doesn't initialize until the document is ready.

new SnapEditor.InPlace(<id or DOM element>, <config>)
                    new SnapEditor.Form(<id or DOM element>, <config>)

For more details on the possible options, refer to the Config docs.

In-Place SnapEditor

Wrap the content you wish to make editable in a div with an id.

<div id="editor">
                      <p>This inner content is all editable including the p tags, but not the div tag.</p>
                    </div>

Add some JavaScript.

<script type="text/javascript">
                      var inPlaceEditor = new SnapEditor.InPlace("editor");
                    </script>

Full example.

<!DOCTYPE html>
                    <html>
                      <body>
                        <div id="editor">
                          <p>This is an in-place editor!</p>
                        </div>
                        <script type="text/javascript" src="/snapeditor/snapeditor.js"></script>
                        <script type="text/javascript">
                          // "editor" is the id of the div.
                          var inPlaceEditor = new SnapEditor.InPlace("editor");
                        </script>
                      </body>
                    </html>

Form SnapEditor

Add an id to the textarea you want to make editable. SnapEditor will automatically hide the textarea and insert itself. The textarea will be automatically updated whenever SnapEditor loses focus. You can continue submitting your form like normal without any modifications to the form.

The size of the editor is controlled by the width and height placed on the textarea. The width and height can also be specified in the config which will override the textarea dimensions. Also, relative widths can only be specified in the config. For more information, check out the Configuration docs.

<textarea id="editor" name="content" style="width: 600px; height: 400px;">
                      <p>This content will be editable</p>
                    </textarea>

Add some JavaScript.

<script type="text/javascript">
                      var formEditor = new SnapEditor.Form("editor");
                    </script>

Full example.

<!DOCTYPE html>
                    <html>
                      <body>
                        <form>
                          <textarea id="editor" name="content" style="width: 600px; height: 400px;">
                            <p>This content will be editable</p>
                          </textarea>
                          <input type="submit" value="Save" />
                        </form>
                        <script type="text/javascript" src="/snapeditor/snapeditor.js"></script>
                        <script type="text/javascript">
                          // "editor" is the id of the textarea.
                          var formEditor = new SnapEditor.Form("editor");
                        </script>
                      </body>
                    </html>