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.
Related
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.
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.
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 can I do some manipulations with the text in a TextBox on resize in Adobe InDesign CS5?
The main goal is too split the last word on every row to achieve something like a custom hyphenation.
Is it possible using JavaScript (or ExtendScript?) ?
Thanks.
UPDATE
I've tried to describe my problem in comments
I need an example on ExtendScript, which would find textbox dimensions and hyphenate the text according to dimension and after I'd like to create an event on textbox resize, which would do the same thing after every resize.
You'll probably be able to write a script to do what you want, but the functionality is already built into InDesign.
If I understand your problem correctly it's InDesign does not hyphenate Armenian properly? You can insert manual hyphenationsin the text using the text tool and pressing 'Ctrl'+'-' where you want the hyphen in the text. Unfortunately you'll have to do that everytime you resize the box, because the words will move around - which is probably the problem you're having.
You can set the language in InDesign in the Character tab (shortcut is 'Ctrl'+'t') and upload custom dictionaries/word lists with rules specific to your language including rules for spelling and hyphenation. Unfortunately I couldn't find Armenian in my short search, but perhaps you're more lucky.
Check out the link for more details:
http://help.adobe.com/en_US/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6f4da.html
I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');