<div contentEditable="true"> <b>Bold</b>normal<i>italic</i> </div>
  • If we try to enter something before the Bold , then the entered characters will be bold. However, if we type something in front of the letter i italic , the entered characters will not be italic.
  • If we enter something after Bold or italic , then the characters will have the appropriate form.

Style delimitation in WYSIWYG-editing is a separate non-trivial task that is not normally solved even in Word. In this question, it is enough to ensure that before a word with a different style and after it, the input is carried out by the main style (that is, NOT bold and NOT italic). In other words, in this example, it is enough that the characters entered are non-italic and non-fat, if we enter the character:

  • Is before or after the word Bold
  • Between the words Bold and italic
  • after the word italic

What approaches to solving this problem can be offered? From third-party libraries, only jQuery allowed.

    0