Show HN: ContentBuilder.js – JQuery Plugin to Write Anything Beautifully

http://innovastudio.com/builderdemo/example4.html

by yusw • 12 years ago

189 48 12 years ago

innovastudio.com

aikah• 12 years ago

Nice,though this is a paid product, not free.I'll try to emulate that stuff with angularjs,will be a fun project.

rhubarbcustard• 12 years ago

You say it like releasing a paid-for product is a bad thing?

I'm currently working on a project and would've happily paid for this if I'd seen it at the time and it met my requirements. Currently I'm using CKEditor and happy with it but I would've paid to get a simpler/sleeker product without hesitation.

Having said that, I couldn't see image uploading and browse (of uploaded images) in the demo, which would be a deal-breaker for me.

yusw12• 12 years ago

The plugin will have option to open custom image dialog. It's still under development. Thanks

ams6110• 12 years ago

What is your hourly rate? How many hours would it take you to recreate even a subset of this functionality? If the answer is "more than half a day" then assuming typical hourly rates you are better off buying. There's a certain cognitive dissonance here, nobody wants to pay for anything but most of us here earn our livlihoods on people (in one way or another) paying us for the software we create.

hackerboos• 12 years ago

I thought this when the highcharts.js story came up a few weeks ago.

How many hundreds of hours would it be to recreate that and you can skip all that pain and maintenance for less than 400 bucks.

nateweiss• 12 years ago

Cool, nice work. I personally think the pricing is quite reasonable as well. I have a project I might be able to use this with in the near future. Thanks for showing!

yusw12• 12 years ago

Thanks Nateweiss!

tomw18082• 12 years ago

Not free, not free, wooh. I think you spend a reasonable amount of work there and therefore it is just normal that its not free. Nothing great is free these days, and, to be honest, if something awesome like that is free I would be more than suspicious.

Well, that said, it would've been nice if you provided a free developer version. Not every project works the same. Sometimes someone want to test if your product really fits, before spending...

And after scanning through your website 3 times, I am still not sure what is the difference between "unlimited websites" and "resale in products".

Just my thoughts...

pluma3• 12 years ago

Considering how similar licenses work, I'd guess that "resale" means bundling it in a project you hand off to a client whereas "unlimited websites" means using it in a project you keep the ownership of.

Not sure how this works for SaaS projects, though.

yusw12• 12 years ago

"Unlimited websites" includes websites for clients' projects (commercial). "Resale in product" means distributing the plugin in an application/product (ex. CMS) for sale (this includes usage in SaaS project).

fpopenerp2• 12 years ago

We built the same features in open source for the Odoo website builder. You can try it here: https://www.odoo.com/page/website-builder

We also put features like resizeable bootstrap column with drag & drop (col-md-X), link manager, media manager, special fields edition (e.g. prices with currencies)... Playing with building blocks look more sleek in Odoo version.

Github: https://github.com/odoo/odoo

Disclaimer: I am the founder of Odoo. We should probably extract this bit of code from Odoo to release a standalone library.

pluma3• 12 years ago

Note: "open source" in this case means AGPL.

bratsche• 12 years ago

Not sure what the "quotes" are for. AGPL is open source.

bung• 12 years ago

I've noticed a few CMSs with varying levels of this sort of thing, would be great if you released it :)

Also, it would really be great if tools like this were listed somewhere, and/or one of them managed to get enough traction to end up being something as fundamental as "bootstrap" is.

I sometimes get sad seeing all these different tools and libraries re-created rather than having features added/improved by a larger community.

bshimmin2• 12 years ago

Slightly depressing that the comments are all (as I write this) about the pricing...

I'm always interested in these sorts of things, having come close myself on several occasions to building something similar (CKEditor is usually what we end up using, though it's a bit warty in places and much bulkier than this).

I quite like this one, though my first instinct was "How do I delete the image in this block?" rather than "Ah, I need a different type of block that doesn't have an image". I'm not 100% sure if that isn't fundamentally a bit of a wrong choice - having lots of built-in block types is good, but being able to edit them in-place would be even better.

fpopenerp2• 12 years ago

What do you think about this one? http://odoo.com/start/cms

It's not a standaline jquery lib but can easily be extracted from the code of Odoo as it's open source.

We worked a ot on the usability to make it smooth to handle images, backgrounds, specific properties of building blocks (e.g. banners, parallax, ...)

bshimmin2• 12 years ago

Definitely looks like it has a lot of functionality!

A few quick comments because I've only looked at it for about thirty seconds:

1) Not really a huge fan of the Bootstrap UI - I know it's practical, but it always just looks a bit amateurish to me, as if it's a first prototype before there's been chance to pay for a proper designer.

2) The interface is a bit frenetic - not overly keen on the purple highlight strips appearing as I drag new blocks about.

3) The "customize" menu on each block is terrific though - very nicely done and useful.

bliker• 12 years ago

I am curretly working on similar project. I really like your concept. But I see some flaws.

- No list auto-creation

- Sometimes ugly html like <span font-weigth=>

- Does not produce nice htm5 like hgroups, sections and em/strong

- I cannot make a paragraph in chrome, just <br>s

yusw12• 12 years ago

Thanks Bliker, bulleted & numbered list can be created using the editing toolbar (or drag/drop from the content block). We also keep improving the HTML result, including the fix for the unwanted span styles and new paragraph.

teleclimber• 12 years ago

I am also working on something a bit like this. Sounds like a trend is starting... I also like OP's work, it's far nicer than Sir Trevor. (http://madebymany.github.io/sir-trevor-js/)

Some things I notice as well in OP's implementation:

- when selecting text you can only select a small subset of the content (if you start your selection in a paragraph, you can only select within that paragraph). This is going to drive authors crazy.

- moving the cursor with the keyboard suffers from the same limitation. Once you reach the top of your current paragraph, the "up arrow" key does nothing. It should really move to the bottom of the next content.

- for any web-based editor that uses contentEditable: cE is full of quirks (that's putting it politely). Addressing how you tame contentEditable from the start is the key to making a good editor. I think patching the editor as the quirks surface is a poor strategy.

yusw12• 12 years ago

Hi, sorry would you please let me know what you're referring with "OP's implementation"? Perhaps you have url. Or is it related with the ContentBuilder.js?

notastartup• 12 years ago

Pretty amazing that even with Angularjs, Ember.js, Backbone.js and all these MVC in your browser frameworks, jQuery is the easiest to pick up and use.

pacomerh• 12 years ago

You can't compare jQuery to an MV* framework, they have different purposes. jQuery is meant for easier DOM manipulation (ideal for these kind of projects). MV* frameworks are for giving your JS more structure and create applications.

dingdingdang• 12 years ago

This is very important point, I use jQuery and structure my code into quite specific MC(V) pattern (not yet using a second library for this) - jQuery itself is largely structure agnostic.

nnx• 12 years ago

The complexity designing responsive websites that respect typography and readability good practice at all (most) screen sizes is certainly a problem that deserve a better solution.

After checking out this demo and the project site with an iPad, I noticed the Examples section looks kinda broken (columns of text wih 2 words per line) - this does not inspire confidence and I'm not sure there is anything the product does better than opensource Flowtype.js with contentEditable=true ?

http://simplefocus.com/flowtype/ (the demo link at the end of the page is quite impressive)

yusw12• 12 years ago

Thank you for your feedback. The typography used is depend on the sample content css, including the built-in content blocks (which is also customizable). The plugin is also tested to work with Bootstrap. Only we don't have bootstrap demo yet.

koolkokil2• 12 years ago

Can I add a custom dialog, on the image link popup, to show the images already in my website.

yusw12• 12 years ago

Yes, this feature (option to open custom dialog) is still in development (95% complete). Using the current 'direct image embed' also allows embedded images to be saved on specified path on the server.

koolkokil2• 12 years ago

I like it and I might use it, if you have that feature available. Any idea, when it might be completed. I am hoping there will be some kind of call back or dialog result, to send the result back to the div.

Another question, how flexible it is, for uploading new content blocks?

I also dint find any email address or any contact info, in your website.

Could you also have some kind of trial, so people may try, before they buy.

andrewstuart• 12 years ago

Similar to the sections editor in our product https://www.singlepage.guru

phirschybar2• 12 years ago

This is really impressive. Well done.

Having build a number of CMSes I have a few, hopefully constructive, criticisms:

1) I understand why you are utilizing a lot of inline styles in your rendered HTML output. However, this will become a huge problem if the HTML becomes stored in a database and the site's front-end CSS needs to change.

2) Outputting HTML in general is tough to work with in a CMS type environment. It would amazing to have a markdown output for this!

3) I fully understand why you are saving images as inline data as it does not require any backend development. However, it would be helpful to have the option to post uploaded files to a URL for server-side processing.

Great job!

yusw12• 12 years ago

Hi Phirschybar, Thank you for your feedback! 1) There may be some condition that generates unwanted inline style. Recently we fixed this issue which happens on certain browser. 2) Yes, that would be great. 3) There is already an option to upload/save the embedded images in a specified path on the server.

phirschybar2• 12 years ago

@yusw is there any way to see more documentation, for example, on how the image uploading is handled? Also, is there a way (twitter?) where we can get updates on the progress of this project? I am fairly certain we will want to license it for a current project. Perfect for our needs.

matthewborden• 12 years ago

Squire (http://neilj.github.io/Squire/) does the same thing without the jQuery.

Beltiras• 12 years ago

No it doesn't. A TinyMCE clone is not a responsive sitebuilder.

lukeholder• 12 years ago

One of the best features of Craft CMS is the idea that these blocks are core to the whole system (the matrix) http://buildwithcraft.com/features/matrix

edit: I am just a fan, not affiliated.

edwinyzh2• 12 years ago

Looks great! Several questions. 1 - Since you do not provide trial, do you have documents? I at least need to have a feel on how to integrate it into my program.

2 - How is the extensibility and flexibility? Since I'm thinking of desktop program integration, this is a key to me.

3 - What's the number of lines in this library?

yusw12• 12 years ago

1&2. The plugin doesn't have many options to configure. The usage: http://innovastudio.com/content-builder.aspx (I can send the readme file if you'd like, just email builder@innovastudio.com). The package contains several examples (explained in the readme file). In the near future we plan to include option to extend with custom image select. 3. around 2500 lines Thanks

neilunadkat12• 12 years ago

Pretty neat..

ashtonizer• 12 years ago

looks VERY cool, indeed!

any idea which CMS i could easily tie contentbuilder.js to? i know i can THEORETICALLY use it with ANY cms. i do not have too much (php) programming knowledge, though.

my dream micro-cms should have the following features: self-hosted, possibility to add new pages, automatically get an updated navigation after adding/editing a (new) page, have the ability to add metatags and edit some basic SEO settings, fill in the drag&drop areas on those pages with contenbuilder.js and finally save the website with one klick...

any idea which combination brings me close to this ideal conception?

Show HN: ContentBuilder.js – JQuery Plugin to Write Anything Beautifully

Related Stories