Integrating EasyMDE Markdown Editor
The video demonstrates how to integrate the EasyMDE JavaScript Markdown editor to enable a WYSIWYG editing experience. The editor provides formatting tools such as headings, bold text, lists, and code blocks.
Creating a JavaScript Asset Route and Controller
A new route and controller are implemented to serve JavaScript files from the embedded assets directory. The controller reads JS files and returns them with the correct application/javascript content type.
Embedding and Hosting Editor Assets Locally
The EasyMDE distribution files (JS and CSS) are copied into the project’s assets directory instead of using a CDN. This ensures faster loading and full control over styling.
Initializing the Editor Instance
A custom initialization script imports the EasyMDE library and attaches it to a textarea element by ID. Configuration options include toolbar customization, maximum height, tab indentation, and immediate execution on load.
Custom Styling with Project Theme
The default EasyMDE CSS is adapted to match the project’s design using predefined CSS variables. The styles are imported into the base stylesheet to ensure consistent theming.
Creating a Reusable Editor Component
A new editor component replaces a standard textarea in the admin interface. The component supports props, error handling, and integrates seamlessly with form validation.
Debugging and Fixing Initialization Errors
Console errors are used to diagnose issues such as incorrect configuration structure. After correcting the configuration and importing the stylesheet properly, the editor renders correctly.
Testing Article Creation and Validation
The editor is tested by creating and publishing articles with formatted content. Headings, bold text, and code blocks render correctly, while validation errors display as expected.
Planned Enhancements
Future improvements include adding syntax highlighting, implementing article updates, integrating toast notifications for feedback, and adding delete functionality.
Let's get what you see is what you get added to the project. And we're going to be using this one here called Easy Markdown Editor, which is a simple, beautiful, and imbeddable JavaScript Markdown Editor. You can see this gives us an environment to write in where it gives us some options to do bold, italic codes. We can also do code blocks in here. And it does a lot of stuff for us.
So what we need to do to add this to the project is we need to, again, need to create another route. And I'm gonna create one here below style called javascript. I know we have to use javascript now. We're gonna say plus slash js and then a file param. We should probably also namespace this on the CSS now since we will need to be extending our
Asset directory with JavaScript files. Now we don't need this, but I think it's nice to be explicit. All right, then, before we actually add the assets, we need to also create a new controller, and we're gonna steal what we have here from the style controller, and we're gonna call it, just call it Java script. And from in here, we're gonna grab the file name, which is coming in from the param,
It's called file. And then we say script, read files as same as before, but we're gonna go into the JS and we're gonna grab the file name. My brain is rebooting file name. And we can't do that at once. It's because I need to use
If TMT, Sprint F, give that a save, and now yes, we are looking good. And then instead of returning a block with the text like CSS, we're gonna say application, Java script, and then pass in the script. So now we can,
reference files, JavaScript files from our assets directory with the ones that are embedded into the binary. Let's just add this to the router. So we're going to say Routes, JavaScript, and one more time, JavaScript, don't call it. Great. Now we need two things. We need to add the code that this package provides.
And then we need to add another file that will set up this instance so that we can actually target some element in our DOM. So let's do that. And then we're also going to add some styles, which is going to be a big copy-paste of styles that I have created that fit into the project. You feel free to go through it. You can edit it as you want. But this file is updated to match our color theme based on the CSS variables.
that we defined in our CSS directory. I'm in the Assets directory now. I'm going to get a new file called JS. Going to jump in here, and then I'm going to create a file called EasyMDE.min.js. And now I'm going to copy a bunch of code. Oh, there we go. Yes, as you can see, it's a lot.
It's lagging a little bit. That's fine. Let's just jump out. We can see we get some highlighting now. We don't need to worry too much about that. This is literally just grabbing what. So they have installed here. So we simply just grabbing the distribution here. And then I grabbed also the CSS from this link here. It's just a CDN.
But we want to host it ourselves, so it's much faster for users to load this into their browser. Great. One more thing. We're going to create another file here called easymde.js. And in here, we're going to import with our direct path to easymde.min.js. And we can do this because we embed the directory.
this directory into the binary, so this file is aware of the other file. Then we're going to say function, and in here we're going to say new, ecmde, going to pass an object, where it will say, oh, too many, it's fine, element, it's going to be document, getElementById, so we're using
some JavaScript function here that's available on the document. We can also go directly into the browser and start to use something like this, where we just look up an HTML element with a specific ID. And for our use case, this is going to be an article content. Forgive that I save. And now we want to specify that the max height should be 500 px.
500 pixels. We want to have a tool bar that includes the following. I'm going to copy paste it now because it's a lot to type out. I'm going to include all of these elements in the toolbar. We're also going to say indent with tabs true and the tab size should be four.
Now we also want to directly call this function so that whenever we pull this file down, this one gets run directly or immediately and then it finds this element with this ID and then loads in the editor into that element. Great. Now I want to go into our CSS here and I want to add our
easymde.css. Again, I'm going to copy paste a lot of code now. Feel free to walk through it. All of this is mostly what we get from this. If you go to this link right here, this is it. This is basically what is in here. I've just updated some of the styling.
with our variables, and this is just using standard vanilla CSS with classes and all the options we have. So I wouldn't worry too much about this. Go through it if you want to, but there's a bunch of styles in here. We have almost 900 lines. Okay. We also need, let me just make sure I got everything.
We also need to now create a new component, which is the editor component that has this class and styles with a little bit of styling. And then we also need to add a script tag to our page. So this editor gets loaded into the component I want to whenever the page load. So I'm in the admin.temple here. And we're going to go down to our components. And we're going to create a new one here called temple. And let's call it veritor.
second name, title, value, string. We then want to say diff, class, grid, call, span, two. Do we want that? No, I don't. I want to, yeah, I continue to use these wrappers here. Right, let's just say label, four. And it's going to be for the name.
class is going to be text.lg, font, semi, bold, close it. And inside of here you want to have text area with the ID of name. And name is going to be name. Close it, provide value if there are any, text area. Give that a save. Yes, let's then instead of
text area here we are going to say editor and what do we need to pass? We need to pass the content, article content for the name and ID and then we're going to say content for the title and we should probably also instead accept prop instead here
So we are not gonna be having the value. Let me get rid of that. It's gonna be a field prop like this. So the prop value, no. Prop value. Do we have an error? We do not. Okay, value. And then we can add this as well.
so that we show the error beneath it. And then, let's say, article content. Pass this, get rid of this, and let's go into the browser and see what we have. So, refresh, everything works. Let's see, add article. We have nothing, and we have nothing because we need to add a script. Right.
So let me add a script here. And this is also how you can do JavaScript in Temple. You can add the JavaScript function here and then use them in the markup as you would a completely standard HTML anywhere else. And we actually don't need to add anything inside. If you need to say source, it's going to be strings replace. It's going to be routes Java script.
and we want to replace file with easy-easy-mde.js and replace the first instance. Say the type of the script is going to be module. There we go. Clean this up a little bit. Yeah. What do we have now? Okay, we have nothing. Why do we have
nothing. So when this happens, it's always good to check the console here. I don't know if you can see, but we have an unexpected string. We cannot click and see what's wrong, but it's something in the ECMDE.js file, not the CSS file, this one. Okay, so I made a mistake here somewhere. Let me
Check the notes to see if I can find it. We're doing a function. We are saying new easyMDE. And we are importing. This one is also correct, right? EasyMDE. And did you say line eight? It's because I need to pass an array and not an object. Let's see if that did the trick. Oh, okay.
Well, it did the trick, but we don't have any styles yet. And I believe that is because I didn't import this into our base.css. So let's get the ECMDE. Let's see if this did. And there we go. Actually, almost there we go. It would be nice to have some margin on the bottom. So let's just add it on the y-axis.
and we have some briefing room. Now we have a proper looking editor that matches our color theme, and that again comes from the CSS variable that I showed you that I replaced. But now we can say heading here, hello world, and we can see we have formatting. For a smaller one we say hello world, smaller, we can say hello, we're gonna say hello world a lot right now, but that's okay. Gonna say bold, you can see even
at the highlight here is following the accents. This is quite cool. You can do code blocks. What more can we do? We can do an order list. Now we are starting to cook a little bit here. We actually have a proper looking editor that we can use. And if you create an article, let's say my third article,
Actually, instead, let me go to my site here. No, I can't do that because I need to mark down. Okay. Boom, boom, boom, boom, boom. My third article with a proper what you see is what you get editor and heading
two, and let's say, heading three, code block. I'm really just going quickly here, so let's say func main. Let's do that, and let's publish, and let's see. We have it, in my third article, go to home, let's check it, and you can see we have the headings correctly.
We have the bolt, we have the code block. So this is actually looking quite decent. But you can see we don't have any syntax highlighting. And I believe we need to edit our article for that. So that's going to be the next episode. But let's see if our error handling is working as well. So let's just run more article. Let's put in some values here, some values. Let's say publish. And we should also have
error down here so we cannot have this empty so we are still looking at the correct fields this is not empty anymore anymore and what about now and we can release it so this is how we do a proper editor in not really that much code next episode we are going to be dealing with
the update page so we can actually work with the articles after we've released them or after we've saved them as a draft. Then we also want some visual feedback. We're adding what's known as a toast. So it's just a little flag or notification bar that pops up to tell us if something happens. And finally, we're also going to be adding some logic to delete and delete an article.
