Search code examples
htmltinymce-4

TinyMCE <br data-mce-bogus="1"> randomly set on empty textarea


i already search for this <br data-mce-bogus="1"> but not find any working solution.

its happen randomly when my textarea is empty and i submit the form its sometimes return <br data-mce-bogus="1"> or stay empty.

i already try to clean this up from my php process by:

if(!empty($value) AND $value!='<br data-mce-bogus="1">'){
   #input to database 
}

is there any solution from the javascript ?

this how i init the tinymce:

tinymce.init({
selector:'textarea.tinymce-input',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
force_br_newlines : true,
forced_root_block : '',
});

Solution

  • It doesn't happen randomly. The value is set to '' only when you have clicked inside the text area once, and submiting the form or clicking somewhere outside without entering anything in the Tiny MCE text area.

    The solution:

    Try using a event listener for change in content field. Use 'setup:' for that, as shown below:

    tinymce.init({
    selector:'textarea.tinymce-input',
    height: 500,
    menubar: false,
    plugins: [
    'advlist autolink lists link image charmap print preview anchor textcolor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code help wordcount'
    ],
    toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    force_br_newlines : true,
    forced_root_block : '',
    setup : function(ed) {
      ed.on('blur change cut copy keyup paste', function(e){
      var tinyMceData = tinyMCE.activeEditor.getContent({ format: 'raw' });
      if(tinyMceData.indexOf('<br data-mce-bogus="1">') >= 0) {
        tinyMceData = "";
        tinyMCE.activeEditor.setContent('', { format: 'raw' });
      }
      //Here you can validate your other content related validations
    });
    }
    });