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.
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="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<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
This is the link I have started following.
Learn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plugins, widgets and skins are explained here, too. API reference and examples included.
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.
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)
<%= label f, Translate.translate("Template"), class: "form-control-label" %>
<%= textarea f, :template, class: "form-control" %>
<%= error_tag f, :template %>