JQuery - how to addClass only to item where cursor is at in textarea (Froala rich text editor)

Posted in CategoryGeneral Discussion
  • Terry Ogbemudia 2 months ago
    If I were you I will look at the deceleration of that function so I can get a bettter understanding 
  • Hder 2 months ago

    Found the solution on the Froala website (the rich text editor I'm using).  They seem to have a custom function (think that's what it is) paragraphStyle.  Used in a callback function as follows did the trick, where 'big' is a CSS style.  

            callback: function () {

                this.paragraphStyle.apply('big')

            }

  • Terry Ogbemudia 2 months ago

    Show me a snapshot

  • Hder 2 months ago

    Yes, I meant the text beside the blinking cursor.  The idea is to make a change to the class of the element by the cursor, NOT where the mouse is at.  It would be like this Rich Text Editor you have on your website.  When you place the blinking cursor on a string of text and click to change the style to H1, then that element changes to H1 style.

    Don't know if there is a method in jQuery or JavaScript where you can select where the blinking cursor is and NOT where the mouse pointer is.

  • Terry Ogbemudia 2 months ago
    Just so I'm clear do you mean the text beside the cursor?
  • Terry Ogbemudia 2 months ago
    Use onmouse event for the element, do you know how to do that?
  • Hder 3 months ago

    I have a custom button in Froala (rich text editor like tinyMCE) that initiates a callback routine.

    I want this button to addClass 'big' to the element where the cursor is blinking on in the text editor.  I have tested and I can change the class for all components with

    by the code below:

            callback: function () {

                  $('p').addClass('big');

            }

    But what I really want is to change the class ONLY for the element that the cursor is at, NOT ALL the

    elements.  so I tried the code below:

            callback: function () {

                  $(this).addClass('big');

            }

    Thought it would work, but it doesn't.  Nothing gets changed.  Can you help me to figure how to correct this code so the class only changes for the element the cursor is at?

    Thanks in advance!

Please login or register to leave a response.