I need to make a text editor for my site. Here are a few questions that I have:
How can I retrieve the row selected in the text area using JavaScript?
How can I style the first line of the text without styling all rows the same?
Here is an example of what I need:
<textarea>
<span class='center_align'>Hello world</span>
<span class='left_align'>This is a nice paragraph aligned to the left.</span>
</textarea>
I know <textarea> reads HTML into its input, but how would I go about to style this?
Sounds like you need a Rich Text Editor: try TinyMCE (as used by WordPress): http://www.tinymce.com/
Related
My skills in Javascript are limited and for practicing i'm trying to programatically fill some elements using JS code, using Chrome's Developer Tools. I navigate to a site, access the console and try to manipulate DOM elements using JS code.
Usually elements a user can input data are INPUT, TEXTAREA , SELECT and so on. But latelly i've been seeing elements that are user-editable, but are simply DIVs. In other words, a DIV acting like an INPUT or TEXTAREA, and this got me confused.
Here is an example : i extracted this source from a page to post topics in a Facebook Group.
Note that the div that has the 'Write something' innerhtml works as a textarea in the page. You can reproduce this code in any Facebook Group, ie https://www.facebook.com/groups/914737511952904/ (you might need to join the group before see the box to post a topic).
<div class="_1mwp _1mwq _5bu_ _5yk1"><div class="_5yk2" tabindex="-2">
<div class="_5rp7">
<div class="_1p1t">
<div class="_1p1v" id="placeholder- 2bc29">Write something... </div>
</div>
</div>
</div>
If this element was a TEXTAREA, i could easily do something like
document.getElementById('elementId').value = 'New text';
But the 'textarea' element in the above case is actually a DIV and nothing else.
How can i insert text on it using JS ? An how can a DIV act like a textarea or an input ?
Thanks !
How can I insert text on it using JS?
That's quite simple. Just use the innerHTML property to assign the text value.
document.getElementById('elementId').innerHTML = "Text inserted"
However you can do the same using just CSS, and then retrieving the text from the div invoking the same property.
How can a DIV act like a textarea or an input?
A very practical way is using the contentEditable property over the div, but you can use CSS styles as well, and in some cases with some JavaScript code.
You have a simple example here using CSS styles and contentEditable property:
https://jsfiddle.net/ThinkingStiff/AbKTQ/
How can I insert text on it using JS?
element.textContent = "text content"
SNIPPET 1
var div = document.querySelector('div');
div.textContent = "line of text by textContent"
<div></div>
An how can a DIV act like a textarea or an input?
You can add contneteditable to an element that's not originally editable.
<div contenteditable></div>
See Snippet on how to set contenteditable by JS
SNIPPET 2
var editor = document.querySelector('div');
editor.setAttribute('contenteditable', true);
<div>This is a div. Click on me and start typing.</div>
What is the best way to style up content in the HTML textarea element. My goal is to have parts of text in my textarea red (for example), so I would do <span style="color: red">My text part</span> but this way the textarea shows everything including my HTML code <span> ... </span> as its value.
Next thing I tried is to overlay div with my textarea in which would be my desired code width <span> ... </span> code shown correctly with red styled text and without HTML code. User will edit textarea's value which would be processed and shown in my div. But this method seems to me too dirty. What is your advises?
Styling text inside a textarea is not possible, you can check this. You could use a plugin like TinyMCE, which will show a text editor in the place of your textarea, and there you can put the style that you want to the text.
I'm writing an html editor control.
I want to change css attributes of selected text of the content.
I get the selectedcontent by window.getSelection();
What is the best way to make bold selected text, and to understand selected text is bold then to make it normal.
Replace with required tags doesn't work. Since similar texts can be in content.
It looks quite complicated to me.
I'm looking for the best practise to do it.
Try this sample snippet
You can make bold as selected text via "document.execCommand('bold');"
Html
<div contenteditable="true" class="textEditor">Text1.
Text2.
Text3.
Text4.
Hi, this is text of some kind
Lorem ipsum...
</div>
Jquery
Catch selection change event by jquery-selectionchange event.
Make bold and normal by document.execCommand('bold');
$(document).on('selectionchange', function(e) {
document.execCommand('bold');
});
JsFIddle:
http://jsfiddle.net/XCb95/132/
I am trying to have a textarea that can have some simple styling like spans in a paragraph. But the problem is that no html tags are allowed in textarea. So what should I do to have a textarea that can have some simple styling like coloring a sentence?
Use some RichText editor controls. There are many free ones available.
http://ckeditor.com/
http://www.tinymce.com/
More items in this links
1) http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
2) http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'
I would like the 'Te' to be bold and then have the 'st' be regular.
It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.
Any ideas on how this might be accomplished?
Don't think it is possible (will do some more test).
What about adding a contenteditable div which looks like a input?
Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/
EDIT
Nopez not possible. :)
You should take a look at how HTML WYSIWYG editors are build.
Basically, they
hide the input field and display another html element with the styled content:
Highlight text as you type on textarea
or
use design mode in html:
javascript Rich Text Editors
both ways are not trivial...
If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.
The best you can do is use :first-letter
But As you can see it does not work on <input />
No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.
However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this.
Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:
<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->
No kiddin.