Question

我的CKEditor 4.8.0中安装了“占位符”功能。从数据库中检索时，任何保存的[[双方括号内的文本]]都会在编辑器中显示为黄色，并变为“只读”。那部分很好。如果您只在文本中单击一次，它确实是只读的，因为它不允许您编辑。但是，[a]如果你双击它，它会打开一个窗口，让你可以在文本框中编辑文本，然后你可以点击OK然后保存那个新文本;并且[b]你可以退格[[text section]]并删除整个span！当你添加括号的verbiage并保存它，然后在CKEditor中检索它时，它会显示在这样的span标签内：

<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>

同样，如果您将光标放在黄色词典中并双击，则可以编辑并保存新文本;并且你可以在它和退格后光标，并删除所有[[方括号和信息]]。

另请注意，生成的span标记内部是：

contenteditable="false"

没什么好处的。任何想法如何防止[[括号内的信息]]被双击编辑或退格删除？

Answer 1

您必须在占位符的editor.widgets.add( 'placeholder', { // Widget code. //dialog: 'placeholder',文件中注释以下代码。这是显示对话框的dialog属性。

{{1}}

Answer 2

进展，但仍有问题，但检查一下：将“extraPlugins：'placeholder'”parm添加到现有的“CKEDITOR.replace（'CAD'...”：[上一个函数最多只有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 );
    }
}

现在整个功能：

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 );
        }
    }
});

现在双击黄色并且没有编辑弹出窗口[good];然而，+仍然出现黄色的左上角，它允许编辑;加上你仍然可以退格并删除它。

ckeditor占位符允许双击

2 个答案: