如何在Froala编辑器中实现模板文本输入框的可编辑功能？

我之前也碰到过类似的困扰，Froala默认会对表单元素做一些限制，导致你在内容视图里没法编辑手动添加的输入框。下面是几个亲测可行的解决办法：

1. 调整编辑器配置，允许表单元素 #

Froala有默认的标签和属性过滤规则，input这类表单元素可能不在允许列表里。你需要在初始化编辑器时，把input标签及相关属性加入白名单：

new FroalaEditor('#editor', {
  // 允许input标签出现在编辑器内容中
  allowedTags: ['p', 'br', 'input'],
  // 允许输入框的必要属性，比如type、value、name
  allowedAttrs: ['type', 'value', 'name'],
  // 部分新版本可能需要用htmlAllowed系列配置
  htmlAllowedTags: ['input'],
  htmlAllowedAttrs: ['type', 'value', 'name']
});

注意：不同版本的Froala配置项名称可能略有差异，建议对照你使用的版本文档调整。

2. 强制设置输入框为可编辑状态 #

有时候Froala会自动给表单元素加上contenteditable="false"属性，导致无法编辑。你可以两种方式处理：

• 手动在代码视图添加属性：插入输入框时直接指定contenteditable="true"

  <input type="text" value="默认文本" contenteditable="true">
  

• 通过编辑器事件批量处理：在编辑器初始化完成后，自动给所有输入框设置可编辑属性

  new FroalaEditor('#editor', {
    // 其他配置...
    events: {
      initialized: function() {
        this.$el.find('input').attr('contenteditable', 'true');
      }
    }
  });
  

3. 自定义按钮快速插入可编辑输入框（进阶） #

如果需要频繁插入这类输入框，可以自定义一个工具栏按钮，一键插入配置好的可编辑输入框，避免手动写代码出错：

new FroalaEditor('#editor', {
  toolbarButtons: ['insertEditableInput', '|', 'bold', 'italic'],
  customButtons: {
    insertEditableInput: {
      title: '插入可编辑输入框',
      icon: '<i class="fa fa-text-field"></i>', // 可以用Font Awesome图标
      callback: function() {
        this.html.insert('<input type="text" value="请输入内容" contenteditable="true">');
      }
    }
  }
});

如果以上方法都不生效，建议检查一下你使用的Froala版本——部分旧版本对表单元素的支持有限，升级到最新稳定版可能会解决问题。另外，也要确认有没有其他自定义过滤插件或规则影响了表单元素的可编辑性。

内容的提问来源于stack exchange，提问作者user652061