Rich text editor in Phoenix application

Greetings, I am building a Phoenix application and I need a rich text editor to be integrated in one of the forms. I have tried with CKeditor but with no luck. I suupose i haven’t set it up in the project’s file’s. Has anyone of you integrated such an editor in his phoenix project? Which is the best option? And could you give me a little bit detailed information (or a step by step guide) on how to include it.

Thanks in advance.

I just did a quick scan through the CKEditor docs, and it seems to be a pretty straightforward Javascript widget, and I can’t see why this wouldn’t work with Phoenix or any other backend framework.

That said, your question is pretty broad and, without sharing any code, i imagine it’ll be hard for anyone to provide much help for you. Can you share what you’ve tried so far?

You can just use SimpleMDE. It’s pretty easy.

Just add this to your layout header:

<link rel="stylesheet" href="//">
<script src="//"></script>
<script>var simplemde = new SimpleMDE();</script>

And add this to your form:

<%= textarea f, :body, class: "form-control", id: "body-editor" %>

That should be it, more or less.

If you want a more in dept explanation about how all of this is done, I’ll direct you to the tutorial I copied this from :stuck_out_tongue: here .

This is the link I have started following.

I have unrared the ckeditor folder in assets and changed the Plug.Static scope in the Endpoint.ex as shown bellow.

plug Plug.Static, at: "/", from: :ckeditor, gzip: false, only: ~w(assets, css fonts images js favicon.ico robots.txt, ckeditor, assets/ckeditor)

And when I go to “” the following error is shown.

no route found for GET /ckeditor/samples/index.html (CkeditorWeb.Router)

I am not sure that a path in the router should be included, in the documentation it is said that getting the url should be done automatically. I think that I am not including the widget’s folder in the correct directory.

Our app uses ckeditor 4 hosted (we have custom plugins enabled).
We basically load in layout and call it on pages as follow.

app.html.eex (layout)

<script src="https://mycdn/app/ckeditor/ckeditor.js"></script>


<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
      <%= label f, Translate.translate("Template"), class: "form-control-label" %>
      <%= textarea f, :template, class: "form-control" %>
      <%= error_tag f, :template %>
    $(document).ready(function() {
        CKEDITOR.replace(editor, {
          language: editor_locale,
            removePlugins: 'ckeditortablecellsselection'