We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toolbar button for switching to the html source of the editor

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.


9 Replies

PM Pandiyaraj Muniyandi Syncfusion Team August 23, 2019 09:49 AM UTC

Hi Jerry, 
 
Greetings from Syncfusion support. 
 
We have toolbar item called “SourceCode” for switch between editor and HTML source code view in RichTextEditor. You can configure this item in items property of toolbarSettings API as mentioned below 
 
Sample code 
 
 
var defaultRTE = new ej.richtexteditor.RichTextEditor({ 
  toolbarSettings: { 
    items: ['SourceCode'] 
  } 
}); 
defaultRTE.appendTo("#defaultRTE"); 
 
 
 
 
 
If you want to enable source code view at initial rendering, call showSourceCode() method on RichTextEditor control created event call back function like below 
 
Sample code 
 
 
var defaultRTE = new ej.richtexteditor.RichTextEditor({ 
    toolbarSettings: { 
        items: ['SourceCode'] 
    }, 
    created: onCreate 
}); 
defaultRTE.appendTo("#defaultRTE"); 
 
function onCreate() { 
    defaultRTE.showSourceCode(); 
} 
 
 
 
 
 
Also find the below reference links 
 
 
 
 
 
 
Regards, 
Pandiyaraj M 
 



JA Jerry Amadon August 23, 2019 12:48 PM UTC

Im not sure what im doing wrong. Your example is not working for me, but the following code is doing the job, except of the SourceCode:

$("#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. 


AB Ashokkumar Balasubramanian Syncfusion Team August 26, 2019 10:40 AM UTC

Hi Jerry,  
 
Good day to you. 
 
Based on the shared code, it seems you are using some EJ2 RTE properties in EJ1 RTE which will not work. To view HTML source of EJ1 RTE, we suggest you set “showHtmlSource” to true along with “showFooter” set to true since Html source tool will be displayed in footer of EJ1 RTE. Please refer to the following code and sample 
 
<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> 
 
 
 
You can edit the HTML inside View source dialog and update this into RTE through update button. Please refer to the below given UG for more details on this.  
 
 
Regards, 
Ashokkumar B. 



JA Jerry Amadon August 26, 2019 01:10 PM UTC

Thanks for the answer, but i just played with:
showHtmlSource: true, 
showFooter:true,

It adds the html button to the status bar, but the pop up is read only.

You mentioned i use v1 and there is a v2. Where can i find or rather instantiate the v2 control?

I also noticed, the "ei.web.all.min.js" is insanely large (13.9MB)


AB Ashokkumar Balasubramanian Syncfusion Team August 27, 2019 10:45 AM UTC

Hi Jerry,  
 
Query: It adds the html button to the status bar, but the pop up is read only.  
 
Source code button will be available at the left corner of the footer and the popup will be opened with the content which is editable and has update button to update the edited content into RTE. Please refer to the below given images.  
 
View Source code tool: 
 
 
 
View Source code popup:  
 
Note that, the cursor is available inside popup for editing the HTML content and clicking update button will update the content.  
 
 
 
You can also check this behavior in the below All tools demo sample of EJ1 RTE.  
 
 
Query: You mentioned I use v1 and there is a v2. Where can I find or rather instantiate the v2 control? 
 
You can refer to the below given document and demo links for getting started with EJ2 pure JavaScript RTE.  
 
 
 
Query: I also noticed, the "ei.web.all.min.js" is insanely large (13.9MB) 
 
The “ej.web.all.min.js” is a combined script which contains required scripts for all EJ1 components. If you wish to download scripts for specific controls alone, you can go with CSG option for downloading scripts files for required controls. Please refer to the below UG document for more details on CSG 
 
 
Please let us know whether you wish to proceed with EJ1 or EJ2.  
 
Regards, 
Ashokkumar B. 



JA Jerry Amadon August 30, 2019 12:59 PM UTC

This function does not work. It opens a popup: "View HTML" which is read only. It also shows the surrounding html, which im also not interrested in. The editor only contains body code, normally not a full html page.

Is there also a simplified Image upload? I only want something like "drop image here or click to open" area and no file browser, because we simply do not offer management of uploaded images. It is somewhat "upload and forget" , which means we include an img tag into the editor area after the upload has ben finished.


I think i will continue with EJ1 .. i had a short look on EJ2, but it caused too much problems so i will skip that.


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 2, 2019 01:00 PM UTC

Hi Jerry, 
  
We have looked into your reported query. As mentioned in our previous update, the ViewSource Button left-bottom corner will let you edit the content and it will not render as readonly. For your convenience, I have attached the same by editing a sentence in the editor. 
  
  
Please, check the already mentioned details for achieving requirement of editing the editor when allowEditing property is disabled. If the provided details, does not meet your expectation. Then, please provide us more details like 
* detailing the expected use-case with RTE 
* Screenshot or video sample. 
  
Yes, RTE has an option to upload images into the editor. Please, follow the following for achieving this requirement. 
  
  
  
By using this functionality, you can browse through file system to select and upload the images files into the editor. ejRTE has no in-built support uploading the images using drag and drop functionality. 
  
Please, check the provided solution, let us know if you need any further assistance. 
  
Regards, 
Shameer Ali Baig S. 
  



JA Jerry Amadon September 2, 2019 01:31 PM UTC

In my implementation, the popup is definitely rendered as read only. What could be the reason for this behavior?

When i click into the wysiwyg editor the statusbar will be enabled with the edit button (in my case view) ... but the text near by is somehow broken: " » body » p" (looks like an encoding issue here). The popup har an Update and a Cancel button, but is definitele read only. I can not edit is at all.

im using:
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.


AB Ashokkumar Balasubramanian Syncfusion Team September 3, 2019 11:19 AM UTC

Hi Jerry, 
 
A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
  
 
Regards, 
Ashokkumar B, 


Loader.
Live Chat Icon For mobile
Up arrow icon