Is there really no pre defined tool button for switching between html source and wysiwyg editor?
I need an option, where the user can switch to the html source of his content in the editor to do thing which the editor does not directly support by using simple click actions. I only found a "view html source" in the statusbar, which is read only and does not cover my requirements.
var defaultRTE = new ej.richtexteditor.RichTextEditor({
toolbarSettings: {
items: ['SourceCode']
}
});
defaultRTE.appendTo("#defaultRTE");
|
var defaultRTE = new ej.richtexteditor.RichTextEditor({
toolbarSettings: {
items: ['SourceCode']
},
created: onCreate
});
defaultRTE.appendTo("#defaultRTE");
function onCreate() {
defaultRTE.showSourceCode();
}
|
$("#mailBody").ejRTE({
toolbarSettings: {
items: ['SourceCode']
},
toolsList:["formatStyle", "font", "style", "scripts", "alignment", "lists", "indenting", "copyPaste", "doAction", "clear", "links", "images", "tables", "casing","SourceCode","customTools"],
width:"100%",
minWidth:"100px",
tools: {
font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
style: ["bold", "italic", "underline", "strikethrough"],
alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
lists: ["unorderedList", "orderedList"],
copyPaste: ["cut", "copy", "paste"],
doAction: ["undo", "redo"],
clear: ["clearFormat", "clearAll"],
links: ["createLink"],
images: ["image", "video"],
tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
scripts: ["superscript", "subscript"],
casing: ["upperCase", "lowerCase"],
paragraph: ["paragraph"],
customTools: [{
name: "mailPrev",
tooltip: "Testmail",
css: "sendMailPrev",
text: "",
action: function () {
sendTestMail();
}
},{
name: "placeHolders",
tooltip: "Insert Variable",
css: "insertVariables",
dropdownlist: ["a","b"],
text: "Variables",
action: function () {
rteObj.executeCommand("inserthtml", 'Teeeest'); //insert the content
}
},{
name: "InsertImage",
tooltip: "InsertImage ",
css: "InsertImage"
} ],
},
isResponsive:true,
externalCSS:"css/mail.css",
items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo'],
fixedTarget: [
{ text: "Segoe UI", value: "Segoe UI"},
{ text: "Arial", value: "Arial,Helvetica,sans-serif"},
{ text: "Courier New", value: "Courier New,Courier,monospace"},
{ text: "Georgia", value: "Georgia,serif"},
{ text: "Impact", value: "Impact,Charcoal,sans-serif"},
{ text: "Lucida Console", value: "Lucida Console,Monaco,monospace"},
{ text: "Tahoma", value: "Tahoma,Geneva,sans-serif"},
{ text: "Times New Roman", value: "Times New Roman"},
{ text: "Trebuchet MS", value: "Trebuchet MS,Helvetica,sans-serif"},
{ text: "Verdana", value: "Verdana,Geneva,sans-serif"}]
});
rteObj = $("#mailBody").data("ejRTE");
Im also complete unsure about the meaning/difference of toolsList and items... it looks a bit like duplicate definitions for the same thing, but i was unable to find a helpful documentation.
<script type="text/javascript">
$(function () {
$("#mailBody").ejRTE({
showHtmlSource: true,
showFooter:true,
toolsList:["formatStyle", "font", "style", "scripts", "alignment", "lists", "indenting", "copyPaste", "doAction", "clear", "links", "images", "tables", "casing","SourceCode","customTools"],
width:"100%",
minWidth:"100px",
tools: {
font: ["fontName", "fontSize", "fontColor", "backgroundColor"],
. . . . . . . .
});
</script> |
showHtmlSource: true,
showFooter:true,
Due tu the upload:
I know this example, but this also offers browsing uploaded images and browse remote folders, which i don't want to support. I only need the upload here.