node-red-contrib-wysiwyg 1.0.2
A stable and reliable WYSIWYG editor for Node-RED with rich text editing capabilities, perfect for email templates and HTML content. Battle-tested in production environments.
Node-RED WYSIWYG Editor
A WYSIWYG (What You See Is What You Get) editor node for Node-RED.
Overview
This node allows you to create and edit rich text content directly within your Node-RED flows. It's particularly useful for creating:
- Email templates
- HTML content
- Formatted reports
- Documentation
- Any scenario requiring rich text editing
Features
- Rich Text Editor: Full-featured WYSIWYG editor with formatting options
- Flexible Output: Store content in msg, flow, or global context
- Email Ready: Perfect for creating HTML email templates
- Easy Integration: Works seamlessly with Node-RED's email nodes
- Customizable: Set custom field names for better flow organization
Installation
Run the following command in your Node-RED user directory (typically ~/.node-red
):
npm install node-red-contrib-wysiwyg
After installation, restart Node-RED to make the node available in your palette.
Usage
- Drag the WYSIWYG node from the palette to your flow
- Double-click the node to open its configuration
- Enter a name for the node (optional but recommended)
- Configure the output settings:
- Field: The property name to output to (default: 'payload')
- Field Type: Where to store the output (msg, flow, or global context)
- Click "Done" to save the configuration
- Connect the node to other nodes in your flow as needed
Email Template Example
Here's how to use this node to create an email template:
- Add a WYSIWYG node to your flow
- Double-click to open the editor
- Create your email template with formatting, images, and links
- Set the output field to
html
(or your preferred property name) - Connect it to an email node (like
node-red-node-email
) - In your email node, use
msg.html
as the email body
Example Flow:
[ WYSIWYG (Email Template) ] --> [ Email Node ]
Using Template Variables
You can include dynamic content using handlebars syntax in your templates:
<h1>Hello {{msg.name}}!</h1>
<p>Your order #{{msg.orderId}} has been shipped.</p>
These placeholders will be replaced with actual values from the message when the flow runs.
Configuration
Node Properties
- Name: A friendly name for the node (appears under the node in the flow)
- Text: The rich text content to output
- Field: The property name to output to (default: 'payload')
- Field Type: Where to store the output:
msg
: Output to message object (default)flow
: Store in flow contextglobal
: Store in global context
Example
A simple flow that uses the WYSIWYG node to set a welcome message:
[ WYSIWYG ] --> [ Debug ]
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.