I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.
There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.
The simplest way is to use the <textarea> tag in HTML. See this link too.
You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js
Related
I am looking for a rich text editor that allows for code highlighting. I have worked on a BB-code system myself, and seeing as this topic turned out without any replies, I have not found a way (after countless of hours of searching) how to solve this. Therefore, I am bound to use an existing rich text editor, but it is important that it has the ability to add code snippets.
I am looking for a JavaScript or jQuery based one, since my server does not run ASP (or many other languages unfortunately).
Before I will get the reply "sigh repost", I have spend hours of searching and on topics regarding rich text editors, there were not any suggestions that have the ability to add code snippets, or they are using ASP. Therefore, my question is not a repost, so please don't bother commenting these replies!
If there are not any available, is there any way I can easily implement for example Alex Gorbatchev's Syntax Highlighter into a simple rich text editor? Or perhaps any other? If so, how would I go about doing this?
Basically, I am looking for a way to do something similar as the rich text box used on Stack Overflow (with code snippet syntaxing).
Thanks!
PS. If it is unclear what I am questioning, please refer to this topic, that might make things more clear.
I need a textarea that looks more like an programing environment, like notepad++. Basically, all I want is to insert TABs and keeps the cursor in the same indenting level as the previous line.
Any help on building my own would be greatly apreciated as well (my javascript/jquery skills are very basic).
thanks (:
Code Mirror would be a great option, it's easy to use with your skills.
You can also check this Wikipedia post for more information. http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
Good luck ;)
Take a look at this link which will help you decide which editor to use based on your requirement. It has provided wide variety of JavaScript based editors with support for various browsers.
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
You can try this plugin for TABs http://teddevito.com/demos/textarea.html
What I am talking about is similar to what Google Docs did with the word processor. I want to be able to enter text without using a <textarea> but the javascript hard coding it in. How would you do this? Any ideas?
I don't think it's possible but You can you an modify textarea itself using CSS so the user will not feel that this is actually text area is. I believe that this is what Google docs are doing. Just good CSS work.
In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.
If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.
Basically, you use contentEditable and execCommand to turn the browser into an RTE.
document.getElementById('edit').contentDocument.designMode = "on";
Have a look at http://www.mozilla.org/editor/ie2midas.html
There is http://www.gosu.pl/steditor/ which code is quite simple and clear. It uses designMode and execCommand as was mentioned in other answers.
Alternatively use simple languages like markdown or textile and provide a live preview.
I think most people will get asterisks for emphasis and double ones for bolding.
I've used YUI's wysiwyg editor in the past and it lets you configure the the buttons so you could easily use it and limit the buttons to bold/italic/underline.
What are the options for something that will let users make text bold/italic/underline/etc as they are writing in a textarea and work in all browsers?
Give a look to FKCEditor, I always recommend it...
I always liked TinyMCE
http://tinymce.moxiecode.com/
I favor the Rich Text Editor in the YUI
I've used InnovaStudio WYSIWYG. Pretty extensible and cheap.
FCKEditor is a popular choice, although it's incredibly bloated. There's a nice simple example in jQuery jQuery Plugins
I wrote my own in the end as I wanted to customise the editor quite a lot. It's not too difficult to do and typically involves popping an iframe on the page, setting the contenteditable to be true and then using a simple javascript command to update the html of the iframe.