diff --git a/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..915b56293e5ebec99641ea44854bbdde1faee595
--- /dev/null
+++ b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js
@@ -0,0 +1,41 @@
+import * as React from "react";
+import PropTypes from 'prop-types';
+import  TinyMCE  from '../TinyMCE';
+import  "./index.scss";
+
+const PageDownWidget = props => {
+  let tmp = document.createElement("DIV");
+  tmp.innerHTML = props.value;
+  return <div >
+        <TinyMCE 
+        label={props.label}
+        name={props.name}
+        onChange={props.onChange}
+        value={props.value}
+        id={props.id}
+        init={props.init}
+        required={props.required}
+        helperProps={props.helperProps}
+        />
+   
+        { tmp.textContent.length !== 0 &&
+    <div className="preview" dangerouslySetInnerHTML={{__html: props.value}}>
+      
+    </div>}
+  </div>
+
+}
+PageDownWidget.propTypes = {
+  id: PropTypes.string,
+  init: PropTypes.object,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.node,
+  helperProps: PropTypes.object,
+  name: PropTypes.string,
+  
+}
+
+PageDownWidget.displayName = 'PageDownWidget';
+export default PageDownWidget;
diff --git a/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8e3bf6cbdb206e5972abfd9e119d96cedf9af223
--- /dev/null
+++ b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss
@@ -0,0 +1,5 @@
+.preview{
+    width : '100%';
+    background-color : #e7f2f6;
+    padding-left: 3px;
+}
\ No newline at end of file
diff --git a/hypha/static_src/src/app/src/common/components/TinyMCE/index.js b/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
index 8456d29a39a304c292cb080cfeebe5caafaf847c..b92a65b6dc3b9a447563da6fdc64e9f9fdaea735 100644
--- a/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
+++ b/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
@@ -18,8 +18,8 @@ const TinyMCE = props => {
         ...(props.init),
         menubar: false
       }}
-      onChange={e => props.onChange(props.name, e.level.content)}
       id={props.name}
+      onEditorChange = {content => props.onChange(props.name, content)}
     />
   </div>
 }
diff --git a/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js b/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
index 4443421acaaeb6af0fcfbc15f0a1a99e15c42b9a..7bb7cd1520fe4991f628a0e14c5b5e0896f0d827 100644
--- a/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
+++ b/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
@@ -8,6 +8,7 @@ import ScoredAnswerWidget from "@common/components/ScoredAnswerWidget";
 import LoadHTML from "@common/components/LoadHTML";
 import Textarea from "@common/components/Textarea";
 import CheckBox from "@common/components/CheckBox";
+import PageDownWidget from "@common/components/PageDownWidget";
 import PropTypes from 'prop-types';
 
 
@@ -139,6 +140,18 @@ class FormField extends React.Component {
           return <LoadHTML 
             text={kwargs.text}
           />;
+
+        case "PagedownWidget":
+          return <PageDownWidget 
+              label={kwargs.label}
+              name={fieldProps.name}
+              onChange={this.onChange}
+              value={value}
+              id={fieldProps.name}
+              init={widget.mce_attrs}
+              required={kwargs.required}
+              helperProps={this.getHelperprops()}
+          />
       
         default:
           return <div>Unknown field type {this.getType()}</div>