I am trying to build a specialized WYSIWYG text editor in the browser, and have a very limited set of functionality, but the biggest part of that is wrapping certain text in span tags.
I can find many resources explaining standard stuff (execCommand and whatnot), but have looked and looked and can't find anything to do what I need.
Basically, it's as simple as it sounds: user selects some text, clicks a button or whatever, and the text gets replaced with some other text (the initial case is that same text wrapped in some HTML tags).
I can find ways to do this in a textarea, but I'm just in regular HTML land, with the content in question inside a div with contentEditable marked as true.
I have also found ways to replace all occurences of text, or the first occurence, but not a specific one. Most solutions I find fail when trying to replace anything but the first occurence.
I'm hoping jQuery can do this in some way.
Have you tried the jQuery wrapSelection plugin?
This is pretty similar to this question. It might help.
Related
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
I am trying to write a function that prints a certain text into a <div id="1"> tag.
The string should mark certain index values in different color.
What I have written now is to go to all the index values I have and add a <font color="color"> tag, and then I add it using div1.innerHTML = result;
Its a lot of work, and its very complicated. Is there another way that I can create a string
object like I've described without these HTML tags?
If I can do that then I would just use div1.appendChild(String);
I generally am loathe to recommend that anybody use a library that they don't already claim to use, but this is one of those times where the question almost directly asks for a library as an answer :-)
Check out Lettering.JS. It was designed to do exactly what you describe. It wraps your text content by letter or by word or by line (I think) in <span> tags, under your control. You then use CSS to style elements, or some more JavaScript to manipulate and style the elements it creates for you.
if what your looking for is a syntax coloring, you can try this jQuery plugin.
http://www.steamdev.com/snippet/
Is there any JS function that can change the color of certain text in a textarea?
For example, blar blar {blar} blar, {blar}, including { }, will be in blue. Other words will be in blank. In other words, all I need is a function that can change color of all text in { }.
I've done some studies and it seems that most people say it can't be done. But I'm seeing rich text editors or those wysiwyg editors having the ability to bold or underline words. There must be a way to do it.
Any suggestion is welcome.
No one mentioned contentEditable?
Just make a contentEditable div and use javascript to style it.
I reccommend you to look into the Dojo Toolkit's.
It has a Editor widget.
Other resources:
Some contentEditable problems in IE.
How to use contentEditable with jQuery or without it.
wysiwig-editors are using iframes instead of textareas. Textareas are very little customizable, since what you're after is changing part of the content. You can't add tags inside a textarea, which makes it impossible to only change part of the text.
If you look at the editor here in SO, you write normal text inside a textarea, and it is then transformed in the box below it, so you'll see the asterix inside the textbox, but in the box below, it'll transform special characters by regexing them with tags.
If you're using firebug, you can start writing inside the editor, while looking at the HTML in the preview-box.
you can't use a textarea to do that, per se.
But, javascript is your friend. Perhaps you should take a look at the code of a few rich text editors.
You could start with lwrte, since it says its "lightweight". Also, its written in jquery so it will be pretty easy to undertand. (and I'm a jquery fanboy).
Hope that helps,
jrh
I Think You will need to use execCommand method of javascript it controls many thing such this stuff of changing specifc textcolor
Regards
But some Jquery WYSIWYG editors do this ! How is that possible ? See this editor lwrte
I'm working on a new project and i want to do something similar (somehow) to intellitext ads (without popup though). In fact, i want to add links on certain words. The problem is that i don't know how to handle this.
I mean, ok, i get document.innerHTML then what? I can find any word, but some may be inside of tags. I don't want to replace words from textarea or text inside of a link. Same for input, select, and so on.
Also, the way i've managed things, i replace even the html tags (if the word is select for example, the script will replace <select> tag. And i really don't want this :P
So, any idea? Where to start ? What to do? Anything?
I wish a solution that works without any library, or, if is mandatory, to work with jquery (this is what i know).
I think that some regexp may help. The problem is... I never understand them :s
Any help will be appreciated. Thanks a lot!
jQuery does this already!
Just use .text() to get all the text underneath. Documentation and examples are here.