- |
- |
- |
- |
- |
All configs are optional unless otherwise stated.
// Per instance of SnapEditor
{
path: "/snapeditor",
toolbar: {
items: [
"styleBlock", "|",
"p", "h1", "h2", "h2", "h3", "h5", "h6", "|",
"bold", "italic", "underline", "subscript", "superscript", "strikethrough", "|",
"alignment", "|",
"alignLeft", "alignCentre", "alignRight", "alignJustify", "|",
"orderedList", "unorderedList", "indent", "outdent", "|",
"link", "table", "image", "horizontalRule", "|",
"print"
],
},
styles: ["h1.title", "h2.subtitle", "tr", "tr.alternate"],
width: 600,
height: 400,
image: {
insertByURL: true,
insertByUpload: false,
uploadURL: "/images",
uploadParams: { param1: "abc123" }
},
snap: true,
contentClass: "my-class",
stylesheets: ["public/my-colors.css", "public/my-typography.css"],
onSave: function (e) {
var isSuccess = true;
var html = e.html;
// Actually perform the save and update isSuccess.
return isSuccess || "Error";
},
onUnsavedChanges: function (e) {
if(confirm("Save changes?")) {
e.api.execAction("save");
} else {
e.api.execAction("discard");
}
}
}
// Global config
SnapEditor.zIndexBase = 100;SnapEditor will auto-detect the correct path to the snapeditor/ directory.
If you are having issues and SnapEditor cannot determine the correct path, you can use the path
config. The path config specifies the URL to the snapeditor/ directory.
path: "/snapeditor"The toolbar config specifies an object that contains an item key. The value of the
item key is an array of buttons that should appear in the toolbar.
toolbar: {
items: ["h1", "h2", "h3"]
}The following buttons are available. Note that the buttons are case sensitive.
"styleBlock", "p", "h1", "h2", "h2", "h3", "h5", "h6",
"bold", "italic", "underline", "subscript", "superscript", "strikethrough",
"alignment", "alignLeft", "alignCentre", "alignRight", "alignJustify",
"orderedList", "unorderedList", "indent", "outdent",
"link", "table", "image", "horizontalRule",
"print",
"|"The pipe character "|" is used to signify a separator between buttons.
The default toolbar is itself a button and is declared like the following.
SnapEditor.buttons.toolbar = {
items: [
"styleBlock", "|",
"bold", "italic", "|",
"orderedList", "unorderedList", "indent", "outdent", "|",
"link", "table", "image"
]
};This means that you can create custom toolbars in the same manner. We suggest using a namespace to avoid conflicts with existing buttons.
SnapEditor.buttons.myBlogToolbar = {
items: [
"h3", "h4", "h5", "h6", "|",
"bold", "italic"
]
}For more information on buttons, refer to the Plugins doc. However, it is not necessary to know about Plugins for basic usage.
To use the toolbars, there are two ways. Either set the global config or add it to the per instance config. The per instance config overrides the default.
// Global config.
// Default.
SnapEditor.config.toolbar = "toolbar";
// Custom.
SnapEditor.config.toolbar = "myBlogToolbar";
// Per instance config.
var editor = new SnapEditor.InPlace("editor", {
toolbar: "myBlogToolbar"
});Because the default toolbar is just an object, you can modify SnapEditor.buttons.toolbar.items.
// Adding buttons to the global default.
SnapEditor.buttons.toolbar.items = SnapEditor.buttons.toolbar.items.concat([
"|", "alignLeft", "alignCentre", "alignRight"
]);
// Changing the global default.
SnapEditor.buttons.toolbar.items = ["h2", "h3", "|", "bold", "italic"];One last way to specify the toolbar is to skip the whole buttons declaration step and simply declare it in the per instance config directly.
// Adding buttons to an existing toolbar.
var editor = new SnapEditor.InPlace("editor", {
toolbar: {
items: SnapEditor.buttons.toolbar.items.concat(["styleBlock", "|", "b", "i"])
}
});
// New set of buttons.
var editor = new SnapEditor.InPlace("editor", {
toolbar: {
items: ["styleBlock", "|", "b", "i"]
}
});The styles config specifies the set of available custom styles. For more information, check out the
Custom
Styles docs.
styles: ["h1.title", "h2.subtitle", "tr", "tr.alternate"]This is only available in the Form SnapEditor.
The width config specifies the width and overrides the width specified on the textarea. The width
can either be a number or a string. When a number is specified, the measurements are in pixels. For all others,
use a string.
Note that this is the only way to specify relative widths. A relative width on the textarea will not work.
width: 600This is only available in the Form SnapEditor.
The height config specifies the height and overrides the height specified on the textarea. The
height can either be a number or a string. When a number is specified, the measurements are in pixels. For all
others, use a string. Note that relative heights are not allowed.
height: 400The image config specifies the config for the image feature.
image: {
insertByURL: true,
insertByUpload: false,
uploadURL: "/images",
uploadParams: { param1: "abc123" }
}The insertByURL config specifies whether inserting an image using a URL is enabled. It is set to
true by default.
The insertByUpload config specifies whether inserting an image through an upload is enabled. It is
set to false by default.
The uploadURL config specifies where the images should be uploaded to. This is mandatory if
insertByUpload is true.
The uploadParams config specifies any extra parameters to be sent to the uploadURL.
This is optional.
For more details about uploading, refer to the Image Upload docs.
The snap config specifies whether to include the snap effect when editing. The default is
true.
snap: trueThis is only available in the Form SnapEditor.
The contentClass config specifies the class to be added to the editable area inside the Form
SnapEditor.
contentClass: "my-class"This is useful if your content is displayed with a wrapper element with a class. The same class can be applied inside the Form SnapEditor.
This is only available in the Form SnapEditor.
The stylesheets config specifies the stylesheets to load inside the Form SnapEditor.
stylesheets: ["public/my-colors.css", "public/my-typography.css"]This is only available in the In-Place SnapEditor.
The onSave config specifies a function that will perform the save.
The function receives a single argument which is an event object.
{
api: <SnapEditor API object>,
html: <HTML string of the current content in SnapEditor>
}After performing the save, the function must return true or an error string to be displayed.
onSave: function (e) {
var isSuccess = true;
var html = e.html;
// Actually perform the save and update isSuccess.
return isSuccess || "Error";
}Adding the onSave config automatically appends the Save and Discard buttons to the toolbar. It also
adds a prompt to save any unsaved edits when leaving SnapEditor or the page.
The onUnsavedChanges config specifies a function that will be called when leaving the editor and
there are unsaved changes. This function is used to override the default behaviour of the Save/Discard/Cancel
dialog.
The function receives a single argument which is an event object.
{
api: <SnapEditor API object>
}You can use this function to popup your own dialog, to immediately save the content, to immediately discard the content, or anything else you can think of.
The following example illustrates a JavaScript confirmation to save or discard.
onUnsavedChanges: function (e) {
if(confirm("Save changes?")) {
e.api.execAction("save");
} else {
e.api.execAction("discard");
}
}This is used to set the base z-index that SnapEditor will use whenever it needs to set a z-index.
Set this before instantiating any SnapEditors.
SnapEditor.zIndexBase = 200;
var editor = new SnapEditor.InPlace("editor");