CKEditor paste - f1 - simplyfing

by radek

HTML

<script src="https://cdn.ckeditor.com/4.19.1/full-all/ckeditor.js"></script>

<ul class="right-half" id="mtdBlockList">
<li class="ddblock liClass" data-id="1" data-type="master"  data-data="master block" draggable="true" ><div class="">master</div></li>
<li class="ddblock liClass" data-id="2" data-type="editable"  data-data="editable block 1" draggable="true" ><div class="">editable1</div></li>
<li class="ddblock liClass" data-id="3" data-type="editable"  data-data="editable block 2" draggable="true" ><div class="">editable2</div></li>
</ul>


<br>
<br>
<textarea id="editor">
    <p>1 - Some text.</p>
    <p>2 - And there's the widget <span class="tagSpecialClass">birthYear</span></p>
    <p>3 - Some text <span class="tagSpecialClass">{{birthYear}}</span>.</p>
</textarea>

CSS

.liClass {
    float: left;
    list-style-type: none;
    margin-right: 15px;
}

JavaScript

// Some CSS for the widget to make it more visible.
CKEDITOR.addCss( '.tagSpecialClass { background: green; padding: 3px; color: #fff } ' );

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',
            template:
                '<div class="simplebox">' +
                    '<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content"><p>Content<br>.<br>.<br>.</p></div>' +
                '</div>',

            editables: {
                title: {
                    selector: '.simplebox-title',
                    allowedContent: 'br strong'
                },
                content: {
                    selector: '.simplebox-content',
                    allowedContent: 'p br ul ol li strong em'
                }
            },

            allowedContent:
                'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',

            requiredContent: 'div(simplebox)',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );
            }
        } );
    }
} );

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('drop', function (evt) {
        console.log('Pasted started')
        


var elements = evt.editor.document.getBody().getChildren()//elementPath().elements 
var lastEl = elements.getItem(elements.count()-1)
console.log(elements)
console.log(elements.count())
console.log(lastEl)
 
var data = evt.data.dataTransfer.getData('block') 
if (data){
         var dataTransfer = evt.data.dataTransfer;
        dataTransfer.setData( 'text/html', null ); //set data
        console.log("nulling data")
}
 
/* var range = evt.editor.createRange()
range.setStartAfter( lastEl );
evt.editor.insertHtml( '<p>This <b>is a new </b>paragraph.</p>', 'html',range );
 */



// Place range before...