- |
- |
- |
- |
- |
Roll over the text to edit. An outline shows up on the mouse over. Click to begin editing!
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>
