CODEWITHSUNDEEP
firefoxcontenteditable
Anton
Anton

Reputation: 31

Contenteditable Not working properly on firefox

Hi I'm working on a custom text editor, on a linux 64 machine (if it can help). Since the javascript "document.execCommand" has been deprecated, I'm working with "selection" and "range" and other javascript objects and functions. I'm using an external div (as textarea) with the attribute contenteditable = true. Everything seems fine until the text editor generate, inside the main editable div, tags like: span, ol, li ... In Firefox (Chrome, and Opera work fine) the editor let the user write inside the tag until he press enter to go to a new line. At this point if the user try to get back (to correct something for example) these tags are not editable anymore. I tried to give to those tags the same attribute contenteditable = true, but no luck; The only way I can get back and edit them is by clicking with the mouse right button. Any idea on how I can keep all the tags "contenteditable" inside the main div? The file I'm working on is thousands of lines long so I simplified the problem in the snipped below.

/**
  the text editor object
*/
function TextEditor( args ){
  this.editorId = args.editorId;
  this.container = document.querySelector('#' + this.editorId );
  var self = this;
  this.setOrderList = function(){
    document.execCommand('insertorderedlist');
  }
  this.initialize = function(){
    if( self.textArea.innerHTML === '' ){
      var div = document.createElement('div');
          self.textArea.appendChild(div);
    }
  }
  
  if ( this.container ) {
   this.textArea = this.container.querySelector('.text-area');
   this.orderedList = this.container.querySelector('#orederd-list');
   this.orderedList.addEventListener('click', this.setOrderList);
   this.textArea.addEventListener('focus', this.initialize);
  } 

}
var args = {
  editorId : 'container'
}
var editor = new TextEditor( args );
<div id="container">
  <div id="buttons-container">
    <ul id="buttons">
      <li id="orederd-list" class="button"><i class="fas fa-list-ol"></i></li>
    </ul>
  </div>
  <div class="text-area" contenteditable="true">
  </div>
</div>

Upvotes: 1

Views: 2499

Answers (1)

Anton
Anton

Reputation: 31

I found What's the problem is. In the main style sheet I have the following instruction:

a, li, span, h1, h2, h3, h4, h5, h6, p{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */}

this instruction prevent users to select text from the website. In Browsers like Chrome, Edge, Opera... this css instruction does not work inside "contenteditable" elements, while for some reason in Firefox it does. For those interested, the I changed for the text editor main div the instruction:

-moz-user-select: none;

into:

-moz-user-select: text;

and now everything is fine.

Upvotes: 2

Related Questions