Is it possible to do this? I haven't been able to find anything in the documenation that says you CAN'T do it, but the following selector is not working for me:
Cufon.set('fontFamily', 'Museo');
Cufon.set('fontWeight', '300');
Cufon.replace('input.text, input.password, textarea');
Any ideas, or does Cufon simply not support this?
Thanks.
I would strongly advise against it. You would end up introducing tons of usability issues in your site (i.e. no copy/paste and backspace issues). Cufon has it's place in this world, but not on dynamically user edited text.
You would also introduce alot of "jump" behavior into your site since Cufon's JavaScript blocks in the browser until it has all of the required text replaced. This would break the flow of content up in your site.
Related
If you type a spelling mistake in a textarea, most browsers will alert you by highlighting the word somehow, for example, underlining it in red. Is this style change visible to JavaScript? If so, how?
It is not. As far as I know, browsers do not add this functionality to javascript. Even if they did it would probably be highly variable from browser to browser, especially mobile browser. It's possible that the spell correction could be part of the Web Browser Framework, rather than the DOM. It is, in fact, possible to disable spell check on text fields and then implement your own in its place. I know a lot of embedded code editors do this.
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
Here is the demo:
http://www.kevinroth.com/rte/demo.htm
when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in
As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:
document.designMode
Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.
From what I can tell, the demo you linked and TinyMCE uses this method.
contenteditable
The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.
Here is a demo of it: http://html5demos.com/contenteditable
Notes
Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
As I say I have done limited research on this, so please help me correct any errors :)
In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. E.g. if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..
Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.
In a previous post that I posted here, I got responses that contentEditable and designMode are bad practices. So I switched to TinyMCE, but that uses designMode as well... is there something bad about it?
Im using it for a Rich Text editor on my website fyi.
They were trying to tell you not to re-invent the wheel.
If you're using designMode, you probably want either a rich text editor (with toolbars) or a syntax-highlighting code editor.
In either case, you should reuse existing libraries rather than re-creating them from scratch. (Rich text editors are hard, especially across browsers)
I am after a JavaScript Rich Text Editor that supports highlighting words and triggering events when those highlighted words are clicked, like what Gmail does when in spellcheck mode.
I will need to heavily customize any existing solution, so something that is easy to extend would be ideal. Currently I am leaning towards TinyMCE.
Richtextbox or HTML?
If it is HTML, then you should stick with TinyMCE. :
It's (very) easy to integrate
It works across browsers
The toolbars were easy to modify
Wordpress uses it!
For what its worth, we also looked at FCKEditor but preferred TinyMCE
UPDATE: While some users wanted it, spell checking has never been on the "essentials" list. It has always been quicker / cheaper for us to teach the handful of users how to use the spell checking features of IE, Firefox or Chrome instead of putting it in the editor.
Imagine trying to code the 3 been soup example!!!
TinyMCE seems to be the best one these days. You might want to take a look at FCKEditor and HTMLArea as well. You can find a list of such WYSIWYG HTML editors here.