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.
Related
I am working on a WYSIWYG editor. As it has to include just some basic functions I want to do it myself and avoid problems. Now it is working perfectly but I want to add a functionality in order to unbold, unitalic...
I know that with execCommand it is an automatic thing, but it does not work in the same way in all browsers so... my idea was the next: When pressing BOLD button, check the environment of the string, and...
If the selection is Between the open and close <b> tags, like <b>ab||selected||cd</b> replace selected with </b>selected<b>.
If the selection starts or finishes with the <b> tag, like <b>ab||selected||</b> replace it by </b>selected<b> (and then strip out all <b></b> groups.)
If the selection starts and finishes with the <b> tag, like <b>||selected||</b> replace it by </b>selected<b> (and then strip out all <b></b> groups.)
But... how can I get into a var the <b>content</b> string when just having the caret/selection IN content? It might be possible...
UPDATE
It is curious that the replacement is always the same. So, should I really get what I am asking for, or just replace it in this way, always?
I am working on a WYSIWYG editor. As it has to include just some basic
functions I want to do it myself and avoid problems. Now it is working
perfectly but I want to add a functionality in order to unbold,
unitalic...
Do not write your own WYSIWYG editor.
Do you really want to "avoid problems"? Then use one of existing good editors (there're only 2... maybe 3 in fact). Creating editor is extremely hard task for which you need a lot of time (I mean... few years), a lot of knowledge and patience (a lot of too :P).
I can myself write that "I am working on a WYSIWYG editor". For more than half of the year I'm a core developer of one of these "good editors". And during this period I implemented only one feature - very important and very complex, but one of tens/hundreds of them.
That problem you have... I don't even want to start answering. It sounds like a piece of cake, but it isn't. It's a piece of brick that can kill you when fall on your head :). I'll only start enumerating important parts of the impl: Selection + range implementations, because native differ and are buggy (~5k LOC + min Nk LOC for tests). Then you need the proper styles handling (applying and removing) impl (min 1k LOC + tests), because you have to take care about styles spanning on many blocks (like entire table bolded) and different selections containing parts or entire styles etc. And you have to avoid native execCommand, because they will break your content. Then you should also think about updating toolbar buttons states and, to make your impl bullet proof, handling different style tags (e.g. pasted). And that's only the tip of an iceberg - you'll have styles handling, but hundreds of other things broken. Things that big editors have fixed.
Anyway - learn config options for one of main editors and customize it as you want. This will take you a few hours, not a few years.
So I'm nearly finished with the website I had to make for my school's prom. Now, I just checked it in Internet Explorer and, well, it's hopeless. Elements aren't where they're supposed to be, most of the JavaScript/jQuery doesn't work at all. I am clueless where to start to make my site compatible with Internet Explorer. Whats the best way to make your site compatible with IE?
The main cross browser step is DOCTYPE Declaration. It is an instruction to the web browser about what version of HTML the page is written in.
It's going to be murder to fix what's already broken... you really needed to start off on the right foot, as it is you may need to re-write large chunks of your site in order to get things working again.
Going back? Well the easiest thing is going to be to start a fresh layout (using the following pointers) and then move your site into the new framework. Depending on the scale of your site this is no small task. Your alternative is one-by-one code debugging, with maybe firebug light
Going forward, how do you build a site that works more evenly across the board?
1 Use a reset CSS boilerplate
I like the html5 one at http://html5reset.org/. These apply layers of CSS to get each browser looking the same to start with (your CSS then gives it the style you want). Note they DON'T address the variety of ways browsers calculate things - borders being part of the width or not (firefox/ie difference)
2 Use a JS library
Or write your own, but be aware of all the differences between the browsers don't just code for the one you're using. Build some JS tests for the library that you can run in any browser to make sure that the library performs as expected, then deal with any site oddities after that. There's too many JS libraries to make a recommend but Prototype.js and jQuery are a popular two.
well it's known that there are differences between browsers. The way browsers render CSS code is also different. You should check parts and see how or if it works as you want. :) There is no one-to-all solution. The experience will let you know what works and what not. But to start you could isolate what is not working in IE (javascript code) and then see what alternatives you have. As for the appearance, there is the option of having separate CSS files especially for IE. However, often there is a technique(a different way to implement the same appearance) that lets you create the appearance you want without multiple versions of code.
I need to build a wysiwyg editor for a project I am working on and need some guidance. Some of my key points of confusion are the following:
iframe docs vs. contenteditable divs: which one should I use and why? I hate iframes, is there a clear advantage to using iframes?
cross browser styling: execCommand seems to apply different styles in different browsers. Are there any tricks to making this cross-browser compatible? Should I not use execCommand at all and instead apply my own styles?.
adding items to the undo chain: how can run my own script, such as inserting an image, and allow cntrl+z (undo) to remove it? Is there an array of undo/redo items for contenteditable that I can push items into?
keeping the text selection: how I can maintain text selection while making operations such as selecting the font style, where the focus will leave and remove my selection. Rangy? Google closure? Are there other range/selection libraries worth looking at?
Any tips on these items or anything else related to building a rich text editor would be greatly appreciated!
From personal experience, I recommend against doing this unless your aim is to provide a very limited amount of functionality. The sheer number of browser differences and the complexity of their workarounds makes this a very tricky and time-consuming task if you want to do it well.
If that hasn't put you off, here's my thoughts on your individual questions:
iframe docs vs. contenteditable divs
I recommend the iframe approach, for two main reasons:
You have complete control over the document type, CSS and script within the iframe. This is essential if you want consistent behaviour and appearance and want to use your editor within different pages.
Firefox in particular is quite buggy with contenteditable elements, which they only introduced relatively recently (version 3.0) while designMode has existed on documents for many years (since pre-1.0; around 0.6, if memory serves) and works pretty well.
cross browser styling
If it's important for you to have uniform results from applying styles in different browsers then in general you will need to write your own styling code. However, doing this will break the built-in undo stack and you will need to implement your own undo/redo system.
adding items to the undo chain
There's no programmatic way to interact with the built-in browser undo stack. You'll need to write your own.
Update November 2012
There is a spec in the works for custom undo/redo so this is likely to be possible eventually. Here are the relevant bugs for Mozilla and WebKit.
keeping the text selection
I have to declare my interests here, since I wrote Rangy. I don't think there's a better library out there that does a similar job; Google Closure does have a range/selection API but I think it uses their own proprietary interface rather than emulating DOM Range and common browser Selection objects. IERange is another library that is similar in idea to Rangy but much less fully realized and seemingly abandoned immediately after release by its author.
Don't, seriously don't.
What you are suggesting is a major undertaking. You really should be looking at TinyMCE, http://tinymce.moxiecode.com/, or CKEditor, http://ckeditor.com/. Getting what you are after is a massive amount of effort to get working for one version of one browser, to make it portable will take man-years of investment.
A better solution is to look at things like TinyMCE's plugins, http://tinymce.moxiecode.com/plugins.php. You can get your basics the basics (and portability for free) and concentrate on adding the specific value-add items you need to.
Ok, I'm using Jquery to build a dynamic menu, and sIFR to change the text to TrajanPro font.
This does not mix. I want to find a way to make it mix, though.
sIFR has automatic parsing of links, so that Flash sends you to the link location. What it doesn't do is pass on javascript triggers. I'm trying to make my menu as accessible as possible, by using hard links and then rewriting them with Jquery into managing the visibility of submenus, like this ~
(CSS)
.submenu {display: none;}
(Javascript)
$("a#top1").click(function(event){
$(".submenu").css("display","none");
$("#sub1").css("display","block");
event.preventDefault();
});
...repeated for every top level menu link ID (#top2, #top3, #top4 - there are only 4 items.)
Does anyone know an easy way to get sIFR to treat javascript triggers nicely, without rewriting the core sIFR code (which is pretty much beyond my abilities)?
I know there are alternatives to sIFR such as image replacement, and I know some of you will probably suggest them - that's cool, but let me state my project goals up front:
1)degrades gracefully. If javascript is absent, the links still work, if images/flash fail to load the text is there instead of a red x and an alt tag.
2)scales nicely. I'm using ems for everything, and my boss views everything on an Iphone, and our customers are known to use everything from IE6 to Macbooks to lynx browsers, big screens and small. I need the text to 'fit' in all cases.
3)Has to work if Flash is absent. At least display text correctly. Damn Apple and their Ipads... (yes, I know sIFR relies on flash, it's got all kinds of tricks to degrade seamlessly though.)
4) there's not a whole lot of text or anything else on the page, so a bit of code bloat is ok, as long as the previous requirements are met. It'd be nice if I could keep my source order intact, though; the way I've got it now there's like 10 lines of code/header links before we're into the meat.
Thanks a bunch!!!
Solved - Cufón (http://cufon.shoqolate.com/generate/) is a font-replacement solution that relies completely on javascript and javascriptable languages (SVG and VML), thus allowing the resulting element to be scripted like any other.
Rock!
Leaving this question up in case anyone else runs into the same problem.
sIFR 3 has APIs for this, but it needs a bit of integration with your code base.
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.