jube-fork/Jube.App/wwwroot/kendo/examples/editor/paste-cleanup.html

<!DOCTYPE html>
<html>
<head>
    <title>Paste Cleanup</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Paste clean-up options:</h4>
        <ul class="options" id="pasteCleanupList">
            <li>
                <input type="checkbox" class="paste-option" id="allCheck" value="all" />
                <label for="allCheck">all</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="cssCheck" value="css" />
                <label for="cssCheck">css</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="keepNewLinesCheck" value="keepNewLines" />
                <label for="keepNewLinesCheck" value="">keepNewLines</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="msAllFormattingCheck" value="msAllFormatting" />
                <label for="msAllFormattingCheck" value="">msAllFormatting</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="msConvertListsCheck" value="msConvertLists" checked="checked" />
                <label for="msConvertListsCheck" value="">msConvertLists</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="msTagsCheck" value="msTags" checked="checked" />
                <label for="msTagsCheck" value="">msTags</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="noneCheck" value="none" />
                <label for="noneCheck" value="">none</label>
            </li>
            <li>
                <input type="checkbox" class="paste-option" id="spanCheck" value="span" />
                <label for="spanCheck" value="">span</label>
            </li>
        </ul>
    </div>
</div>

<div id="example">
    <div class="demo-section k-content wide">
        <textarea id="editor" rows="10" cols="30" style="width:100%; height:470px" aria-label="editor">
        &lt;br /&gt;
        &lt;p style="text-align:center;"&gt;
            &lt;span style="font-family:Verdana, Geneva, sans-serif;font-size:large;"&gt;&lt;strong&gt;One of the Most Beautiful Islands on Earth - Tenerife&lt;/strong&gt;
            &lt;/span&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"&gt;&lt;strong&gt;Overview&lt;/strong&gt;
            &lt;/span&gt;
        &lt;/p&gt;
        &lt;p style="font-size: small;"&gt;
            &lt;strong&gt;Tenerife &lt;/strong&gt;is the largest and most populated island of the eight &lt;a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank"&gt;Canary Islands&lt;/a&gt;. It is also the most populated island of &lt;strong&gt;Spain&lt;/strong&gt;, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the &lt;strong&gt;Canary Islands&lt;/strong&gt;.&amp;nbsp;The archipelago's beaches, climate and important natural attractions, make it a major tourist destination with over 12 million visitors per year.
        &lt;/p&gt;
        &lt;br /&gt;
        &lt;img src="../content/web/editor/tenerife.png" style="float: right;" alt="" width="350" height="206" /&gt;

        &lt;p&gt;&lt;span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"&gt;
            &lt;strong&gt;Trip Highlights in Tenerife&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;span style="white-space:pre;"&gt;&lt;/span&gt;
            &lt;ul&gt;
                &lt;li&gt;
                    &lt;strong style="color: rgb(0,80,5);"&gt;Trip to Loro Parque &lt;/strong&gt; &lt;br /&gt; Out top tip is to visit the famous &lt;em&gt;Loro Parque&lt;/em&gt; or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz on Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species. 
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;strong&gt;&lt;span style="color: rgb(46,125,50);"&gt;Whale and Dolphin Watching Tour&amp;nbsp;&lt;br /&gt;&lt;/span&gt;&lt;/strong&gt; Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;strong&gt;&lt;span style="color: rgb(96,173,94);"&gt;Teide National Park Stargazing&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt;Last, but not least you can take a stargaze trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
                    &lt;br /&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        </textarea>
    </div>

    <script>
        $(document).ready(function () {
            // create Editor from textarea HTML element with default set of tools
            var editor = $("#editor").kendoEditor({
                stylesheets: [
                    "../content/shared/styles/editor.css",
                ],
                pasteCleanup: {
                    all: false,
                    css: false,
                    keepNewLines: false,
                    msAllFormatting: false,
                    msConvertLists: true,
                    msTags: true,
                    none: false,
                    span: false
                }
            }).getKendoEditor();

            $(".paste-option:checkbox").on("click", function () {
                editor.options.pasteCleanup[this.value] = this.checked;
            });

        });
    </script>
    <style>
        #pasteCleanupList {
            width: 50em;
        }

        #pasteCleanupList li {
            float: left;
            width: 15em;
        }
    </style>
</div>


    
</body>
</html>