I am trying to add a code editor to a webpage. I have found an almost perfect one called Editarea, and I would like to use it. I need help changing something about it for the way I want to use it on the webpage. It seems like it uses advanced (at least for me) JavaScript to generate what renders on the page. My JavaScript is a little rusty, and I need help to get its display just like I want. What I want is not to display any toolbar areas on the top or bottom. I do not need the toolbar because the user will set up the toolbar area controls options. Can someone take a look at this and see if they edit it to render as I want. I show a pic below of how I want it. Thanks
Hi @philhagen, are you sure about that? The last release is from almost 11 years ago… oO so rather than coming to grips with that outdated library, I’d suggest to look for a solution that’s still getting actively maintained from the first. I haven’t really worked with it myself, but a popular and battle-tested alternative would be code mirror, for example:
2 Likes
Hi and thanks so much for the reply. Your question is a good one that needs proper explanation. I appreciate you asking why I would use a sort of outdated Code Editor Plugin. The simple reason is its simplicity. Where I am using this it needs to be really lightweight and not depend on anything like node.js. I have seen some super robust modern ones but they do not work for me. I am trying to use this because of its minimal dependencies. For instance, Monaco Editor that I was first interested in, was never able to work for me. Phil
I have figured this out. At the bottom of the only JS file it links to in the head there is what becomes rendered by JavaScript CSS. Because I am rusty I had forgotten about using a code unminifier to see JS code clearly. Once I could read the code it was easy to do what I wanted. If anybody needs help to see the code that I changed to turn off the display of the toolbar I will gladly share. Phil
Glad you got it sorted… just be aware that there won’t be any bug fixes either, so if you’re going that route you should also be prepared to patch the code yourself if necessary.
The monaco editor is of course just fantastic, but does indeed require a bit of a build setup (although it is possible, if somewhat hacky, to include it using script tags only as shown here). The code mirror editor OTOH can be included just fine by downloading it into your project and that’s it.
Just something to consider. :-)
1 Like
Hey, thanks again for all your help. Are you saying that Code Mirror can be added to a project without the use of node.js? I was impressed with Code Mirror but I only found setup via node.js. My project cannot use node.js
Yes, it’s explained here in the manual:
https://codemirror.net/doc/manual.html#usage
Just to clarify though, neither code mirror nor the monaco editor actually depend on nodejs as a runtime; it may only be used for the build setup to bundle the required modules (such as specific language modes) in a single JS file, which you can then include in your page as usual.
So just to be clear in terms that I understand. I do not need to be running the working editor from http://localhost:8888 or and address like that? That was the way it seemed I had to do it with Monaco Editor. Monaco Editor was my first choice for this. So It can just use a local JavaScript in a folder? I my case I need that to be a local file directory (and I normally know how to do that with webpages). If so I was not aware of that. Thanks
That would just be your local development server, which doesn’t necessarily have to be nodejs – it might as well be a PHP server or what have you. Loading the monaco editor from the file system works just fine as well though.
As another option, I just found this page in the docs according to which you don’t even have to download it, but load it from a CDN instead… here’s a working page with the dummy links replaced, you can just save it somewhere and open it:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.