Block the use of email addresses in ckeditor

Question

We are using ckeditor on a website but we don't want the user to be able to add an email address inside the ckeditor. If he/she does, I want a alert saying "It's not allowed to add an email address". Does anyone knows how to do this?

Answer 1

I have two suggestions. The first uses widget:

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

and the second uses HtmlDataProcessor:

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

First One:

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();
          } );
        }
      } );
    }
  } );

Example:

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

Second one:

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;
});

Example:

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

Take attention about regexp to validate e-mail in this thread:

How to validate an email address using a regular expression?