steveathon / bootstrap-wysiwyg

Tiny bootstrap-compatible WYSIWYG rich text editor
MIT License
661 stars 1.71k forks source link

Clicking 2 buttons at time (e.g. making next characters bold and italics) #34

Open Voyteck opened 9 years ago

Voyteck commented 9 years ago

I found a problem that it is impossible to click 2 buttons at time (without typing in any letters). Way to reproduce:

  1. Create an editor with 2-button toolbar - bold and italics
  2. Go to the editor and type something (will be typed in plain text)
  3. Click Bold and then Italics (right one after another - not typing anything in the editor) BUG: After clicking Italics Bold is disabled, only Italics is applied

Different way to reproduce (looks like a different bug, but I believe it comes actually from the same problem):

  1. Create an editor with 2-button toolbar - bold and italics
  2. Go to the editor and type something (will be typed in plain text)
  3. Click Bold (it gets enabled) and without typing anything click Bold again BUG: It should disable, but it doesn't (stays bold)

In both situations once you type in something - the editor gets back to normal way of working. Tested on Chrome. Firefox and IE - works same everywhere...

steveathon commented 9 years ago

This does appear to be a bug - not sure why it's breaking but let us look into it.

codewithtyler commented 9 years ago

I have just tested both situations you mentioned. In each test I conducted the editor performed normally. During the first scenario, after I clicked the italics button the text contained both bold and italics formatting. When I tried the second scenario, the bold formatting was removed after pressing the bold button a second time.

I am using the following browsers:

Internet Explorer: 11.0.9600.17842 Firefox: 38.0.5 Google Chrome: 43.0.2357.124

Voyteck commented 9 years ago

Hi Tyler, You can check this bug on the following address: http://test.myfirstmail.co.uk/ui/child/new_message.php The third control from the top is the editor styled using Materialized framework. I just retested that and the bug still appears there.

If you could give me any hints on how to avoid that if this is some kind of my mistake - I would be even more that grateful :)

codewithtyler commented 9 years ago

I just tested your page using the same three browser versions mentioned above and I encountered no issues. Everything worked just like it should.

What browser are you using? What version of it do you have installed?

Voyteck commented 9 years ago

Chrome 43.0.2357.124 m

The clue is that you need to click add some text, then after being at the end of the text (nothing selected - just a cursor blinking) click "B" icon (--> it will turn to Bold and icon will get enabled) and then immediatelly click "B" icon again (--> it is not changing back to disabled)...

EDIT: same thing on IE 11.0.9600.17842

OS: Windows 8.1, Polish version

codewithtyler commented 9 years ago

Ok let me just make sure I understand this.

First I type something into the textbox (last textbox on the page). Then with my cursor at the end of the word I click the bold button?

Is that right? Are you not highlighting the text before clicking the bold button?

Voyteck commented 9 years ago

Exactly...Without highlighting anything you Bold and then without doing anything else - click Bold again... Normally Bold should disable on the second click, but it does not...

codewithtyler commented 9 years ago

I believe the reason nothing is happening is because nothing is highlighted. The editor applies the formatting to what you have selected. If you highlight the text first then click the button it should work correctly.

What we might need to do is verify that the user has actually selected some text before doing anything. That way the button doesn't act like something should have changed.

codewithtyler commented 8 years ago

@Voyteck0 I have been working on fixing some of the reported issues over the past couple months. Could you try testing this again using the latest code found in the 2.0-dev branch? That code has not been released yet but it is the latest version and I believe will work for you.

spreadred commented 7 years ago

It works properly if you select text. If you do not select text, it still exhibits the behavior described in the initial bug report.

Steps to reproduce:

  1. type some text
  2. do not select any text
  3. click bold (it should now be selected / blue)
  4. click italic (bold button is now deselected, italics is now selected)
  5. type some text

Expected behavior: Both the Bold and Italic icons should be selected/highlighted/blue Text typed after selecting both bold and italic should be both bold and italic

Actual behavior: Only the Italic icon is selected Text typed after selecting both is just italic