Question

我们在网站上使用ckeditor，但我们不希望用户能够在ckeditor中添加电子邮件地址。如果他/她这样做，我希望收到一条警报，提示“不允许添加电子邮件地址”。有谁知道该怎么做？

Answer 1

我有两个建议。第一个使用小部件：

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_widget.html

第二个使用HtmlDataProcessor：

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_htmlDataProcessor.html

第一个：

CKEDITOR.plugins.add( 'blockemail', {
    requires: 'widget',
    onLoad: function() {
      CKEDITOR.addCss( '.blockemail{background-color:#ffff80;color:black;}' );
    },
    init: function( editor ) {
      editor.widgets.add( 'blockemail', {
        downcast: function() {
          return new CKEDITOR.htmlParser.text( '' );
        },
        init: function() {
          this.setData( 'name', 'It\'s not allowed to add an email address');
        },
        data: function() {
          this.element.setText( '#' + this.data.name + '#' );
        }
      } );
    },
    afterInit: function( editor ) {
      var placeholderReplaceRegex = /\w+(((\.|\_)\w+)+)?@\w+(\.\w+)+/gi; 
      editor.dataProcessor.dataFilter.addRules( {
        text: function( text, node ) {
          var dtd = node.parent && CKEDITOR.dtd[ node.parent.name ];
          // Skip the case when placeholder is in elements like <title> or <textarea>
          // but upcast placeholder in custom elements (no DTD).
          if ( dtd && !dtd.span )
            return;

          return text.replace( placeholderReplaceRegex, function( match ) {
          var widgetWrapper = null,
                innerElement = new CKEDITOR.htmlParser.element( 'span', {
                  'class': 'blockemail'
                } );

            // Adds placeholder identifier as innertext.
            innerElement.add( new CKEDITOR.htmlParser.text( match ) );
            widgetWrapper = editor.widgets.wrapElement( innerElement, 'blockemail' );

            // Return outerhtml of widget wrapper so it will be placed
            // as replacement.
            return widgetWrapper.getOuterHtml();
          } );
        }
      } );
    }
  } );

示例：

https://codepen.io/edsonperotoni/pen/qBBKaWN

第二个：

CKEDITOR.on( 'instanceReady', function( evt )
  {
    var editor = evt.editor;
    var rulesEditor = {
          text: function( value ) {
           if(/\w+(((\.|\_)\w+)+)?@\w+(\.\w+)+/gi.test(value)){
            alert('It\'s not allowed to add an email address');
            return value.replace(/\w+(((\.|\_)\w+)+)?@\w+(\.\w+)+/gi,'');
           }else{
             return value;
           }

          }
      };

      var dataProcessor = editor.dataProcessor;
      var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
          htmlFilter.addRules(rulesEditor);
      var dataFilter = dataProcessor && dataProcessor.dataFilter;
          dataFilter.addRules(rulesEditor);
          editor.config.pasteFilter =rulesEditor;
});

示例：

https://codepen.io/edsonperotoni/pen/pooVBmy

在此线程上注意正则表达式以验证电子邮件：

How to validate an email address using a regular expression?

禁止在ckeditor中使用电子邮件地址

1 个答案: