diff --git a/src/templates/_formfields/multi-line-text/input.html b/src/templates/_formfields/multi-line-text/input.html
index 27755e09e..1a458de79 100644
--- a/src/templates/_formfields/multi-line-text/input.html
+++ b/src/templates/_formfields/multi-line-text/input.html
@@ -5,7 +5,7 @@
{% block field %}
{% if field.useRichText %}
-
+
{% include '_includes/forms/textarea' with { rows: 5 } %}
diff --git a/src/web/assets/frontend/src/js/fields/rich-text.js b/src/web/assets/frontend/src/js/fields/rich-text.js
index 4eb3d7c55..0ed8035ec 100644
--- a/src/web/assets/frontend/src/js/fields/rich-text.js
+++ b/src/web/assets/frontend/src/js/fields/rich-text.js
@@ -7,6 +7,7 @@ export class FormieRichText {
this.$field = settings.$field.querySelector('textarea');
this.$container = settings.$field.querySelector('[data-rich-text]');
this.scriptId = 'FORMIE_FONT_AWESOME_SCRIPT';
+ this.defaultParagraphSeparator = 'p';
this.buttons = settings.buttons;
@@ -143,11 +144,17 @@ export class FormieRichText {
const options = {
element: this.$container,
- defaultParagraphSeparator: 'p',
+ defaultParagraphSeparator: this.defaultParagraphSeparator,
styleWithCSS: true,
actions: this.getButtons(),
onChange: (html) => {
- this.$field.textContent = html;
+ // catch "empty" HTML if we're using a placeholder
+ if (this.$field.placeholder && html === `<${this.defaultParagraphSeparator}>
${this.defaultParagraphSeparator}>`) {
+ this.$field.textContent = "";
+ this.editor.content.innerHTML = "";
+ } else {
+ this.$field.textContent = html;
+ }
// Fire a custom event on the input
this.$field.dispatchEvent(new CustomEvent('populate', { bubbles: true }));
@@ -171,6 +178,9 @@ export class FormieRichText {
this.$field.dispatchEvent(beforeInitEvent);
+ // save the defaultParagraphSeparator again, if it changed
+ this.defaultParagraphSeparator = options.defaultParagraphSeparator || this.defaultParagraphSeparator;
+
this.editor = init(options);
// Populate any values initially set
diff --git a/src/web/assets/frontend/src/scss/fields/_rich-text.scss b/src/web/assets/frontend/src/scss/fields/_rich-text.scss
index 02524f151..e76bf6faf 100644
--- a/src/web/assets/frontend/src/scss/fields/_rich-text.scss
+++ b/src/web/assets/frontend/src/scss/fields/_rich-text.scss
@@ -98,3 +98,8 @@
}
}
+// Add placeholder
+.fui-rich-text-content[data-placeholder]:empty::before {
+ content: attr(data-placeholder);
+}
+