Angular 4 & Froala：防止空用户输入

【问题标题】：Angular 4 & Froala : prevent empty user entryAngular 4 & Froala：防止空用户输入
【发布时间】：2017-09-29 16:55:10
【问题描述】：

我们在 angular4 应用程序中使用 froala 编辑器，但在尝试验证编辑器的内容时遇到了困难。基本上我们要禁止用户在编辑器中只输入空格、制表符或输入字符。

我尝试了以下代码但没有成功：

options: Object = {
  placeholderText: '',
  height: 300,
  charCounterMax: 3000,
  htmlAllowedEmptyTags: [],
  events : {
    'froalaEditor.blur' : function(e, editor) {
      editor.html.unwrap();
      editor.html.cleanEmptyTags();
      console.log("'" + editor.html.get() + "'");
    }
  }
}

无论我在做什么，我仍然在得到

'<p>&nbsp;&nbsp;</p>'

当用户输入两次空格键并验证时。是否有任何修剪功能或类似功能？非常感谢

【问题讨论】：

你有模板吗？

标签： angular froala angular4-forms

【解决方案1】：

您可以使用innerText 属性并自己修剪内容。

配置

const buttonConfig = ['bold', 'italic', 'underline', '|', 'formatOL', 'formatUL', '|', 'insertLink', '|', 'undo', 'redo'];
this.options = {
  charCounterCount: true,
  key: environment.froalaLicenseKey,
  language: 'de',
  charCounterMax: this.maxLength,
  toolbarButtons: buttonConfig,
  toolbarButtonsSM: buttonConfig,
  toolbarButtonsXS: buttonConfig,
  placeholderText: this.placeholder,
  pluginsEnabled: ['link', 'lists', 'charCounter'],
  linkAlwaysBlank: true,
  linkInsertButtons: ['linkBack'],
  linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove'],
  zIndex: 9999,
  events: {
    /*on every blur event check if the user has actually inserted content and clean if needed*/
    'froalaEditor.blur': (e: FocusEvent, editor) =>  (editor) => {
      let t = document.createElement('div');
      t.innerHTML = editor.html.get();
      let trimmedText = t.innerText.trim();
      if (!trimmedText) {
        editor.html.set('');
        editor.events.trigger('charCounter.update');
      }
    },
  },
};

【讨论】：