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
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.
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'm looking for a web-based wysiwyg style editor, that is straight-forward to customize. I want to limit the options to just a few choices...
undo/redo, uppercase, lowercase, spellcheck, find, clipboard options, and only a few choices of style that I would like to be able to name and possibly write the code for. It will basically grab the text around the cursor (without having to necessarily select) and format it according to parts of a video script.
What is a good editor to do this with (easy points to customize), and is there any examples of possibly similar customizations being done like this already out there?
Try http://ckeditor.com/demo
It used to be called fckeditor earlier.
I want to know how to make a text area in a browser into a programmers text editor.
For anyone that uses textmate -- I basically want it web-based.
for anyone that uses notepad++ -- same idea as above.
I know how to make a text area
using html.
what I dont know is how to tag the text areas.
for instance. in notepad++ and textmade, I can insert the <> tags and it will highlight the text blue.
How can I achieve this, live, in a browser.
I already know how to parse it after the text has been posted.
I want it to be parsed while the user is typing it.
EditArea is pretty good.
In addition to EditArea there's CodeMirror and Mozilla's Bespin
EDIT: I misunderstood the question a little. Jump to ORIGINAL ANSWER if you are curious.
EDIT2: My answer is how to provide SYNTAX HIGHLIGHTING (what is specified in the question itself). Highlighting individual characters unrelated to the syntax requires trivial javascript. This is also distinct from 'auto format' which is commonly interpreted to mean 'adjust my indent levels so it all looks good'.
This is a difficult task, but not as impossible as it seems. Once again, TextMate comes to our rescue but in a different fashion.
In TextMate, open the bundle editor and look at the language definition for HTML. Those are regexes that process the document and assign a 'scope' to each piece.
'Simply' parse that language definition format into the various components, and then use the regexes themselves like TextMate does to assign a scope/color. Piece of cake, right? :)
I would personally start with the most lightweight open source rich text editor you can find, then hack it into that. Or ya know, whatever floats your boat.
I hope that gave you some good ideas.
ORIGINAL ANSWER:
For Firefox, you can install the plugin 'It's All Text' from here:
https://addons.mozilla.org/en-US/firefox/addon/4125/
It works for me with 3.6.12. Set the path in preferences to TextMate (or whatever), and optionally set a hotkey or adjust the other settings to your liking. Be default, when your cursor is over a Textarea, a small button saying "Edit" will appear and open the contents of the Textarea in your editor. Saving will put the data back into the Textarea.
I hope this helps.
JSMinNpp plugin just for javascript auto-formatting
http://sourceforge.net/projects/jsminnpp/