Skip to content

Latest commit

 

History

History
49 lines (32 loc) · 1.67 KB

markdown_editor.md

File metadata and controls

49 lines (32 loc) · 1.67 KB

Markdown Editor

The crowdAI Markdown editor includes the following features:

  • Kramdown-based Markdown
  • Code syntax highlighting
  • MathJax integration
  • At mentions: @mentions
  • Caching of rendered markdown
  • GitHub-style markdown editor with a toolbar and live preview.
  • Uploading of Image assets

Markdownable Area

crowdAI supports two views of the markdown editor: with or without toolbar. Aside from image uploading, all features are available in either view.

Editor with toolbar

<%= markdown_editor do |m| %>
  <%= f.text_area :evaluation_markdown, class: "txt-med" %>
<% end %>

The erb code interacts with jQuery code to provide the editing environment.

Markdownable text area

<%= f.text_area :comment_markdown, placeholder: "Add a comment...", data: { behavior: "mentions" } %>
<%= f.hidden_field :mentions_cache %>

Markdown Concern

Markdownable fields are pairs, the editable field must end with _markdown and the Markdownable Concern added to the model. For example, for comments, the fields are:

  • comment
  • comment_markdown

When the field ending in _markdown is saved, a callback on the model (via the Markdownable Concern) fires and the markdown text is rendered as HTML, then saved in the 'bare' field, which is then used in for display.

At Mentions

The At Mentions functionality is activated by adding data-behaviour='mentions' to the markdown field. This activates the javascript

Image Uploads

TODO