Skip to main content

CKEditor Partial Documentation

_CKEditor

The _CKEditor.cshtml is a reusable partial view that integrates CKEditor 5 (Classic Build) into any Razor page with built-in validation, dynamic sizing, and automatic data synchronization.

Basic Usage​

You can use the partial by passing an anonymous object as the model:

<partial name="UI/_CKEditor"
         model='new { Id = "description", Label = "Description", Required = true }' />

  @await Html.PartialAsync("UI/_CKEditor", new {
      id = "editor1",
      label = "وصف الحالة",
      required = true,
      height = "200px"
  })

<!-- readonly version -->
  @await Html.PartialAsync("UI/_CKEditor", new { 
      id = "editor2", 
      label = "ملخص القضية (للعرض فقط)", 
      value = readonlyContent, 
      @readonly = true, 
      height = "320px" 
  })

Available Properties​

PropertyTypeDefaultDescription
IdstringRequiredThe unique ID for the textarea and editor instance.
Labelstring""The label text displayed above the editor.
RequiredboolfalseIf true, adds a red asterisk and enables built-in validation.
PlaceholderstringLabel valueThe placeholder text inside the editor.
Heightstring160pxThe fixed height of the editor (e.g., "300px", "50vh").
Valuestring""The initial HTML content of the editor.

Advanced JavaScript API​

The partial exposes a global CKEditorManager object to interact with editors programmatically.

1. Programmatic Validation​

The partial automatically intercepts form submissions and "Save" buttons, but you can manually trigger validation:

// Validate all CKEditors on the page
const allValid = window.CKEditorManager.validateAll();

// Validate a specific instance
const specificEditor = document.getElementById('myEditorId');
if (specificEditor.validate) {
    const isValid = specificEditor.validate(true); // pass true to focus if invalid
}

2. Accessing the CKEditor Instance​

If you need to use the CKEditor 5 API (e.g., to set/get data or listen to events):

const editorElement = document.getElementById('myEditorId');
const editorInstance = editorElement.ckeditorInstance;

// Example: Manual Get Data
console.log(editorInstance.getData());

// Example: Manual Set Data
editorInstance.setData('<p>Hello World</p>');

3. Data Syncing​

The textarea value is automatically kept in sync with the editor content on every change. This ensures that standard form posts and jQuery.serialize() work as expected.

Customization Example​

<div class="col-md-12">
    <partial name="UI/_CKEditor"
             model='new {
                 Id = "notes",
                 Label = "Additional Notes",
                 Placeholder = "Type your notes here...",
                 Height = "400px",
                 Required = true,
                 Value = "<p>Default content</p>"
             }' />
</div>

Styling​

The partial uses a CSS variable --editor-height to ensure the editor height remains persistent even during focus or state changes. You can override this globally or per container if needed.

.my-custom-container {
    --editor-height: 600px;
}