Topic: Photoshop style colorpicker


I wanted to create a Photoshopstyle colorpicker plugin for Tinymce. I've only just started creating it, but it's fully functional and the math is sound (I use simple loops to generate all the colors, it's pure javascript (no php) with document.write), so I thought I'd put it up somewhere for you to download. I'll make it an official SF project, if there seems to be any interest.

Here's what it looks like:


And here's where you can download it

To install, just unpack in your plugins folder. The plugin is called "advcolor". Add it to your editor by adding "advcolor" to the list of plugins and "choosecolor" to your list of buttons.

Sorry, haven't tested it much yet, but it works great on Osx and Firefox. I'll have to polish the CSS some day to make it look the same in IE and Firefox on Win.

Future plans:

1. Support for custom color sets (an additional row of colors with the same, predfined colors that are integral to a project always visible).
2. Better code for what happens when you press the button to actually send the color to the foreground or background. I'm still figuring out nodes, active elements, selections and so on. It works ok now, but I'm sure additional needs will arise very quickly.
3. Easier configuration for choosing other amounts of colored squares (16x16, 32x32, 256x256). It's locked at 17x17 now. I don't know if the math works well with other numbers.

If you check this out, drop me a line and tell me if it works and if it's any useful. Bug reports and feature requests/ideas are welcome.



Last edited by jaysire (2006-10-20 09:22:58)


Re: Photoshop style colorpicker

Great job on the plugin! The color restrictions on the 2.0.8 release bothered me a lot. I know my users will want a way to select custom colors, I did. At first I couldn't get your plugin to run so I reconstructed it and it was great. There were a few things I added. The method for setting the color by inserting a span tag wasn't reliable and didn't always work so I replaced it with a built in TinyMCE command. I also added some things to the popup. I styled the color array a little (nice code by the way) and the rainbow selector on the right had some display problems in IE6. Also, I made a color sample box to show the selected color and a mouse over effect when you are picking a color. I converted the text box to show the color as a Hex instead of RGB (TinyMCE is setup to use this more easily). Also, the user can type in a custom color number in the box and the sample area will adjust. There is some error checking built into this to keep invalid characters from being used. I borrowed some code from another ColorPicker plugin found in this forum. There are comments in the code where necessary. That's about it.

If you want to download it it's available here: Photoshop Style Color Picker  Just drop it in the plugin folder and add "advimg" to your plugins list and "advimg" to your buttons list. That's it.

It looks like this:


The button shows as an extra button next to the existing color buttons, like this:


But I'd like it to be built into the color dropdown like beow, but didn't have time for that.



Re: Photoshop style colorpicker

Hey, nice work! smile

By a strange coincident, I just discovered the IE6 bug this weekend and fixed it (by adding a comment in the <div> that makes the rainbow like this: <div><!-- --></div>). For some reason divs will always be 20px (or such) high in IE, if they are empty. Just adding a comment makes it behave.

I'll check your code and I will definitely incorporate your built in MCE -commands for setting fg/bg. I didn't have enough MCE-experience to know the best way to do it and just went with what felt ok. Plus I think I looked at the simple built in colorpicker and the code it generated seemed to use spans too.

I also like the squares showing this and previous color. It would also be very good if the popup could remember the last color choice (perhaps your plugin works this way - I have to look at it some more).

Anyway, thanks for sharing your work and improving both ideas and practice. smile



Re: Photoshop style colorpicker

This is also an kick ass color picker. But we never got around to add it into the core of TinyMCE. sad
http://sourceforge.net/tracker/index.ph … tid=738747

And regarding the "more colors" option for the menu layers check the editor_template_src.js file in themes/advanced. And look for the _getColorHTML function it has some out commented code regarding this. So I just didn't have time to add that either. smile

Best regards,
Spocke - Main developer of TinyMCE