- |
- |
- |
- |
- |
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>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.
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>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>
