I understand that creating a WYSIWYG/Rich Text Editor is an absurd thing to do given the many different, annoying things that are required to achieve cross-browser support. The project I'm currently working on, however, requires a very very simple WYSIWYG editor (three options, link, bold and italics).
My question is then, am I going to spend as much time customizing and paring down TinyMCE to fit my requirements or is the task of creating my own a fairly simple one given the fact there's only three options (and nothing like text resize or undo/redo)?
Also, is the general consensus still iFrame and designMode or are we significantly far along the HTML5 train that I can go with contentEditable?
You have to ask yourself one question, do you feel lucky^H^H^H^H^H^H^H^H do you want to maintain said WYSIWYG editor?
Two years ago I thought this would be a good idea. I took the editor used here on stackoverflow. Threw away all the UI code and re-wrote the whole thing from the ground up, only saving the markdown parsing piece. And let me tell you, markdown is a whole lot simpler than HTML/WYSIWYG. The final javascript, UI only, is 1600+ lines of code and took about 2 weeks to write the first pass of full functionality.
I implemented it into the web app I was working on a the time and learned something real quick: I was now spending 50% of my time maintaining an editor and the other 50% of my time delivering code for the actual domain-specific part of the web app I was working on. That basically means I was spending half of my time not delivering anything that really contributed to the bottom line of the web app.
So how about you -- Is this WYSIWYG editor such a core, critical part of your app so much so that you'd be willing to now spend half of your time supporting it -OR- is the other bits that your web app is doing far exceed the importance of this one piece of your UI so much so that you could "farm it out" to TinyMCE?
Also, there are a lot more options out there besides TinyMCE which you could use as a starting point.
Related
so basically I want to show mathematical formulae etc. dynamically as an explanation tool on a little static website.
For example: have a matrix and a slider and animate the content of that matrix to contain the slider value plus the resulting determinant. (Basically I want to do stuff like 3b1b, but in a browser;)
I have already tinkered with the idea and tried to do first tests with MathJax, but its dynamic rendering capabilities are (as of my experience) severely limited.
Also I've failed to find a library specifically designed for this (most Maths libraries are focused on showing graphs and stuff, not maths text).
If anyone has an idea on how to (easily, I'm not a huge JS expert, sadly) implement this, I would be happy to hear it ;)
I have been working as a frontend developer for a couple of months now and have realized that alot of design components repeat itself between projects, an example is boxes. For almost every project I have done this far there has been boxes (productboxes, cta:s, staff etc.) and every time I spend an hour or two to build them from scratch. I could of course look through my old projects to se where I used a similar box before but looking through all the old repos for the best fit takes almost as long time as building from scratch. So my question is there is an application for storing snippets kind of like codepen / jsfiddle but with focus on sorting and tagging up the snippets. For example if I needed boxes I could go to boxes and all boxes I have added could be scrolled through on one page. I feel that both me and the designer could have use of this, especially in projects that have a tight schedule.
I have tried to Google it but I haven't been able the find the right keyword.
You may have a look at Fractal which is exactly what you need. With Fractal you can build your own HTML component library to re-use your components with a nice interface. It's worth to try it out.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
by simple I mean, having buttons:
bold,
italic,
numbered list
bullet point list
indent left
indent right
spell check (obviously supported by ready made js component)
by custom I mean: having custom icons - so really just custom design
no frameworks, written from scratch, lightweight, compatible with major browsers
this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks
Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.
Use one of the many available that allow customization:
tinymce,
fckeditor,
wysihat,
others
Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.
If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.
In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)
Where it gets tricky is if I have
<b>some text</b><i>more text</i>
and I decide to remove the tags from this text, then how to fix it will get tricky.
If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.
I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.
I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.
Don't.
Go get something else (any of those Jason mentioned, or e.g. what SO itself uses, WMD). Swap out its images. The end.
Seriously you don't want to write your own editor unless you have a very good reason for it functionally, not just what it looks like.
Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.
I am aware that Javascript WYSIWYG editors use the inbuilt editor mode of the browser to function, but that comes up with various problems and issues.
Can an editor be built from scratch in JS, something like what Buzzword people have done with flash/flex? I came across this blog post recently and I am just wondering if this can be built (atleast to a moderate extent) using Javascript?
It depends what you mean by "from scratch". Google Docs provides a pretty good text editor in JS. Is that what you mean ?
Of course you can do it and it is not very difficult.
But before reinventing the wheel please take a look at all the existing ones.
Many of them are really very well written and open source.
Almost anything can be done with JavaScript. You have the basic building tools right there - you can intercept all mouse events and nearly all keyboard events. You can use a GIF animation for simulating the caret. The trickier part might be measuring the size of text so that you can position your caret where you need to. I'm not exactly sure how you could do that. But if you figure that out, the rest is doable. Although it will really require tons of wheel-reinventing code.
Reminds me of a little experiment I did sometime back... I basically tried to create a primitive editor by simply listening to keypresses on a DIV and to insert them into the DIV as a new node. So imagine, each character would be wrapped in a tag! It actually worked. But, once it reaches a couple of paragraphs, node insertion and deletion becomes rather slow. You will type a character, and it would only appear after a slight delay, and this simply unacceptable, and eventually I just gave up. Anyway it was just a random thing I wanted to try out..
Coming back to your question, I wonder if this can be replicated in JS alone as frankly the flash has superior raw processing power compared to JS. Even if it's technically feasible, I doubt whether it will be fast enough to actually work well. My two cents!
Atwood's Law:
Any application that can be written in JavaScript, will eventually be
written in JavaScript.