Question

在我的应用中，管理员可以更改表单模板，用户应使用CK编辑器或其他编辑器填写此表单中的空白。但是当我向用户显示表单时，他们可以删除一些字段。我不想这样。如何在CK编辑器上创建“不可编辑”字段，还是可以为其他人编写推荐文件？

提前致谢..

Answer 1

摘要TL; DR

您可以使用“小部件”插件系统，它专为此类用途而设计，其中模板的某些部分是可编辑的，但其他部分则不可编辑。它只是一个扩展小部件系统的插件，用于创建一个带有可编辑字段的不可编辑块（您也可以免费获得拖放支持）。

示例简单框小部件位于此处，并且提供了小部件的一般流程信息，您可以在此处查看示例： https://sdk.ckeditor.com/samples/simplebox.html

教程

创建该小部件的教程如下： https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html

用户能够编辑某些字段的重要部分位于添加可编辑部分部分： https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#adding-editable-parts

您可以通过普通选择器添加可编辑的内容，这样可以轻松拥有多个可编辑字段。

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

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

解释和另一个例子

小部件的解释在这里有另一个例子，这是一个标题图片： https://docs.ckeditor.com/ckeditor4/latest/guide/dev_widgets.html

<强>评论

小部件使用“upcast”函数来确定元素是否应该是当前CKEditor实例中的小部件。如果您要为admin＆amp;创建单独的系统用户都使用CKEditor，您可以为管理员和用户分别进行上传，以便您可以作为管理员输入模板，然后在用户编辑时将其上传到窗口小部件，以便他们只能编辑“可编辑”。如果您直接将它们作为HTML模板输入到数据库或诸如此类的东西中，那么它就更容易了，因为您可以始终在窗口小部件插件中进行向上转换。

有关向上转播的相关部分如下： https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#how-does-a-widget-become-a-widget

它的语法也非常简单：

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

Answer 2

@Baki，编辑内容区域是一个开放空间，您可以键入和删除任何使删除变得非常困难的内容，如果不是不可能的话。有大量案件需要处理。

如果您有表单字段，您希望某些字段可以编辑而某些字段不可编辑，请“转转”。而不是尝试在编辑器中执行此操作，仅将编辑器用于可食用字段。您的表单可以是标准的不可编辑的HTML页面，您可以在其中创建可编辑的部分，您可以在其中创建编辑器。此类页面的示例可能如下所示：

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

工作代码如下：https://jsfiddle.net/zqmLLjfh/3/

如何在CK Editor上创建不可编辑的字段？

2 个答案: