diff --git a/examples/src/App.js b/examples/src/App.js
index c5d5597..d38b1df 100644
--- a/examples/src/App.js
+++ b/examples/src/App.js
@@ -9,10 +9,12 @@
 import React, {Component} from 'react';
 import {Example} from './example';
 import {Welcome} from './welcome';
+import {Preview} from './preview';
 
 const Routes = {
     index: Welcome,
     rich: Example,
+    preview: Preview,
 };
 
 type Props = {};
diff --git a/examples/src/example.js b/examples/src/example.js
index 9ab22a4..2f21f4a 100644
--- a/examples/src/example.js
+++ b/examples/src/example.js
@@ -22,7 +22,7 @@ import {
 } from 'react-native';
 import {getBottomSpace} from 'react-native-iphone-x-helper';
 import KeyboardSpacer from './helper/KeyboardSpacer';
-import {actions, defaultActions, RichEditor, RichToolbar} from 'react-native-pell-rich-editor';
+import {actions, RichEditor, RichToolbar, getContentCSS} from 'react-native-pell-rich-editor';
 import {InsertLinkModal} from './insertLink';
 import {EmojiView} from './emoji';
 
@@ -57,6 +57,7 @@ class Example extends React.Component {
         const that = this;
         const theme = props.theme || Appearance.getColorScheme();
         const contentStyle = that.createContentStyle(theme);
+        that.richHTML = '';
         that.state = {theme: theme, contentStyle, emojiVisible: false, disabled: false};
         that.editorFocus = false;
         that.onHome = ::that.onHome;
@@ -114,7 +115,7 @@ class Example extends React.Component {
         // Get the data here and call the interface to save the data
         let html = await this.richText.current?.getContentHtml();
         // console.log(html);
-        alert(html);
+        this.props.navigation.push('preview', {html, css: getContentCSS()});
     }
 
     /**
@@ -122,7 +123,7 @@ class Example extends React.Component {
      * @param {string} html
      */
     handleChange(html) {
-        // console.log('editor data:', html);
+        this.richHTML = html;
     }
 
     /**
@@ -278,7 +279,7 @@ class Example extends React.Component {
                 />
                 <View style={styles.nav}>
                     <Button title={'HOME'} onPress={that.onHome} />
-                    <Button title="Save" onPress={that.save} />
+                    <Button title="Preview" onPress={that.save} />
                 </View>
                 <ScrollView style={[styles.scroll, themeBg]} keyboardDismissMode={'none'}>
                     <View>
diff --git a/examples/src/preview.js b/examples/src/preview.js
new file mode 100644
index 0000000..556bdaa
--- /dev/null
+++ b/examples/src/preview.js
@@ -0,0 +1,50 @@
+// @flow
+import React from 'react';
+import {Button, StyleSheet, View, SafeAreaView} from 'react-native';
+import {WebView} from 'react-native-webview';
+
+type Props = {};
+type State = {};
+
+export class Preview extends React.Component<Props, State> {
+    onHome = () => {
+        this.props.navigation.push('rich');
+    };
+
+    render() {
+        const that = this;
+        let {html, css} = that.props;
+        html = `<html><head><meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">${css}</head><body>${html}</body></html>`;
+        return (
+            <SafeAreaView style={styles.container}>
+                <View style={styles.nav}>
+                    <Button title={'EDITOR'} onPress={that.onHome} />
+                </View>
+                <WebView
+                    useWebKit={true}
+                    scrollEnabled={false}
+                    hideKeyboardAccessoryView={true}
+                    keyboardDisplayRequiresUserAction={false}
+                    originWhitelist={['*']}
+                    dataDetectorTypes={'none'}
+                    domStorageEnabled={false}
+                    bounces={false}
+                    javaScriptEnabled={true}
+                    source={{html}}
+                />
+            </SafeAreaView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5FCFF',
+    },
+    nav: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginHorizontal: 5,
+    },
+});
diff --git a/readme/editor.jpg b/readme/editor.jpg
index 83fb2d1..258423f 100644
Binary files a/readme/editor.jpg and b/readme/editor.jpg differ
diff --git a/src/editor.js b/src/editor.js
index 9399188..15ceaa0 100644
--- a/src/editor.js
+++ b/src/editor.js
@@ -1,3 +1,18 @@
+function getContentCSS() {
+    return `
+    <style>
+        video {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
+        img {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
+        table {width: 100% !important;}
+        table td {width: inherit;}
+        table span { font-size: 12px !important; }
+        .x-todo li {list-style:none;}
+        .x-todo-box {position: relative; left: -24px;}
+        .x-todo-box input{position: absolute;}
+    </style>
+    `;
+}
+
 function createHTML(options = {}) {
     const {
         backgroundColor = '#FFF',
@@ -21,25 +36,18 @@ function createHTML(options = {}) {
 <head>
     <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
     <style>
-        * {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;}
+        * {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;box-sizing: border-box;}
         html, body { margin: 0; padding: 0;font-family: Arial, Helvetica, sans-serif; font-size:1em;}
         body { overflow-y: hidden; -webkit-overflow-scrolling: touch;height: 100%;background-color: ${backgroundColor};}
-        img {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
-        video {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
         .content {font-family: Arial, Helvetica, sans-serif;color: ${color}; width: 100%;height: 100%;-webkit-overflow-scrolling: touch;padding-left: 0;padding-right: 0;}
         .pell { height: 100%;} .pell-content { outline: 0; overflow-y: auto;padding: 10px;height: 100%;${contentCSSText}}
-        table {width: 100% !important;}
-        table td {width: inherit;}
-        table span { font-size: 12px !important; }
-        .x-todo li {list-style:none;}
-        .x-todo-box {position: relative; left: -24px;}
-        .x-todo-box input{position: absolute;}
-        ${cssText}
     </style>
     <style>
         [placeholder]:empty:before { content: attr(placeholder); color: ${placeholderColor};}
         [placeholder]:empty:focus:before { content: attr(placeholder);color: ${placeholderColor};}
     </style>
+    ${getContentCSS()}
+    <style>${cssText}</style>
 </head>
 <body>
 <div class="content"><div id="editor" class="pell"></div></div>
@@ -131,7 +139,7 @@ function createHTML(options = {}) {
 
         function execCheckboxList (node, html){
             var html = createCheckbox(node ? node.innerHTML: '');
-            var HTML = "<ul class='x-todo'><li>"+ html +"</div></div>"
+            var HTML = "<ol class='x-todo'><li>"+ html +"</li></ol>"
             var foNode;
             if (node){
                 node.innerHTML = HTML;
@@ -148,7 +156,7 @@ function createHTML(options = {}) {
         var _checkboxFlag = 0; // 1 = add checkbox; 2 = cancel checkbox
         function cancelCheckboxList(box){
             _checkboxFlag = 2;
-            exec("insertUnorderedList");
+            exec("insertOrderedList");
             setCollapse(box);
         }
 
@@ -240,13 +248,11 @@ function createHTML(options = {}) {
             quote: { result: function() { return exec(formatBlock, '<blockquote>'); }},
             removeFormat: { result: function() { return exec('removeFormat'); }},
             orderedList: {
-                state: function() { return queryCommandState('insertOrderedList'); },
+                state: function() { return !checkboxNode(window.getSelection().anchorNode) && queryCommandState('insertOrderedList'); },
                 result: function() { if (!!checkboxNode(window.getSelection().anchorNode)) return;return exec('insertOrderedList'); }
             },
             unorderedList: {
-                state: function() {
-                    return !checkboxNode(window.getSelection().anchorNode) && queryCommandState('insertUnorderedList');
-                },
+                state: function() { return queryCommandState('insertUnorderedList');},
                 result: function() { if (!!checkboxNode(window.getSelection().anchorNode)) return; return exec('insertUnorderedList');}
             },
             code: { result: function() { return exec(formatBlock, '<pre>'); }},
@@ -310,7 +316,7 @@ function createHTML(options = {}) {
                     if (!!box){
                         cancelCheckboxList(box.parentNode);
                     } else {
-                        !queryCommandState('insertUnorderedList') && execCheckboxList(pNode);
+                        !queryCommandState('insertOrderedList') && execCheckboxList(pNode);
                     }
                 }
             },
@@ -433,7 +439,7 @@ function createHTML(options = {}) {
                         formatParagraph(true);
                     } else  if (anchorNode.innerHTML === '<br>' && anchorNode.parentNode !== editor.content){
                         // setCollapse(editor.content);
-                    } else if (queryCommandState('insertUnorderedList') && !!(box = checkboxNode(anchorNode))){
+                    } else if (queryCommandState('insertOrderedList') && !!(box = checkboxNode(anchorNode))){
                         var node = anchorNode && anchorNode.childNodes[1];
                         if (node && node.nodeName === 'BR'){
                             cancelCheckboxList(box.parentNode);
@@ -504,7 +510,8 @@ function createHTML(options = {}) {
             onChange: function (){
                 clearTimeout(_handleCTime);
                 _handleCTime = setTimeout(function(){
-                    postAction({type: 'CONTENT_CHANGE', data: Actions.content.getHtml()});
+                    var html = Actions.content.getHtml();
+                    postAction({type: 'CONTENT_CHANGE', data: html});
                 }, 50);
             }
         })
@@ -529,4 +536,4 @@ function createHTML(options = {}) {
 }
 
 const HTML = createHTML();
-export {HTML, createHTML};
+export {HTML, createHTML, getContentCSS};
diff --git a/src/index.js b/src/index.js
index 6f58e9e..b217739 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import RichEditor from './RichEditor';
 import RichToolbar, {defaultActions} from './RichToolbar';
 import {actions} from './const';
-import {createHTML} from './editor';
+import {createHTML, getContentCSS} from './editor';
 
-export {RichEditor, RichToolbar, actions, defaultActions, createHTML};
+export {RichEditor, RichToolbar, actions, defaultActions, createHTML, getContentCSS};
