

Show HN: ContentBuilder.js – JQuery Plugin to Write Anything Beautifully - yusw
http://innovastudio.com/builderdemo/example4.html

======
fpopenerp
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](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](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.

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

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

~~~
pluma
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).

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

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

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

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

~~~
tomw1808
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?

~~~
yusw
We just use obfuscating and minifying, no special method.

------
nnx
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/](http://simplefocus.com/flowtype/) (the demo
link at the end of the page is quite impressive)

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

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

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

------
ashtonizer
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?

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

~~~
teleclimber
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/](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.

~~~
yusw
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?

~~~
edwinyzh
He means your implementation.

------
phirschybar
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!

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

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

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

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

~~~
fpopenerp
What do you think about this one?
[http://odoo.com/start/cms](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,
...)

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

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

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

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

~~~
yusw
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

------
nateweiss
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!

~~~
yusw
Thanks Nateweiss!

------
edwinyzh
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?

~~~
yusw
1&2\. The plugin doesn't have many options to configure. The usage:
[http://innovastudio.com/content-
builder.aspx](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

------
lukeholder
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](http://buildwithcraft.com/features/matrix)

edit: I am just a fan, not affiliated.

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

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

------
andrewstuart
Similar to the sections editor in our product
[https://www.singlepage.guru](https://www.singlepage.guru)

------
neilunadkat12
Pretty neat..

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

