Show HN: ContentBuilder.js – JQuery Plugin to Write Anything Beautifully | Hacker News Reader

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

innovastudio.com

189 pointsyusw48 comments

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.

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.

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

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

I didn't mean to imply anything else. I guess italics would have been less ambiguous.

AGPL is open source in the "free software" sense. Many people wrongly assume "open source" means "permissively licensed", which of course isn't accurate.

As AGPL is probably as restrictive as it gets it might catch those people by surprise. Unless you're working with GPL software exclusively, "open source" as a qualifier does not convey much practical information.

I find it more helpful to point out the actual license than to just state whether something is open source or closed source, unless we're in a context where the exact license is irrelevant (e.g. when we're only interested whether something is GPL-compatible or not).

Anyone who want to take software that someone else made and slap their own license on it has to be careful. It can be "open source", "free software", "free ware", "abandon ware", "stuff they downloaded from the Internet", or "stuff they bought". If they want to add their own set of restrictions onto the software, reading and understanding the license is the only way prevent being sued for copyright infringement.

Everyone else who do not want to add their own restrictions to the software has a much easier time.

I think open source has come to mean for many people /no strings-attached/, as in "I can use it in my startup however I care." AGPL is not just open source but closer to a free software ideal, where proprietary services can't just ride on top of a common good library and not provide the source.

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...

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.

"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).

Other question: How can you use a JS library without having the source? ... I mean, how do you make sure that it remains closed source? As far as I know obfuscating and minifying is very easy to overcome. Do you have any special techniques?

We just use obfuscating and minifying, no special method.

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)

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.

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

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.

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.

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.

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

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?

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

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.

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?

He means your implementation.

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.

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!

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.

@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.

Hi Phirschybar, yes please email me at builder@innovastudio.com. I will send further info. Thanks

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.

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, ...)

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.

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

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.

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.

The feature is already available, but as we still testing it, it is still not documented yet. We can inform the detail on how to enable it. Yes, a simple function is provided for returning back a value (ex. selected image url, etc) Creating content block is by modifying a single html file called snippets.html (it contains html code for all content blocks which you can add/remove/modify) Our email: builder@innovastudio.com Thanks

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!

Thanks Nateweiss!

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?

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

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.

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

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

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

Pretty neat..

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.

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.

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.

Reply on news.ycombinator.com