What a coincidence, I just visited the forum to post something else and saw your post. I’m also using this editor in my app.
A question: Where is your form and how are you loading the editor? Mine is in a live_modal. The only way I could make the editor (kinda) work was by placing a <script> tag inside a phx-ignore element. It doesn’t always load, though, and I don’t know why.
And a tip: SimpleMDE hasn’t been maintained in a long time. Use EasyMDE instead!
Hopefully this helps out anyone in the future. Based on the tip found here. For my use case, what i did was:
def render(assigns) do
~L"""
<div class="form_container">
<%= f = form for @changeset,
#,
phx_target: @myself,
phx_change: "validate_form" ,
id: "richtext_form"
%>
<div
phx-hook="RichText"
phx-update="ignore"
phx-target="<%= @myself %>"
id="richtext_container"
>
<%= textarea f,
:the_content,
value: @clientside_richtext_input
%>
</div>
</form>
</div>
"""
end
Reason being is i still want to validate the form input on the server side. But the pushing the params after a validation function in the returning {:noreply, socket |> ...} kept on failing and the data being put into to the rich text wasn’t stored anywhere. Which led to:
textarea.def handle_event(
"validate_form",
%{"richtext_form" => params},
socket) do
{:noreply, socket |> validate_form(params)}
end
def handle_event(
"handle_clientside_richtext",
%{"richtext_data" => richtext_data},
socket) do
{:noreply,
socket
|> assign_form(:clientside_richtext_input, richtext_data)
|> push_event("richtext_event", %{richtext_data: richtext_data})}
end
This is so that the richtext data can be stored by cycling back and forth between the client and backend for when the live component is updated. Now for the same thing inside the JS code.
const RichText = {
mounted(){
init(this.el.querySelector("#richtext_form_the_content"))
},
updated(){
const textArea = init(this.el.querySelector("#richtext_form_the_content"));
textArea.codemirror.on("change", ( ) => {
this.pushEventTo(
this.el,
"handle_clientside_richtext",
{richtext_data: textArea.value()}
);
this.handleEvent(
"richtext_event",
(richtext_data) => textArea.value(richtext_data)
)
})
}
}
The logic is in the updated function since mounted rich text area gets erased right away.
import easyMDE from "easyMDE";
const init = (element) => new easyMDE({
element: element,
forceSync: true
})
The forceSync: true is for the data to be set as the textarea value on the clientside and play well with the backend.
It took a few days of looking back and forth at different examples, reading the forum, rereading the docs, looking at source code, and feeling dumb. This is the simplest solution that i can think of once it all clicked.
*edit typo fix: phx-update: "TextEditor" to phx-hook: "RichText"