8 ms·

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

189 points by yusw 12y ago

aikah 12y 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 12y 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.
  - yusw 12y ago
    The plugin will have option to open custom image dialog. It's still under development. Thanks
- ams6110 12y 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 12y 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 12y 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!
- yusw 12y ago
  Thanks Nateweiss!
tomw1808 12y 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...
- pluma 12y 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.
  - yusw 12y 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).
    - tomw1808 12y ago
      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 12y ago
        We just use obfuscating and minifying, no special method.
fpopenerp 12y 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 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 12y ago
  Note: "open source" in this case means AGPL.
  - bratsche 12y ago
    Not sure what the "quotes" are for. AGPL is open source.
    - goldfeld 12y ago
      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.
    - pluma 12y ago
      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).
bshimmin 12y 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.
- fpopenerp 12y ago
  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 12y 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.
    - deleted 12y ago
      [deleted]
bliker 12y 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
- yusw 12y 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 12y 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/ 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 12y 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?
    - edwinyzh 12y ago
      He means your implementation.
notastartup 12y 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 12y 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 12y 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 12y 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/ http://simplefocus.com/flowtype/ (the demo link at the end of the page is quite impressive)
- yusw 12y 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.
- deleted 12y ago
  [deleted]
koolkokil 12y ago
Can I add a custom dialog, on the image link popup, to show the images already in my website.
- yusw 12y 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.
  - koolkokil 12y 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.
    - yusw 12y ago
      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
andrewstuart 12y ago
Similar to the sections editor in our product https://www.singlepage.guru https://www.singlepage.guru
phirschybar 12y 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!
- yusw 12y 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.
  - phirschybar 12y 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.
    - yusw 12y ago
      Hi Phirschybar, yes please email me at builder@innovastudio.com. I will send further info. Thanks
matthewborden 12y ago
Squire (http://neilj.github.io/Squire/ http://neilj.github.io/Squire/) does the same thing without the jQuery.
- Beltiras 12y ago
  No it doesn't. A TinyMCE clone is not a responsive sitebuilder.
lukeholder 12y 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 http://buildwithcraft.com/features/matrix edit: I am just a fan, not affiliated.
edwinyzh 12y 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?
- yusw 12y ago
  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
neilunadkat12 12y ago
Pretty neat..
ashtonizer 12y 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?

189 points by yusw 12y ago

aikah 12y 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 12y 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.
- yusw 12y ago
  The plugin will have option to open custom image dialog. It's still under development. Thanks
ams6110 12y 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 12y 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 12y 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!

yusw 12y ago
Thanks Nateweiss!

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

pluma 12y 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.
- yusw 12y 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).
  - tomw1808 12y ago
    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 12y ago
      We just use obfuscating and minifying, no special method.

fpopenerp 12y 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 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 12y ago
Note: "open source" in this case means AGPL.
- bratsche 12y ago
  Not sure what the "quotes" are for. AGPL is open source.
  - goldfeld 12y ago
    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.
  - pluma 12y ago
    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).

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

fpopenerp 12y ago
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 12y 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.
  - deleted 12y ago
    [deleted]

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

yusw 12y 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 12y 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/ 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 12y 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?
  - edwinyzh 12y ago
    He means your implementation.

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

yusw 12y 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.
deleted 12y ago
[deleted]

koolkokil 12y ago

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

yusw 12y 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.
- koolkokil 12y 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.
  - yusw 12y ago
    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

andrewstuart 12y ago

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

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

yusw 12y 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.
- phirschybar 12y 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.
  - yusw 12y ago
    Hi Phirschybar, yes please email me at builder@innovastudio.com. I will send further info. Thanks

matthewborden 12y ago

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

Beltiras 12y ago
No it doesn't. A TinyMCE clone is not a responsive sitebuilder.

lukeholder 12y 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 http://buildwithcraft.com/features/matrix edit: I am just a fan, not affiliated.

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

yusw 12y ago
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

neilunadkat12 12y ago

Pretty neat..

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