Module: CKEditor5::Rails::Editor::Helpers::Editor

Includes:
Cdn::Concerns::BundleBuilder, Config
Included in:
Helpers
Defined in:
lib/ckeditor5/rails/editor/helpers/editor_helpers.rb

Instance Method Summary collapse

Methods included from Cdn::Concerns::BundleBuilder

#create_preset_bundle

Methods included from Config

#ckeditor5_element_ref, #ckeditor5_preset, #ckeditor5_translation_ref

Instance Method Details

#ckeditor5_editable(name = nil, **kwargs, &block) ⇒ Object

Creates an editable area for multiroot or decoupled editors.

Examples:

Creating a named editable area in multiroot editor

<%= ckeditor5_editable 'content', style: 'border: 1px solid gray' %>

Parameters:

  • name (String) (defaults to: nil) —

    Identifier for the editable area

  • kwargs (Hash) —

    HTML attributes for the editable element



98
99
100
101
102
103
104
105
 
# File 'lib/ckeditor5/rails/editor/helpers/editor_helpers.rb', line 98

def ckeditor5_editable(name = nil, **kwargs, &block)
  tag.public_send(
    :'ckeditor-editable-component',
    'data-turbo-temporary': true,
    name: name,
    **kwargs, &block
  )
end

#ckeditor5_editor(preset: nil, config: nil, extra_config: {}, type: nil, initial_data: nil, watchdog: true, editable_height: nil, language: nil, **html_attributes, &block) ⇒ Object

Creates a CKEditor 5 editor instance in the view.

Examples:

Basic usage with default preset

<%= ckeditor5_editor %>

Custom preset with specific height and initial content

<%= ckeditor5_editor preset: :custom, editable_height: 300, initial_data: "<p>Hello</p>" %>

Inline editor with custom styling

<%= ckeditor5_editor type: :inline, style: 'width: 600px' %>

Multiroot editor with multiple editable areas

<%= ckeditor5_editor type: :multiroot do %>
  <%= ckeditor5_toolbar %>
  <%= ckeditor5_editable 'title', style: 'border: 1px solid gray' %>
  <%= ckeditor5_editable 'content' %>
<% end %>

Decoupled editor with custom UI layout

<%= ckeditor5_editor type: :decoupled do %>
  <div class="toolbar-container">
    <%= ckeditor5_toolbar %>
  </div>
  <div class="editor-container">
    <%= ckeditor5_editable %>
  </div>
<% end %>

Editor with event handlers

<%= ckeditor5_editor oneditorchange: 'handleChange',
                     oneditorready: 'handleReady',
                     oneditorerror: 'handleError' %>

Form integration

<%= form_for @post do |f| %>
  <%= f.ckeditor5 :content, required: true %>
<% end %>

Parameters:

  • preset (Symbol, PresetBuilder) (defaults to: nil) —

    The name of the preset or a PresetBuilder object

  • config (Hash) (defaults to: nil) —

    Custom editor configuration that overrides preset configuration

  • extra_config (Hash) (defaults to: {}) —

    Additional configuration to merge with preset/custom config

  • type (Symbol) (defaults to: nil) —

    Editor type (:classic, :inline, :balloon, :decoupled, :multiroot)

  • initial_data (String) (defaults to: nil) —

    Initial HTML content for the editor

  • watchdog (Boolean) (defaults to: true) —

    Enable/disable the editor crash recovery (default: true)

  • editable_height (Integer) (defaults to: nil) —

    Set fixed height for editor in pixels

  • language (Symbol) (defaults to: nil) —

    Set editor UI language (e.g. :pl, :es)

  • html_attributes (Hash) —

    Additional HTML attributes for editor element



59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
# File 'lib/ckeditor5/rails/editor/helpers/editor_helpers.rb', line 59

def ckeditor5_editor( # rubocop:disable Metrics/ParameterLists
  preset: nil,
  config: nil, extra_config: {}, type: nil,
  initial_data: nil, watchdog: true,
  editable_height: nil, language: nil,
  **html_attributes, &block
)
  validate_editor_input!(initial_data, block)

  context = ckeditor5_context_or_fallback(preset)

  preset = Engine.find_preset!(preset || context[:preset] || :default)
  config = build_editor_config(preset, config, extra_config, initial_data)

  type ||= preset.type

  # Add some fallbacks
  config[:licenseKey] ||= context[:license_key] || preset.license_key
  config[:language] = { ui: language.downcase } if language

  editor_props = Editor::Props.new(
    type, config,
    bundle: context[:bundle],
    watchdog: watchdog,
    editable_height: editable_height || preset.editable_height
  )

  tag_attributes = html_attributes.merge(editor_props.to_attributes)

  tag.public_send(:'ckeditor-component', 'data-turbo-temporary': true, **tag_attributes, &block)
end

#ckeditor5_menubar(**kwargs) ⇒ Object

Creates a menubar component for decoupled editor.

Examples:

Creating a menubar with custom styling

<%= ckeditor5_menubar style: 'margin-bottom: 10px' %>

Parameters:

  • kwargs (Hash) —

    HTML attributes for the menubar element



139
140
141
 
# File 'lib/ckeditor5/rails/editor/helpers/editor_helpers.rb', line 139

def ckeditor5_menubar(**kwargs)
  ckeditor5_ui_part('menuBarView', **kwargs)
end

#ckeditor5_toolbar(**kwargs) ⇒ Object

Creates a toolbar component for decoupled editor.

Examples:

Creating a toolbar with custom class

<%= ckeditor5_toolbar class: 'custom-toolbar' %>

Parameters:

  • kwargs (Hash) —

    HTML attributes for the toolbar element



129
130
131
 
# File 'lib/ckeditor5/rails/editor/helpers/editor_helpers.rb', line 129

def ckeditor5_toolbar(**kwargs)
  ckeditor5_ui_part('toolbar', **kwargs)
end

#ckeditor5_ui_part(name, **kwargs, &block) ⇒ Object

Creates a UI part component for the editor (toolbar, menubar).

Examples:

Creating a toolbar component

<%= ckeditor5_ui_part 'toolbar' %>

Parameters:

  • name (String) —

    Name of the UI component (‘toolbar’, ‘menuBarView’)

  • kwargs (Hash) —

    HTML attributes for the UI component



114
115
116
117
118
119
120
121
 
# File 'lib/ckeditor5/rails/editor/helpers/editor_helpers.rb', line 114

def ckeditor5_ui_part(name, **kwargs, &block)
  tag.public_send(
    :'ckeditor-ui-part-component',
    'data-turbo-temporary': true,
    name: name,
    **kwargs, &block
  )
end