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.
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 want to add the ability to use table, bold, paragraph, headings, images and bullets in a text area. How do I achieve this?
i.e. like we get input box in wordpress when we want to publish page.
or
Input box like stack over flow. Now i have options of making text bold, rich, images and many more.
I want the same kind of box.
Please tell me how can I?
Thank you
This is typically solved using a Javascript library. There are many javascript libraries that enable this. An example of a popular one is a javascript library named TinyMCE. They all have clear documentation on how to use them. (No need to repeat instructions here)
https://www.tinymce.com/
#ravisachaniya recommends CKEditor
use tinymce it has a lot more options than you need but you can customize it to your needs https://www.tinymce.com/
You can use CKEditor, i hope solve your isseu
http://ckeditor.com/demo
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
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/
I dont know whether I am reiventing the wheel.
I need to design an online WYSIWYG where users can make one/two/three-column layout page.The WYSIWYG should adjactly show the contents in design mode as well as preview mode.Therefore, the WYSIWYG should also have the supports for Header and Footer too.Therefore, the WYSIWYG will have at least three boxes(Header, Content,Footer) and in max it may contain six boxes.
IFRAME supports designmode (on/off) and it has content editable property and it also supported by most browsers. Though DIV also has the content editable properly in the latest browsers. Since there are many users who use IE6 still, probably choosing IFRAME is better(need your kind advice).
Now the question is whether I should use 6 IFrames or only one Ifrmae or no Iframe at all? Please suggest.
Thanks.
It sounds to me like you are trying to reinvent the wheel. You should be able to use one of the existing WYSIWYG editors with template support built-in. So I'd suggest you have a look at CKEditor, which probably has all the features you need.
Choose whatever existing editor that you like, but don't try to recreate one yourself, you'll become crazy.
I don't even know what do you understand as different between WYSIWYG and "Rich Text Editor", the main difference might be that no web-based editor can be really "What You Get", because there are lots of little problems.
Anyway, it seems that you want to create a page with one toolbar and several editing instances, I think that all the main editors does support that, but I would avoid using one based on a framework (YUI or Google closure) unless you are already using that framework.
Check instead the features of stand alone editors like CKEditor or TinyMCE. You'll hardly get anything better that those ones.
Don't reinvent the wheel! If you decide that you need to support designmode iframes as well as contenteditable, Google Closure Editor has a very performant implementation of multiple editing surfaces that only creates one iframe at a time.
I would look at YUI Editor from Yahoo, The YUI stuff does support a drag and drop column editing. I would say reuse in this case.
EDIT: Since you say you want to edit multiple areas per page you should also check out the YUI Editor's Multi edit example page