Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to build a comment system and it just came to realization. Text area cannot be formatted meaning no paragraphs, line breaks etc can be retained. I know stackoverflow uses a text editor instead of text area but on sites such as Reddit, it is just a plain textarea.
Is formatting the value of textarea being done with javascript?
Let's make a few things clear. A textarea is simply that; a "text area". It holds plain text, and for the record, a textarea DOES retain line breaks. But you are correct; it has no functionality beyond that. No styling, it doesn't automatically insert paragraph tags, or have any further advanced functionality you sound like you are looking for.
It sounds to me like what you are looking for a web-based WYSIWYG (what you see is what you get) editor. Something to give simple functions like bold text, maybe indentation/text aligning buttons, and so forth. The two most popular/well-known ones are CK Editor and Tiny MCE, both of which utilize Javascript to run:
https://ckeditor.com/
https://www.tinymce.com/
TinyMCE is the simplest. They have CDN's with their libraries so all you have to do is copy and paste a few lines of code to get it to work. Both libraries come with plugins, both free and premium, which offer advanced functionality like image uploading and etc.
Your second approach; as of HTML 5, HTML elements can now use the contenteditable attribute which allows the HTML content in a webpage to become editable. You can create a div/element and manipulate those elements to have styling. This approach has a few pitfalls, the biggest being compatiblity for older browsers and second, posting that data to other web pages, which forces the use of Javascript to copy the content of the HTML element to a hidden input or textarea.
This person (whom I believe came from this site) developed a useful WYSIWYG editor for going the contenteditable approach:
http://habibhadi.com/lab/easyeditor/
In textarea values, the line breaks are marked with the EOL character (/r, /n or /r/n). Those characters do not have any visual impact on HTML (only in the source). What you want is to make them visible by replacing them with <br/> or <p></p>
Your best bet is to replace those characters when displaying the text, so your user won't see the tags if they edit their comments.
This, with some more options like adding <b></b> and <i></i> when text is surrounded by single or double asterisks ( * ) would give you a fairly close formatting to stackoverflow, which does use a textarea unlike you believe.
EDIT: Like suggested by others, there exists WYSIWYG (What You See Is What You Get) editors which means the user sees exactly the result of his comment, and can edit the styles just as if they were in Microsoft Word or similar. This approach might be fine, but it is way overkill for comments. Reddit and stackoverflow allows to see a PREVIEW of your content before posting, but they do not allow to see, while typing, the live results. 2 solutions, both work, you just need to choose the one you think would be best for your users.
Also, when using a simple textarea, you might want to look at markdown, you could provide markdown support (which is very close to how we format our text here) that way some people won't even need to (re)learn how to format their text on your site, as it is the same as other sites / tools.
EDIT2:
Here is a fast/basic implementation of 4 styling applications: single line-break, double line-break to paragraph, double asterisk to make bold, single asterisk to make italic.
$("#editor").on('keyup', function(e) {
var input = $(e.target).val();
input = input.replace(/[\n]{2}/, '</p><p>');
input = input.replace(/[\n]{1}/, '<br/>');
input = input.replace(/\*\*(.+)\*\*/, '<strong>$1</strong>');
input = input.replace(/\*(.+)\*/, '<em>$1</em>');
$('#result').html('<p>' + input + '</p>');
});
#result {
border: 1px solid #777;
background-color: #CCC;
}
#editor{
width:100%;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="editor">
</textarea>
<div id="result">
</div>
If you want advanced formatting, such as <em> and <strong>, you'll want to use an element (most likely a <div>) with the contenteditable attribute enabled. Example:
<div contenteditable><em>Hello</em> <strong>world</strong></div>
To make a user interface to allow the user to format the text, see:
Get caret position in contenteditable div
HTML Formatting (w3schools)
Related
So, I am creating a program that will take an uploaded text file, read its text and highlight certain things (through injecting <span> with specific classes) into the file and display on a webpage. What I am having trouble with is how I can show these results.
I was initially using <textarea>, but I found that apparently, it does not recognize those <span> tags I have injected, so it just displayed as plain text. I tried using other approaches like <p> or <span> or <article> but it seems that all of those other ones will either
remove spaces accordingly (the text file uses a ton of spaces to format the text too and that needs to be retained), or
it will not recognize multi-line strings
So, some may suggest that perhaps I can simply inject a <br/> tag at all line breaks, which is a viable option for sure. The problem with the spaces that are truncated still remains if I do that. Not to mention that the tags will mess up a lot of my <span> formatting injection that I was trying to do, which relies on regex currently but that's at least doable.
What would be the best way to overcome this problem? Is there an obscure tag that will work best for the purpose here? Or what you be my best course moving forward?
Just use a <div> and convert all the space characters to if you really want to retain them (although it kind of goes against the way HTML is intended to work, but it's up to you).
And and all the newline characters need to be converted to <br/> - again the way HTML does layout is completely different to how a text file does it.
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 am trying to create a spell checker for my website using bjspell .Now I want to underline words in textarea that are misspelled.Textarea by default does not support styling specific text.One solution that I thought of was to create divs to replace the textareas but that is not a recommended solution.As this spellchecker needs to be reusable across sites.So I am looking for some alternative where though my content is in textarea.But, it should be possible to style it(just like how it works in firefox).
I have thought of creating a directive for it .It would be applied to textarea for the transformation but I am not getting how it would be done.
There is some help I found in this question (Underlining text of a textarea) but since angular does not recommend dom manipualtion like the one in this question's answer I dont know how to proceed.
You have some web-site with text area in it, example I'm using - http://writer.bighugelabs.com, it is a really neat tool to write texts in, but I have one issue with it - paragraphs in textarea are not indented from each other.
So is it possible to overwrite some CSS properties to get paragraph indent when visiting this site using StyleBot for Chrome as example and what properties? If not possible, then would it be possible with similar extension which can apply custom JS on the page?
Please advice, I've searched for the topic, but didn't quite find the information. I tried to override p margin and padding properties, but with no success as I understand textarea has just a raw text.
Thank you in advance.
Since the text area on the page is really an HTML textarea, you cannot style paragraphs inside it in CSS. There no paragraphs as elements there, just plain text, which may contain line breaks. Modern pages with embedded editor utilities tend to use editable div elements instead of textarea elements, which are rather inflexible.
You could simulate paragraph indents using JavaScript code that inserts one or two no-break spaces after each line break.
I'm looking for a way to apply some formatting to a single-line text input field in JavaScript. It would work like this:
The user types in a formula, such as:
(7 + 3) ^ x
As the user types, my code would format it using colour to look like this:
I can do the necessary parsing but I don't know how to apply these styles to the user's text as they edit.
I've been struggling to find the right thing to Google for. My searches mostly lead me to full-blown text editors.
Is there such a component? If not, can I achieve this with a <input type="text"...> field?
Out of curiosity I built this: http://jsfiddle.net/hunter/npbDL/
This catches key strokes and inserts a span-wrapped character into an element. If the character maps to an item in the character-to-class collection it also gives that span the class specified.
It also handles enter and backspace.
You can probably take it from there...
I think the only way you can achieve the styling you want is by wrapping HTML tags around individual characters then styling the tags, and I don’t think you can do that inside an <input type="text">.
There is the widely-supported contenteditable attribute which makes most elements editable, but I’m not sure that it allows this either. If no-one else provides a better answer, you might want to view source on the last example here: http://www.hyperwrite.com/Articles/contenteditable.aspx
You can't format a text field with various colors. You might be able to use colors in WYSIWYG editors... or Flash.
I don't think you can change of individual characters in any <input> nor <textarea>. Look into source code of Etherpad for example - it uses similar system (not exactly the same - it highlights other stuff) and it might help you.