Markdown Editor Field(ui_markdown_editor_field)

UiBibz::Ui::Core::Forms::Textareas::MarkdownEditorField

This component is based on the library Boostrap Markdown.
You can use Redcarpet or HAML gem to render markdown content.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:

content[value/block]
html_options[hash]<default: {}>
options[hash]<default: {}>

 # by variable 
 ui_markdown_editor_field name, options, html_options 

 # or by block 
 ui_markdown_editor_field options, html_options do 
   name 
 end

Options

The specific options for this component are:

action[string](use component stimulus-options method)
autofocus[boolean]
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
disabled_buttons[boolean]
hidden_buttons[boolean]
hideable[boolean]
savable[boolean]
state[symbol](:disabled, :active)(use component state method)
target[string](use component stimulus-options method)
turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

ui_markdown_editor_field 'comments'

<div class="md-editor active" id="1467708687712">
  <div class="md-header btn-toolbar">
    <div class="btn-group">
      <button class="btn-default btn-sm btn" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B">
        <span class="fa fa-bold"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Italic" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic" data-hotkey="Ctrl+I">
        <span class="fa fa-italic"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Heading" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdHeading" data-hotkey="Ctrl+H">
        <span class="fa fa-header"></span>
      </button>
    </div>
    <div class="btn-group">
      <button class="btn-default btn-sm btn" type="button" title="URL/Link" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdUrl" data-hotkey="Ctrl+L">
        <span class="fa fa-link"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Image" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdImage" data-hotkey="Ctrl+G">
        <span class="fa fa-picture-o"></span>
      </button>
    </div>
    <div class="btn-group">
      <button class="btn-default btn-sm btn" type="button" title="Unordered List" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdList" data-hotkey="Ctrl+U">
        <span class="fa fa-list"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Ordered List" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdListO" data-hotkey="Ctrl+O">
        <span class="fa fa-list-ol"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Code" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdCode" data-hotkey="Ctrl+K">
        <span class="fa fa-code"></span>
      </button>
      <button class="btn-default btn-sm btn" type="button" title="Quote" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdQuote" data-hotkey="Ctrl+Q">
        <span class="fa fa-quote-left"></span>
      </button>
    </div>
    <div class="btn-group">
      <button class="btn-sm btn btn-primary" type="button" title="Preview" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdPreview" data-hotkey="Ctrl+P" data-bs-toggle="button" aria-pressed="false">
        <span class="fa fa-search"></span> Preview
      </button>
    </div>
    <div class="md-controls">
      <a class="md-control md-control-fullscreen" href="#"><span class="fa fa-expand"></span></a>
    </div>
  </div>
  <textarea name="comments" id="comments" data-provide="markdown" data-iconlibrary="fa" class="md-input" rows="5" style="resize: none; display: block;"></textarea>
  <div class="md-fullscreen-controls">
    <a href="#" class="exit-fullscreen" title="Exit fullscreen"><span class="fa fa-compress"></span></a>
  </div>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_markdown_editor_field. You can use Simple Form input options and Ui Bibz ui_markdown_editor_field options.

Ruby

ui_form_for(@user) do |f|
  ...
  f.input :name, as: :ui_markdown_editor_field
  ...
end