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.$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); +} +