Rich text editor in Phoenix application

Phoenix Forum Questions / Help
1

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.

2

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?

3

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

Just add this to your layout header:

<link rel="stylesheet" href="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></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 .

4

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 “http://0.0.0.0:4000/ckeditor/samples/index.html” 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.

5

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>

page.html.eex

<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 %>
    </div>
  </div>
</div>
...
<script>
    $(document).ready(function() {
        CKEDITOR.replace(editor, {
          language: editor_locale,
            removePlugins: 'ckeditortablecellsselection'
        })
    })
</script>