EdCharbeneau/editor.html

## editor.html

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>


</head>
<body>
<div id="example">

    <div class="box wide">
        <h4>Information</h4>
        <p>
            The following demo shows how to use the Editor's style tool, which provides the ability to customize the widget content by means of custom
            CSS classes and styling, and a CSS file registered in the Editor iframe document.
        </p>
    </div>
    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">

            &lt;p&gt;
                Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
                In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
                accessibility standards and provides API for content manipulation.
            &lt;/p&gt;
            &lt;p&gt;Features include:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
                &lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
                &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
                &lt;li&gt;Cross-browser support&lt;/li&gt;
                &lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
                &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;
                Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
                &lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!
            &lt;/p&gt;
    </textarea>

    <script>
        $("#editor").kendoEditor({
            tools: [
                { name: "formatting", width: 150, items: [
                    { text: "Highlight Error", value: ".hlError" },
                    { text: "Highlight OK", value: ".hlOK" },
                    { text: "Inline Code", value: ".inlineCode" },
                    { text: "Strike", value: ".strike" }
                ] }
            ],
            stylesheets: [
                "editorStyles.css"
            ]
        });
    </script>
</div>


</body>
</html>

## editorStyles.css
.hlError
{
    background-color:#fea;
    color:#f33;
}

.hlOK
{
    background-color:#aef;
    color:#060;
}

.inlineCode
{
    font:bold 12px monospace;
}

.strike {
    text-decoration: line-through;
}

	<!DOCTYPE html>
	<html>
	<head>
	<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
	<title></title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

	<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>


	</head>
	<body>
	<div id="example">

	<div class="box wide">
	<h4>Information</h4>
	<p>
	The following demo shows how to use the Editor's style tool, which provides the ability to customize the widget content by means of custom
	CSS classes and styling, and a CSS file registered in the Editor iframe document.
	</p>
	</div>
	<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">

	<p>
	Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
	In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
	and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
	accessibility standards and provides API for content manipulation.
	</p>
	<p>Features include:</p>
	<ul>
	<li>Text formatting & alignment</li>
	<li>Bulleted and numbered lists</li>
	<li>Hyperlink and image dialogs</li>
	<li>Cross-browser support</li>
	<li>Identical HTML output across browsers</li>
	<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
	</ul>
	<p>
	Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
	<a href="http://www.telerik.com/forums/">feedback</a>!
	</p>
	</textarea>

	<script>
	$("#editor").kendoEditor({
	tools: [
	{ name: "formatting", width: 150, items: [
	{ text: "Highlight Error", value: ".hlError" },
	{ text: "Highlight OK", value: ".hlOK" },
	{ text: "Inline Code", value: ".inlineCode" },
	{ text: "Strike", value: ".strike" }
	] }
	],
	stylesheets: [
	"editorStyles.css"
	]
	});
	</script>
	</div>


	</body>
	</html>
	.hlError
	{
	background-color:#fea;
	color:#f33;
	}

	.hlOK
	{
	background-color:#aef;
	color:#060;
	}

	.inlineCode
	{
	font:bold 12px monospace;
	}

	.strike {
	text-decoration: line-through;
	}