How can I create uneditable fields on CK Editor?

问题

In my app, admins can change form template and users should fill in the blanks in this form using CK Editor or other editors. But when I show form to user, they can remove some fields. I dont wanna this. How can I create "uneditable" fields on CK Editor or can you suggest another editors for that?

Thanks in advance..

回答1:

Summary TL;DR

You can use the "widget" plugin system, it is designed for this sort of usage where parts of a template are editable, but others are not. It is simply a plugin that extends the widget system to create a non-editable block with editable fields inside (you get drag'n'drop support for free too).

The example simple-box widget is located here and is very informative of the general flow for widgets, you can see the sample here: https://sdk.ckeditor.com/samples/simplebox.html

The Tutorial

The tutorial for creating that widget is here: https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html

The important part for users being able to edit certain fields is in the section Adding Editable Parts: https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#adding-editable-parts

You can add editables by normal selectors, which makes it easy to have multiple editable fields.

editor.widgets.add( 'simplebox', {    // Code defined before...

    editables: {
        title: {
            selector: '.simplebox-title'
        },
        content: {
            selector: '.simplebox-content'
        }
} } );

Explanation and Another Example

And the explanation of widgets is here with another example, which is a captioned image: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_widgets.html

Commentary

The widget uses an "upcast" function to determine whether an element should be a widget in the current CKEditor instance. If you are creating separate systems for admin & users, both using CKEditor, you can have separate upcasts for admin vs user so that you can enter templates as an admin, then upcast it to a widget when a user is editing it so that they can only edit the "editables". If you enter them directly as HTML templates in a database or whatnot, then it is even easier since you can just always upcast in the widget plugin.

The relevant section about upcasting is here: https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#how-does-a-widget-become-a-widget

And it has a very simple syntax as well:

editor.widgets.add( 'simplebox', {
    // Code defined above...
    upcast: function( element ) {
        return element.name == 'div' && element.hasClass( 'simplebox' );
    }
} );

回答2:

@Baki, editor content area is an open space where you can type and remove anything what makes deletion preventing pretty hard if not impossible. There is a large amount of cases to handle.

If you have form fields that you wish some to be editable and some not, please "go around". instead of trying to do this inside the editor, use the editor only for edible fields. Your form can be a standard non-editable HTML page where you have editable parts on which you can create the editor. Example of such a page could look like so:

<div class="container">
   <h1><p>Hello </p><p contenteditable="true">[NAME]</p>,</h1>
   <div class="text">
     <p>I'm pleased to inform you the total sales has reached<p>
     <p contenteditable="true">[AMMOUNT]</p>
     <p>units...</p>
  </div>
</div>

Working code would look like:https://jsfiddle.net/zqmLLjfh/3/

来源：https://stackoverflow.com/questions/48879089/how-can-i-create-uneditable-fields-on-ck-editor

标签

ASP.NET

ckeditor