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.
Related
I am trying to make an editor using contenteditible div(this div will show the rendered content but will also allow user to make changes by typing and other toolbar tools like bold, italic and so on), lets call this editor renditor, I also want to show the innerHTML of contenteditible div in another div for which I am using ace-editor for angular(https://github.com/fxmontigny/ng2-ace-editor) with mode html(lets call it coditor) but the problem I am facing is when I toggle from renditor to coditor(I take innerHTML of renditor div and plug it into coditor div) the renditor changes the look of innerHTML in its own mysterious way which results in overflows in coditor.
I have tried to use a pipe in angular with code provided from this answer (https://stackoverflow.com/a/43794051/4961540) but that even worsen the issue by breaking the html. I also feel renditor div is responsible for this because in past I didn't used separate div like coditor to show the code rather I just toggled in the same div using tags like pre and some other helper functions even then the html looked like it is looking now in coditor. Also it feels like renditor is responsible for it because I have observed when I set innerHTML of renditor to full html page source, it strips out html tags and some other tags so it is indeed making some changes to innerHTML and also how it looks.
<div class="mat-typography textBox editable" style="margin: 16px;"
[hidden]="isSourceVisible"
(input)="mSimpleTask.html=$event.target.innerHTML"contenteditable="true">
</div>
<div class="ace_tooltip" [hidden]="!isSourceVisible" ace-editor
[(text)]="mSimpleTask.html"
[mode]="'html'"
class="textBox ace-editor"
[theme]="'eclipse'"
[readOnly]="false"
[autoUpdateContent]="true"
[durationBeforeCallback]="1000"
(textChanged)="this.mSimpleTask.html=$event;"
style="overflow-wrap: break-word;margin: 16px">
</div>
I am looking to convert/extract innerHTML from renditor in such a way that html looks neat with proper line breaks and no overflows in coditor. Can you throw some light on how I can achieve that or even better if you can provide code with your implementation in the past ?
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>
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've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???
CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit
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/