# \[Announce\] node-red-contrib-ui-editor

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784>\
**Category:** Share Your Nodes\
**Tags:** node-red-dashboard\
**Created:** [21 April 2023 09:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784 "2023-04-21T09:55:41Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [21 April 2023 09:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/1 "2023-04-21T09:55:41Z")

</div>

Hi,

I have released a new Node-RED Dashboard UI widget node called `ui_editor`.

> **[GitHub - HiroyasuNishiyama/node-red-contrib-ui-editor](https://github.com/HiroyasuNishiyama/node-red-contrib-ui-editor)**
>
> Contribute to HiroyasuNishiyama/node-red-contrib-ui-editor development by creating an account on GitHub.

The `ui_editor` is based on the block-style editor, [Editor.js](https://editorjs.io/), and supports input and display of images, tables, lists, etc. It also supports API control via input messages.

 ![ui-editor](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76330718cff9d569ab8ab70f72f086824f7b7f55.png)

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [21 April 2023 10:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/2 "2023-04-21T10:19:37Z")

</div>

I am looking for an editor to edit text files like bash, json, pyhton on a server. I am more looking after something that can do syntax highlight not the rich text features. Can I use this for that?

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [21 April 2023 11:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/3 "2023-04-21T11:06:10Z")

</div>

Sorry, code block currently supported by `ui_editor` do not support syntax highlighting.  
But, there is an [Editor.js plugin](https://github.com/calumk/editorjs-codeflask) that support syntax highlighting.  
If it meets your requirements, I will consider updating `ui_editor`.

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [21 April 2023 11:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/4 "2023-04-21T11:16:38Z")

</div>

Oh, this looks nice, and looks like nicely integrated. Maybe if you implement it, also give an option to start the editor in either CodeFlask or in the current view.

I found highlight.js which works fine, but it is only a formatter tool, I don't think it would work with an editor.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 April 2023 11:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/5 "2023-04-21T11:19:55Z")

</div>

@nisiyama If you use the DARK theme in the dashboard (dashboard-\>Theme-\>Style-\>Dark) the 'Add' and 'Click to tune' options are almost impossible to see.

(opened an issue [using dashboard 'Dark' theme makes it hard to use · Issue #1 · HiroyasuNishiyama/node-red-contrib-ui-editor · GitHub](https://github.com/HiroyasuNishiyama/node-red-contrib-ui-editor/issues/1))

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 April 2023 11:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/6 "2023-04-21T11:55:05Z")

</div>

> [@nygma2004](#):
>
> I am looking for an editor to edit text files like bash, json, pyhton on a server. I am more looking after something that can do syntax highlight not the rich text features. Can I use this for that?

You should be able to implement Monaco as a remote editor.

Alternatively, depending on what you want and how the server is configured/secured, you could simply use Microsoft's remote editing extensions for VSCode.

* * *

If you have Docker or other open container server available, looks like this would implement a remote edit environment:

[coder/code-server: VS Code in the browser (github.com)](https://github.com/coder/code-server)

On my backlog for uibuilder I also want to set up something that would allow a remote editing feature. Should be relatively easy but needs me to learn about the Monaco API.

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [22 April 2023 09:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/7 "2023-04-22T09:45:47Z")

</div>

@zenofmud  
Thanks for the report.  
I have released a new version with modified CSS so that those buttons, etc. are visible in the Dark theme.

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [22 April 2023 09:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/8 "2023-04-22T09:54:35Z")

</div>

@nygma2004  
I have released a new version with @calumk/editorjs-codeflask as the code tool. there seems no need to make the two code tools selectable, so I have not made them selectable.

Code highlighting works for javascript, C-like languages, etc., but unfortunately does not work well for python, bashs scripts, etc. From a quick check, it seems to be a problem with the editorjs-codeflask or its dependent libraries.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 April 2023 10:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/9 "2023-04-22T10:32:22Z")

</div>

One of the potential advantages of having a Markdown editor instead of EditorJS would be good integration with live edit code blocks using something like PrismJS. Did you consider Markdown? (Not a criticism by the way, I'm interested in the thinking)

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [22 April 2023 10:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/10 "2023-04-22T10:51:49Z")

</div>

My requirements were JSON affinity and API handling of content. Of several several candidates I considered, Editor.js was the best option.

---

<div class="post-metadata">

**Author:** ![NR\_everywhere](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nr_everywhere/32/80156_2.png) [@NR\_everywhere](https://discourse.nodered.org/u/NR_everywhere)\
**Post date:** [28 May 2023 16:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/11 "2023-05-28T16:34:02Z")

</div>

Hi,  
Thanks a lot for this integration ! 😄  
This is a very way to display documentation.  
I install very succesfuly on my rasp with the script

But on my server...  
I have a display issue with NR docker (tag : 3.02).  
I install of course NR dashboard  
I try several browser and there is no display

Is there some dependencies to add ?

Again thanks a lot.  
Let me know if you have an idea.

Regards

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [29 May 2023 23:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/12 "2023-05-29T23:23:56Z")

</div>

Hi,  
ui-editor uses some dependent libraries internally, which should be installed automatically during node installation.

Do you see any output in the browser's developer tools console?

---

<div class="post-metadata">

**Author:** ![NR\_everywhere](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nr_everywhere/32/80156_2.png) [@NR\_everywhere](https://discourse.nodered.org/u/NR_everywhere)\
**Post date:** [30 May 2023 13:27 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/13 "2023-05-30T13:27:22Z")

</div>

Hi,  
Thanks for your help

Here some info about the log :

`La ressource à l’adresse « http://my_ip:my_port/ui/ui_editor/libs/editor » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)`

It's result blocking :

```auto
Error: Cannot find module '@editorjs/editorjs/dist/editor.js'
Require stack:
- /data/node_modules/node-red-contrib-ui-editor/editor.js
- /usr/src/node-red/node_modules/@node-red/registry/lib/loader.js
- /usr/src/node-red/node_modules/@node-red/registry/lib/index.js
- /usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/index.js
- /usr/src/node-red/node_modules/@node-red/runtime/lib/index.js
- /usr/src/node-red/node_modules/node-red/lib/red.js
- /usr/src/node-red/node_modules/node-red/red.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
    at Function.resolve (node:internal/modules/cjs/helpers:114:19)
    at /data/node_modules/node-red-contrib-ui-editor/editor.js:501:38
    at Layer.handle [as handle_request] (/usr/src/node-red/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/node-red/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/usr/src/node-red/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/usr/src/node-red/node_modules/express/lib/router/layer.js:95:5)
    at /usr/src/node-red/node_modules/express/lib/router/index.js:284:15
    at param (/usr/src/node-red/node_modules/express/lib/router/index.js:365:14)
    at param (/usr/src/node-red/node_modules/express/lib/router/index.js:376:14)

```

Thanks for your help  
Regards !

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [31 May 2023 02:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/14 "2023-05-31T02:35:33Z")

</div>

Hi,  
Thank you for the log.  
It seems that the latest version of editorjs has changed the internal file structure.  
I have released a new version of ui-editor (0.0.4) which fixes editorjs version, so please try it.

---

<div class="post-metadata">

**Author:** ![NR\_everywhere](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nr_everywhere/32/80156_2.png) [@NR\_everywhere](https://discourse.nodered.org/u/NR_everywhere)\
**Post date:** [31 May 2023 09:36 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-editor/77784/15 "2023-05-31T09:36:14Z")

</div>

Hi,  
Yes it's work again perfectly ! thank you

I notice that the node need to be refresh when you navigate the differents UI NR tab  
--\> It can be easly done with UI control node.

Fyi, (previous post) for using Markdow (i love it also) in html you can use this node : [node-red-node-markdown (node) - Node-RED](https://flows.nodered.org/node/node-red-node-markdown)  
After that the html can be included in a block of editor.js

Regards

 ![ui-editor](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29f4d8f0df43ce78d4eb1d31910528a443b0e042.png)