SnapEditor

Full - Live Demos

Full Demo

Roll over the text to edit. An outline shows up on the mouse over. Click to begin editing!

Features

  • Clean HTML every time (even after pasting)
  • Snap effect when editing
  • Dotted outline on hover
  • Block styles
    • Paragraph
    • Heading 1
    • Heading 2
    • Heading 3
    • Heading 4
    • Heading 5
    • Heading 6
  • Inline styles
    • Bold
    • Italic
    • Underline
    • Subscript
    • Superscript
    • Strikethrough
  • Custom styles for blocks and tables
  • Alignment
    • Align left
    • Align centre
    • Align right
    • Align justify
  • Lists
    • Numbered list
    • Bulleted list
    • Indent
    • Outdent
  • Insert
    • Insert link
    • Insert table
    • Insert image URL
    • One-step image upload
      • The image is automatically resized to fit, uploaded to the server, and inserted into SnapEditor
    • Insert horizontal rule
  • Print
  • Save through AJAX
    • Warns the user when edits have not been saved
  • Keyboard shortcuts for most actions

Code:

<!DOCTYPE html>
                    <html>
                    <body>
                        <div id="full">
                        <p>This is editable.</p>
                        </div>

                        <script type="text/javascript" src="/snapeditor/snapeditor.js"></script>
                        <script type="text/javascript">
                        // Define custom style buttons.
                        SnapEditor.addStyleButtons({
                            "h2.title": {
                            text: "Title",
                            html: '<span class="snapeditor_style_block_title">Title</span>'
                            },
                            "h3.subtitle": {
                            text: "Subtitle",
                            html: '<span class="snapeditor_style_block_subtitle">Subtitle</span>'
                            },
                            "table": {
                            text: "Normal"
                            },
                            "table.outlined": {
                            text: "Outlined",
                            html: '<span class="snapeditor_style_table_outlined">Outlined</span>'
                            },
                            "tr": {
                            text: "Normal"
                            },
                            "tr.alternate": {
                            text: "Alternate",
                            html: '<span class="snapeditor_style_table_row_alternate">Alternate</span>'
                            },
                            "td": {
                            text: "Normal"
                            },
                            "th": {
                            text: "Header",
                            html: '<span class="snapeditor_style_table_header">Header</span>'
                            }
                        });

                        // Initialize a SnapEditor.InPlace instance.
                        var fullEditor = new SnapEditor.InPlace("full", {
                            toolbar: {
                            items: [
                                "styleBlock", "|",
                                "bold", "italic", "underline", "subscript", "superscript", "strikethrough", "|",
                                "alignment", "|",
                                "orderedList", "unorderedList", "indent", "outdent", "|",
                                "link", "table", "image", "horizontalRule", "|",
                                "print"
                            ]
                            },
                            styles: SnapEditor.config.styles.concat(
                            ["h2.title", "h3.subtitle", "table", "table.outlined", "tr", "tr.alternate", "td", "th"]
                            ),
                            image: {
                            insertByUpload: true,
                            uploadURL: "/snapimage_api",
                            uploadParams: {
                                directory: "full"
                            }
                            },
                            onSave: function (e) {
                            var isSuccess = true;
                            var html = e.html;
                            // Actually perform the save and update isSuccess.
                            return isSuccess || "Error";
                            }
                        });
                        </script>
                    </body>
                    </html>