Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rich Text Editor Not Behaving Correctly

I am trying to create a rich text editor on a text field. In an attempt to do this, I'm using Summernote. I have the editor initializing close to the way I want. I'd really like the airmode to behave on hover instead of on-click. Still, there is an odd behavior that is my real problem.

As shown in this Fiddle, a user can begin typing in one of the three editors on the screen. However, as soon as you enter a space, the text goes to the line above the input field. It does not stay on the same line. Strangely, the text just above the input line does not allow for rich-editing. I'm initializing the text fields like this:

  var optionEditors = $('.option-editor');
  for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });
  }

What am I missing? Everything looks correct. Its just that the behavior seems wrong. Thank you.

like image 912
user687554 Avatar asked Aug 09 '16 17:08

user687554


People also ask

How do I fix the rich text format in word?

Right-click the rich text box for which you want to enable or disable full rich-text formatting, and then click Rich Text Box Properties on the shortcut menu. Click the Display tab. To enable full rich-text formatting for the selected rich text box, select the Full rich text (images, tables, etc.)

How do you reset text editor?

All the preferences should be stored in your home folder's library. Can hold option while in your home folder to get to your library or type CMD+shift+g for the go-to menu and paste in ~/Library/Preferences to get to the folder.

Can you edit rich text?

Edit an enhanced rich text column Open the list you want to edit. Select the list item, right click, and then select Edit. to display the Edit window. Note that you can't edit an enhanced rich text column in Quick Edit view.


1 Answers

Another solution is to hide the inputs with CSS and make summernote looks like a form-control :

for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      },
      callbacks: {
        onInit: function() {
               // make the editor like a "form-control"
               $('.note-editor').addClass('form-control');
               // Force editor height adding one space 
               $(this).summernote('code', ' ');
            }
        }      
    });

}

@see working example https://jsfiddle.net/v8zhvsmo/

like image 195
aprovent Avatar answered Nov 16 '22 02:11

aprovent