CODEWITHSUNDEEP
ckeditorplaceholder
dcparham
dcparham

Reputation: 291

ckeditor placeholder allows doubleclick

I have "placeholder" feature installed in my CKEditor 4.8.0. Any saved [[text inside double square brackets]] when retrieved from the database, shows up in the Editor as yellow, and becomes "read only". That part is good. It is indeed read only if you click only once in the text, because it does not allow you to edit. However, [a]if you double click it, it opens a window that lets you then edit the text in a text box, and you can hit OK and it saves that new text; and [b]you can backspace the [[text section]] and the whole span deletes! When you add the bracketed verbiage and save it, then retrieve it in the CKEditor, it displays inside a span tag like this:

<span tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_widget_placeholder" data-cke-display-name="placeholder" data-cke-widget-id="2" role="region" aria-label="Propietary/company-related verbiage goes here placeholder widget" contenteditable="false"><span class="cke_placeholder cke_widget_element" data-cke-widget-keep-attr="0" data-widget="placeholder" data-cke-widget-data="%7B%22name%22%3A%22The%20Parents%20as%20Teachers%20(PAT)%20program%20will%20provide%3A%20(1)%20personal%20visits%2C%20based%20on%20recommended%20dosage%20for%20each%20family%3Fs%20number%20of%20risk%20factors%3B%20(2)%2012%20group%20connections%20per%20program%20year%3B%20(3)%20annual%20developmental%20screenings%20and%20a%20health%20review%20that%20includes%20a%20record%20of%20hearing%2C%20vision%20and%20general%20health%20status%3B%20and%20(4)%20referrals%20to%20community%20resources%20provided%20to%20families%20as%20needed.%20The%20PAT%20program%20will%20serve%20a%20target%20population%20with%20at%20least%20one%20risk%20factor%20and%20identified%20as%20most%20appropriate%20for%20PAT%20services%20in%20the%20community.%20The%20parent%20educator%20will%20have%20a%20Bachelor%3Fs%20degree%20in%20a%20human%20service%20related%20field%20and%20experience%20relevant%20to%20serving%20the%20target%20population.%20Parent%20educators%20will%20be%20PAT%20trained%20and%20certified%2C%20and%20will%20implement%20the%20program%20with%20model%20fidelity.%20The%20program%20will%20submit%20an%20annual%20report%20to%20PAT%20and%20participate%20in%20the%20Quality%20Endorsement%20and%20Improvement%20process%20as%20required%20by%20PAT%20National%20Center%20(PATNC)%20Smart%20Start%20funds%20may%20also%20be%20used%20to%20support%20incentives%20for%20eligible%20participants.%22%2C%22classes%22%3Anull%7D" readonly="true">[[Propietary/company-related verbiage goes here.]]</span><span class="cke_reset cke_widget_drag_handler_container" style="background: rgba(220, 220, 220, 0.5) url(&quot;https://fabrik.smartstartinc.net/ncpcphp/activity-mgmt2.0/ckeditor/plugins/widget/images/handle.png&quot;) repeat scroll 0% 0%; top: -13px; left: 0px; display: block;"><img class="cke_reset cke_widget_drag_handler" data-cke-widget-drag-handler="1" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="Click and drag to move" role="presentation" draggable="true" width="15" height="15"></span></span>

Again, if you cursor in the yellow verbiage and double click, you can edit and save the new text; and you can cursor after it and backspace and it deletes all the [[brackets and info]].

Also, note that inside the generated span tag is this: 

contenteditable="false"

which does little good. Any ideas how to prevent the [[info inside the brackets]] from being double-click edited, or backspace-deleted?

Upvotes: 0

Views: 517

Answers (2)

Baissou
Baissou

Reputation: 11

You must just comment the following code like this in the plugin.js file of placeholder. That is the dialog attribute which displays the dialog. 

editor.widgets.add( 'placeholder', {
            // Widget code.             
            //dialog: 'placeholder',

Upvotes: 1

dcparham
dcparham

Reputation: 291

Progress, and still has issues, but check this out: added “extraPlugins: ‘placeholder’” parm to existing “CKEDITOR.replace( ‘CAD’...”: [previous function had only up to entities_latin:false.]:

extraPlugins: 'placeholder',
on: {
    instanceReady: function( evt ) {
        evt.editor.on( 'doubleclick', function( evt ) {
            var element = evt.data.element;

            if ( element.hasClass( 'cke_placeholder' ) ) {
                evt.cancel();
            }
        }, null, null, -1 );
    }
}

So the whole function now:

var editor = CKEDITOR.replace( 'CAD', { 
    entities: false, 
    basicEntities: false, 
    basicEntities : false, 
    entities_greek: false, 
    entities_latin: false,
    extraPlugins: 'placeholder',
    on: {
        instanceReady: function( evt ) {
            evt.editor.on( 'doubleclick', function( evt ) {
                var element = evt.data.element;

                if ( element.hasClass( 'cke_placeholder' ) ) {
                    evt.cancel();
                }
            }, null, null, -1 );
        }
    }
});

Now double click IN the yellow and no edit popup [good]; however, the + still appears upper left corner of the yellow, and it allows editing; plus you can still backspace and delete it.

Upvotes: 0

Related Questions