content
type: String, default: '', not required
Initialize CommaJS with a document. You can retrieve CommaJS content using the onChange() event or the GetContent() function.
commajs
var options = {
readOnly: false,
defaultStyle: {
fontSize: "14px",
fontFamily: "Verdana",
fontColor: "#39434d"
},
defaultLineStyle: {
align: "left"
}
};
var commajs = new CommaJS('rich-text-editor', options);var toolbarOptions = {
buttons: "all",
fontFamilies: [
{
label: "Times New Roman",
value: "\"Times New Roman\", Times, serif"
},
{
label: "Palatino",
value: "\"Palatino Linotype\", \"Book Antiqua\", Palatino, serif"
}
]
};
var commajs = new CommaJS('rich-text-editor', options, toolbarOptions);options.defaultStyle = {
fontSize: "14px",
fontFamily: "Verdana",
fontColor: "#39434d"
}options.defaultLineStyle = {
align: "center"
}options.catchUserInput = {
characters: ["enter", "tab", "a", "test"], //list of chars that will trigger onCharacterEntered
onCharacterEntered: (chars) => {
return false; //return true to stop adding "chars" to the document
}
}options.shortcuts = [
{
shortcut: 'Ctrl+f',
action: 'function',
params: () => {
console.log("CTRL+F")
}
},
{
shortcut: 'Ctrl+t',
action: 'insertPlugin',
params: {
pluginName: CommaTable.GetName(),
pluginParams: {
cols: 5,
rows: 10
}
}
},
{
shortcut: 'Ctrl+e',
action: 'insertText',
params: {
text: "Hello CommaJS!"
}
},
...
]options.autocorrect = [
{
string: 'btw',
replaceWith: 'by the way'
},
...
]options.onChange = (content) => { }options.onStyleChanged = (newAppliedStyle) => { }options.styleMonitoring = (stylesAtCursorPosition) => { }options.onSelectionChange = (newSelection) => { }newSelection = {
idStartNode: "", //id of the commajs node where the selection starts
startNode: undefined, //domElement containing the start node
startOffset: 0, //where the selection starts
idEndNode: "", //id of the commajs node where the selection ends
endNode: undefined, //domElement containing the end node
endOffset: 0, //where the selection ends
selectionBoundingRectangle: {}//the DOMRect that bounds the contents of the selection
}options.onUploadFiles = (files) => {
//you will probably need to do something like:
/*
files.forEach(file => {
if(file.type!="directory") {
const formData = new FormData();
formData.append('myFile', file);
fetch('....../uploadFile', {
method: 'POST',
body: formData
})
.then(response => {
return response.json();
})
.then(data => {
let fileName = data.fileName;
....
if(GetFileType(fileName) == "image" ) {
commaEditor.InsertPluginAtSection(CommaJS.GetPluginImageName(), {link: "........../uploads/"+fileName});
} else if(GetFileType(fileExtension) == "video" ) {
commaEditor.InsertPluginAtSection(CommaJS.GetPluginVideoName(), {link: "........../uploads/"+fileName, mimeType: "video/"+fileExtension});
} else {
console.log("not supported");
}
})
.catch(error => {
console.error(error);
});
}
});
*/
}options.plugins = []
or
options.plugins = {}options.plugins = {
links: {
onClick: (url) => {
return true; //true = do not open url in a new window
}
},
images: {
SaveEditedImage: (dataUri, oldUrl) => {
//dataUri = data:image/png;base64,....
return new Promise((res,rej) => {
// You can decide to save the edited image to your server and return the url of the image
// or return directly the dataUri as in this case:
res(dataUri);
});
}
},
mentions: {
factory: {
charForFire: '@', //open mention factory when user types '@'
showAbove: true|false, //show serch result panel above
FormatEntry: (searchResult) => {
/*
//you can format the entry in any way you won't, for example:
let e = document.createElement("div");
e.textContent = searchResult.label;
return e;
*/
},
Search: (queryString) => {
return new Promise((res,rej) => {
res([searchResult,searchResult,....]);
});
}
},
mention: {
FormatMention: (entry, inlineNode) => {
//entry = the object returned by your search (searchResults)
//to format a mention just append commajs nodes to inlineNode
},
OnClick: (entry, commaNode) => { console.log("click", entry, commaNode)},
OnMouseOver: (entry, commaNode) => { console.log("OnMouseOver", entry, commaNode)},
OnMouseOut: (entry, commaNode) => { console.log("OnMouseOut", entry, commaNode)},
OnMentionDeleted: (entry, commaNode) => { console.log("OnMentionDeleted", entry, commaNode)}
}
}
}options.plugins = {
links: {
onClick: (url) => {
return true; //true = do not open url in a new window
}
},
images: {
SaveEditedImage: (dataUri, oldUrl) => {
//dataUri = data:image/png;base64,....
return new Promise((res,rej) => {
// You can decide to save the edited image to your server and return the url of the image
// or return directly the dataUri as in this case:
res(dataUri);
});
}
},
mentions: {
factory: {
charForFire: '@', //open mention factory when user types '@'
showAbove: true|false, //show serch result panel above
FormatEntry: (searchResult) => {
/*
//you can format the entry in any way you won't, for example:
let e = document.createElement("div");
e.textContent = searchResult.label;
return e;
*/
},
Search: (queryString) => {
return new Promise((res,rej) => {
res([searchResult,searchResult,....]);
});
}
},
mention: {
FormatMention: (entry, inlineNode) => {
//entry = the object returned by your search (searchResults)
//to format a mention just append commajs nodes to inlineNode
},
OnClick: (entry, commaNode) => { console.log("click", entry, commaNode)},
OnMouseOver: (entry, commaNode) => { console.log("OnMouseOver", entry, commaNode)},
OnMouseOut: (entry, commaNode) => { console.log("OnMouseOut", entry, commaNode)},
OnMentionDeleted: (entry, commaNode) => { console.log("OnMentionDeleted", entry, commaNode)}
}
}
}options.plugins = [
{ pClass: CommaLists },
{ pClass: CommaTable },
{ pClass: CommaHorizontalRule },
{
pClass: CommaLink,
options: {
onClick: (lnk) => {
console.log(lnk);
return false; //return true to stop default behaviour => by deafault the plugin calls: window.open(lnk, '_blank');
}
}
},
{ pClass: CommaTasks }
]