Added HTML Editor option

Jeremy Coleman · Jeremy Coleman · commit c873418439dc · 2017-03-07T17:52:53.000-08:00
diff --git a/README.md b/README.md
@@ -13,8 +13,7 @@ Built with SharePoint Framework GA, Office Fabric, and jQuery
 
 ## Screenshots
 ![](https://raw.githubusercontent.com/jcoleman-pcprofessional/True-Script-Editor/master/assets/full.png)
-![](https://raw.githubusercontent.com/jcoleman-pcprofessional/True-Script-Editor/master/assets/ss1.png)
-![](https://raw.githubusercontent.com/jcoleman-pcprofessional/True-Script-Editor/master/assets/settings.png)
+![](https://raw.githubusercontent.com/jcoleman-pcprofessional/True-Script-Editor/master/assets/True-Script-Editor.png)
 
 ## Applies to
 
@@ -31,7 +30,7 @@ true-script-editor|Jeremy Coleman (PC Professional, Inc.)
 
 Version|Date|Comments
 -------|----|--------
-
+1.0.1|March 7th, 2017|Added HTML Editor option
 1.0.0|March 7th, 2017|Initial release
 
 ## Disclaimer
@@ -57,5 +56,6 @@ Sample Web Parts in this solution illustrate the following concepts on top of th
 - Load (multiple, csv delimited) external JS files onto the page
 - Execute script blocks on the page
 - Added CSS style directly to the page
+- Add HTML to render within the web part DOM element
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-true-script-editor)
diff --git a/assets/True-Script-Editor.png b/assets/True-Script-Editor.png
diff --git a/config/package-solution.json b/config/package-solution.json
@@ -2,7 +2,7 @@
   "solution": {
     "name": "True Script Editor",
     "id": "ee1c0134-8052-4280-8448-287dd071fd0c",
-    "version": "1.0.0.0"
+    "version": "1.0.0.1"
   },
   "paths": {
     "zippedPackage": "solution/true-script-editor.sppkg"
diff --git a/src/webparts/trueScriptEditor/ITrueScriptEditorWebPartProps.ts b/src/webparts/trueScriptEditor/ITrueScriptEditorWebPartProps.ts
@@ -4,4 +4,5 @@ export interface ITrueScriptEditorWebPartProps {
   extJS:string;
   scriptEditor:string;
   cssEditor:string;
+  htmlEditor: string;
 }
diff --git a/src/webparts/trueScriptEditor/TrueScriptEditorWebPart.ts b/src/webparts/trueScriptEditor/TrueScriptEditorWebPart.ts
@@ -19,8 +19,8 @@ export default class TrueScriptEditorWebPart extends BaseClientSideWebPart<ITrue
     var loaded = [];
     jQuery('head').append('<style truescript></style>');
     jQuery('link[truescript]').each(function(){ jQuery(this).remove(); });
-
-    if (this.properties.cssEditor || this.properties.extCSS || this.properties.extJS || this.properties.scriptEditor) {
+    jQuery(this.domElement).empty();
+    if (this.properties.cssEditor || this.properties.extCSS || this.properties.extJS || this.properties.scriptEditor || this.properties.htmlEditor) {
       if (this.properties.scriptEditor){
         window['jQuery'] = jQuery;
         eval(this.properties.scriptEditor);
@@ -44,6 +44,9 @@ export default class TrueScriptEditorWebPart extends BaseClientSideWebPart<ITrue
           jQuery('head').append('<link truescript rel="stylesheet" href="' + css + '" type="text/css" />');
         });
       }
+      if (this.properties.htmlEditor){
+        jQuery(this.domElement).html(this.properties.htmlEditor);
+      }      
     } else {
     this.domElement.innerHTML = `
       <div class="${styles.helloWorld}">
@@ -105,6 +108,11 @@ export default class TrueScriptEditorWebPart extends BaseClientSideWebPart<ITrue
                   label: 'CSS Editor',
                   multiline: true,
                   placeholder: 'CSS in this field will be added to the page, **Do not include <style> tags.'
+                }),
+                PropertyPaneTextField('htmlEditor',{
+                  label: 'HTML Editor',
+                  multiline: true,
+                  placeholder: 'HTML in this field will be added to the page, **Do not include <html>,<body> nor <footer> tags.'
                 })
               ]
             }

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,5 @@ export interface ITrueScriptEditorWebPartProps {`
`4`	`4`	`extJS:string;`
`5`	`5`	`scriptEditor:string;`
`6`	`6`	`cssEditor:string;`
	`7`	`+ htmlEditor: string;`
`7`	`8`	`}`