Can editable blocks / area come only from widget?

user_250422 0
Viewed 106

For a project I work on we need to have inside CKEditor 4 only blocks. Some of them will be editable, some of them will not be editable. Working proof of concept is in jsFiddle

enter image description here

There are two buttons in the toolbar (don't know how to make them visible). One inserts noneditable block the second one editable block.

Question: How to make sure the user is NOT able to type anything outside of any of inserted blocks?

I tried readOnly : false hopping that editable block would "win" but this approach did not work.

ckeditor4.x ckeditor
1 Answers

  1. In order to show the two buttons, you need to download Ckeditor and copy your icons in the following locations. According to the default config of ckeditor plugin, an icon image name should be same with a plugin name or you can set the custom path of an icon.

    • ckeditor root/

      • plugins/
        • nonEditableBlock/
          • icons/
            • nonEditableBlock.png

    • ckeditor root/

      • plugins/
        • editableBlock/
          • icons/
            • editableBlock.png

  2. I don't have an exact solution to NOT able to type anything outside of any of inserted blocks. But I would like to suggest some idea for you. Maybe it will help you. When the data of Ckeditor is changed or a new block is inserted in Ckeditor, to listen event and remove a data such as p, div, span and so on that is useless for you except nonEditableBlock and editableBlock classes.

<script src="ckeditor/ckeditor.js"></script>

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


<script>
    // Some CSS for the widget to make it more visible.
    CKEDITOR.addCss('.nonEditableBlock { background: lightgreen; padding: 3px; color: black } ');
    CKEDITOR.addCss('.editableBlock { background: lightgray; padding: 3px; color: black } ');

    CKEDITOR.plugins.add('nonEditableBlock', {
        requires: 'widget',
        icons: 'nonEditableBlock',
        init: function (editor) {
            editor.widgets.add('nonEditableBlock', {
                button: 'Insert a nonEditableBlock',
                template:
                    '<div class="nonEditableBlock">' +
                    //'<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content1"><p>nonEditableBlock</p></div>' +
                    '</div>',
            });

            editor.on('afterCommandExec', function (event) {
                clearData()
            })

        },
    });
    CKEDITOR.plugins.add('editableBlock', {
        requires: 'widget',
        icons: 'editableBlock',

        init: function (editor) {
            editor.widgets.add('editableBlock', {
                button: 'Insert a editableBlock',
                template:
                    '<div class="editableBlock">' +
                    //'<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content">editableBlock</div>' +
                    '</div>',
                editables: {
                    content: {
                        selector: '.simplebox-content'
                    }
                },
            });

            editor.on('afterCommandExec', function (event) {
                clearData()
            })

        },
    });


    CKEDITOR.replace('editor', {
        // A clean-up in the toolbar to focus on essentials.
        //readOnly : false,
        toolbarGroups: [
            { name: 'document', groups: ['mode'] },
            //       { name: 'basicstyles' },
            { name: 'insert' }
        ],

        //      toolbar : [ { name: 'document', items: [ 'Source'] },
        //       { name: 'insert'},
        //       { name: 'editing', items: ['Undo', 'Redo', 'editableBlock' ]},
        //       ],    

        removeButtons: 'Image,Table,HorizontalRule,SpecialChar',
        removePlugins: 'exportpdf',
        extraPlugins: 'nonEditableBlock,editableBlock',
    });

    var editor = CKEDITOR.instances.editor

    editor.on('contentDom', function () {
        // console.log(CKEDITOR.instances.editor.getData())

        var editable = editor.editable();
        editable.attachListener(editor.document, 'click', function () {
            clearData()
        });
        editable.attachListener(editor.document, 'keyup', function () {
            clearData()
        });
        editable.attachListener(editor.document, 'afterCommandExec', function () {
            clearData()
        });
        // events continue ... 
    });

    function clearData() {
        // To remove html tags such as p, div, span except nonEditableBlock and editableBlock classes
    }
</script>

user_129650510
Related