Develop Reference

Highlight or underline search words in WordPress Editor

I have a plugin that warns users about certain words in their posts that maybe shouldn't be used. Currently, it simply lists these words at the bottom of the editor window while they're writing or editing their post.
What I would like is to highlight the offending words so they can easily find them (especially if they just pasted a large block of text). I found a couple jquery plugins (Highlight Textarea and Highlight Within Textarea) but neither of those seem to work in this case (probably due to the dynamic size of the textarea). Any ideas? Is there a way to do this through TinyMCE?
Googling it just brings up a bunch of answers on how to manually highlight text to be highlighted in your post. I want the opposite: an automatic highlighter that only highlights in the editor, not the post. Oh, and it should work on both the Visual and Text views...

This is not a complete answer with code, but it sounds like you should take a look at mark.js https://markjs.io/ and target the editor div in the post editor in WordPress.
mark.js is a text highlighter written in JavaScript. It can be used to
dynamically mark search terms or custom regular expressions and offers
you built-in options like diacritics support, separate word search,
custom synonyms, iframes support, custom filters, accuracy definition,
custom element, custom class name and more.
There are many examples on that page to work with.

Where and how do I start to make an online text editor like that of Quora?

I know a bit of jQuery and Javascript along with Django for the backend. I am interested in building an editor somewhat like the editor of Quora. I have read that their editor is made with a DIV whose content-editable property is set to True. However, I am confused as to what material to study in order to understand how it works with text formatting and media upload. Although I like Quora's editor the StackExchange editor is pretty nice too. I think I'm not gonna be able to implement something so advanced but I need to start somewhere.
In short, can anyone point me to an article or tutorial which deals with coders trying to make an editor from scratch or customize from open source?

contentEditable was added by Microsoft in IE5. This feature allow to change innerHTML of any element. good place to start would be MDN and many open-source implementation of wysiwyg widgets available on github.
Short explanation
Start with empty div.
Set contentEditable to true.
Add button that would act as emphasis functionality.
Learn about text selection.
If button clicked and text was selected, wrap that text with span tag with emphasis styling css (or class).
Profit.

JavaScript textarea editor with custom formatting rules

i need to implement simple text editor with custom (probably dynamic) rules. For example, if user change text somehow i want to run regex (or callback method or something else) on this text and apply formatting for it. For ex all ip addresses in text should have red color, names from specified range - black, all words starting from "abc" - green.
So basically what i need is:
- simple text editor based on text area
- ability so add rules applying to text withing text area
I reviewed a lot of related resources and didn't found any simple solution yet. As for now I've started to implement my own editor with using of contenteditable attribute and JQuery.
I never wrote such functionality before, so could you please point me to the right direction? Maybe i can use already implemented tools or specific strategy?
Thanks a lot.

Maybe it would be useful for someone.
After a bit of investigation at first i tried to use jQuery Highlight Plugin, but it does not cover my all of needs so i used Codemirror editor, which i found very nice and customizable.
I wrote my custom mode and it's working perfectly.
As start point i used this article

how to apply style to some text content in textarea in angular

I am trying to create a spell checker for my website using bjspell .Now I want to underline words in textarea that are misspelled.Textarea by default does not support styling specific text.One solution that I thought of was to create divs to replace the textareas but that is not a recommended solution.As this spellchecker needs to be reusable across sites.So I am looking for some alternative where though my content is in textarea.But, it should be possible to style it(just like how it works in firefox).
I have thought of creating a directive for it .It would be applied to textarea for the transformation but I am not getting how it would be done.
There is some help I found in this question (Underlining text of a textarea) but since angular does not recommend dom manipualtion like the one in this question's answer I dont know how to proceed.

Paragraph indent in textarea with CSS or JS

You have some web-site with text area in it, example I'm using - http://writer.bighugelabs.com, it is a really neat tool to write texts in, but I have one issue with it - paragraphs in textarea are not indented from each other.
So is it possible to overwrite some CSS properties to get paragraph indent when visiting this site using StyleBot for Chrome as example and what properties? If not possible, then would it be possible with similar extension which can apply custom JS on the page?
Please advice, I've searched for the topic, but didn't quite find the information. I tried to override p margin and padding properties, but with no success as I understand textarea has just a raw text.
Thank you in advance.

Since the text area on the page is really an HTML textarea, you cannot style paragraphs inside it in CSS. There no paragraphs as elements there, just plain text, which may contain line breaks. Modern pages with embedded editor utilities tend to use editable div elements instead of textarea elements, which are rather inflexible.
You could simulate paragraph indents using JavaScript code that inserts one or two no-break spaces after each line break.