add preview

src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html

@@ -30,6 +30,18 @@
                             <textarea ng-model="model.rule.styles" required></textarea>
                         </umb-control-group>
 
+                        <umb-control-group label="@stylesheet_preview" description="@stylesheet_previewHelp">
+                            <div style="{{model.rule.styles}}">
+                                a b c d e f g h i j k l m n o p q r s t u v w x t z
+                                <br>
+                                A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+                                <br>
+                                1 2 3 4 5 6 7 8 9 0 € £ $ % & (.,;:'\"!?) 
+                                <br>
+                                Just keep examining every bid quoted for zinc etchings.
+                            </div>
+                        </umb-control-group>
+
                     </umb-box-content>
                 </umb-box>
 

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -1359,6 +1359,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="stylesHelp">The CSS that should be applied in the rich text editor, e.g. "color:red;"</key>
     <key alias="tabCode">Code</key>
     <key alias="tabRules">Rich Text Editor</key>
+    <key alias="preview">Preview</key>
+    <key alias="previewHelp">How the text will look like in the rich text editor.</key>
   </area>
   <area alias="template">
     <key alias="edittemplate">Edit template</key>