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)
I know a bit of jQuery and Javascript along with Django for the backend. I am interested in building an editor somewhat like the editor of Quora. I have read that their editor is made with a DIV whose content-editable property is set to True. However, I am confused as to what material to study in order to understand how it works with text formatting and media upload. Although I like Quora's editor the StackExchange editor is pretty nice too. I think I'm not gonna be able to implement something so advanced but I need to start somewhere.
In short, can anyone point me to an article or tutorial which deals with coders trying to make an editor from scratch or customize from open source?
contentEditable was added by Microsoft in IE5. This feature allow to change innerHTML of any element. good place to start would be MDN and many open-source implementation of wysiwyg widgets available on github.
Short explanation
Start with empty div.
Set contentEditable to true.
Add button that would act as emphasis functionality.
Learn about text selection.
If button clicked and text was selected, wrap that text with span tag with emphasis styling css (or class).
Profit.
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
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.
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.