HTML input \ WYSIWYG editor support

Dashboard
1

In Dashboard 2, is there a way to have a HTML input? Preferably with HTML formatting options?
Something like CKEditor or similar?

Thanks!

2

Not out of the box but there is nothing stopping you using a CDN and a ui-template

3

Hi Steve-Mcl,
Thanks for your quick reply.
Could you elaborate a bit on how to actually do this?
Thanks!

4

Sure check this out

Or the docs CKEditor Quick Start

5

For the record: I did search for this but did not get anywhere near the link to the quickstart. Which after reading still doesn't make perfect sense to me.

I've copied the div and script section to the ui-template node. This alone obviously does not work.

<script src="https://cdn.ckeditor.com/ckeditor5/41.3.1/classic/ckeditor.js"></script>
should go in the html <head> section, according to the example. How do I do this in Dashboard 2? What am I missing?

Thanks!

6

There is a very similar example of using a CDN for Dashboard 2.0 ui-template node here (though that was for charts, it is pretty much the same steps).

You should be able to pick out the bits from ckeditor docs and replace the eCharts bits.

7

Do you actually need/want Dashboard for this? You might find it easier to do on a vanilla page using either http-in/-out or UIBUILDER.

8

Well.. without going into too much detail: yes.
Going outside NR would mean setting up yet another environment just for this, setting up security, etc. etc. Using Uibuilder would mean learning and maintaining yet another solution.

But all this may be moot because doing this might be easy for Steve-Mcl, given the time I have I can't make heads or tails from the doc and examples. I'm not a developer, which is the reason why we're using NR in the first place.
I'm remembering Joe Pavitt's words in a Dashboard 2 video: "the normal things should be easy, the hard things should be possible" or something to that effect. And apparently I'm trying to do something hard. So I may have to abandon the idea entirely and try to go about it a different way (although at this time I have no clue what could be a comparable solution).

Given more time I may revisit this in the future. Or see if someone inside our organisation is able to figure this out.

9

True, though it gives you the ability to stick with native HTML rather than having to learn another framework. You can use standard web development tooling and practices - though perhaps not so useful if you don't know that yet. :slight_smile: At its simplest, uibuilder simply gives you a web environment to work with along with integrated comms to/from Node-RED. There is more if you want it but you certainly don't have to use it.

I'm afraid you at least trying to do something that is advanced if not hard.

However, there are relatively easy to use libraries out there such as Froala which should be easy enough to integrate with a native HTML page and that might have examples for frameworks. That one not free though, not sure if that is important. A quick look at the quickstart showed that integration with uibuilder driven pages should be pretty trivial.

Here are some other libraries - I haven't really used any myself for a very long time though I'm tempted to knock up an example (using uibuilder though I'm afraid, I'm no longer interested in using VueJS).

Update: Yup, took about 5 minutes at most to get a page working with uibuilder that shows the editor and gets changed text back into Node-RED.

Here is all the code needed, using QuillJS:

index.html - Note that nearly all of this is the standard html already in the uibuilder "blank" template.

<!doctype html>
<html lang="en" class="light"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Blank template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Blank template">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@latest/dist/quill.snow.css">
    <!-- <link type="text/css" rel="stylesheet" href="./index.css" media="all"> -->

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.jsdelivr.net/npm/quill@latest/dist/quill.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">uibuilder Blank Template</h1>
    <div role="doc-subtitle">Using the IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    
    <!-- Create the editor container -->
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br /></p>
    </div>
    
</body></html>

index.js

// Initialize Quill editor
const quill = new Quill('#editor', {
    theme: 'snow'
})

quill.on('text-change', (delta, oldDelta, source) => {
    console.log('text-change')
    if (source == 'api') {
        console.log('An API call triggered this change.')
    } else if (source == 'user') {
        console.log('A user action triggered this change.')
        uibuilder.send({
            topic: 'update-from-wysiwyg',
            payload: {
                delta: delta,
                oldDelta: oldDelta,
                source: source,
            }
        })
    }
})

Of course this isn't complete since every character typed currently results in a send back to Node-RED. You would want to make that a bit quieter I think. :rofl:

image
image981×226 6.26 KB