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
Related
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
Calling CKEditor gurus to this question. I have a need to make only certain areas within my textbox readonly. These areas will be text and image URLS that will be enclosed by a span tag with a predefined class type. I have checked the documentation but cant seem to find anything that will help me accomplish this. They all make the entire textbox go read only.
I have heard that there are hacks that can make this work, but Im not sure which way to go about doing it. I am fairly new to this, so please bear with me if my question seems absurd.
Thanks for any help..
Use widgets.
Take a look on some samples first and then focus on Placeholder plugin (based on widgets), which does pretty much what you'd like to have. You can either customize it or create something new, referring to existing code and official guides.
Note: You need CKEditor 4.3+.
The tip text which highlighted in below image serves wells for giving some instruction to first time user. And I notice such pattern several times in different web apps, I guess there must be some javascript libraries to help generating such tip visualize? But I just fail to find the correct keywords to capture them. Any one give some suggestions please?
[1]: http://farm7.static.flickr.com/6071/6031668602_9c7fcf70be_m.jpg ""
------------------updated----------------
Thx for the suggestions for recommending jquery tooltip plugins.
But other than tooltip widgets, what this questions requests is a more specified “tip plugin” which could be used to generate a transparent tip image which contains simply some words in casual font and an arrow points to parent context. Yes, this is a tooltip but not a ordinary tooltip which comes in the form of a box or bubble.
Traditional tooltip are useful for displaying detail info on the fly, while the tip I mean here performs better to attract attentions to user for providing some quick tutorial instructions without adding too much visual noises**
You can try this: http://codylindley.com/blogstuff/js/jtip/
This plugin is great for tooltips in jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Demos are available here.
You are looking for some sort of tooltip plugin. Here are a few http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
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.
Is it possible to have a HTML Select containing elements, not just text values but say an object (specifically i'd like to add a JQuery slider with the text) but if someone could advice me generally how to do this, i could investigate.
No, definitely not. The default select element is rendered by the browser and can not be extended beyond its standard behaviour.
You would need to look into entirely JavaScript-powered SELECT alternatives.
Here's a small list of jQuery based SELECT alternatives; there are many, many more.
If you want to do this, don't use an HTML select element. Use a div or whatever, and implement the whole thing in javascript. Then you can add whatever functionality you like.