HTML Editor/Creator using Blockly blocks

[Alex Booth]

Hi,

I am a high school CS teacher with moderate coding experience trying to get started making a blocky html editor. HTML is so modular/Blockly-like I figured it would be natural to make an HTML blocky. However, I am somewhat confused on how to get started. Can you give me some hints on the best way to make a new set of blocks?

Thanks!

[Erik Pasternak]

Hi Alex,

Blockly doesn't have an HTML generator yet (by default we provide JS, PHP, Dart, Lua, and Python), so you'd need to either find one from another project or write your own. Here's the docs for the generators. It's usually easiest to take one of the existing generators and modify it for your needs.

You could also find a PHP or JS library you like for building websites and make blocks for that. Our docs on custom blocks should go over all the details of creating blocks, but let us know if you run into issues or have any questions.

Cheers,

Erik

[Robert Czechowski]

Hi Alex, hi Eric,

I actually started working on something similar a while a go. It looks like this right now: http://imgur.com/p1NUbGG (So it's more or less a complete editor with live html preview and website preview.)

It's missing lots of interesting html and css blocks and it is completely in German – but the translation into English should be the least problem.

If you want, I can clean it up a little bit an release the blocks, generators or the whole page somewhere.

Best regards

Robert

[Alex Booth]

Robert, I would be grateful for anything you can share. Do you have a GitHub repository for your project? That would be a very natural way to continue the project. Either way, please let me know the best way to get the code from you. Thanks!!

[Robert Czechowski]

Hi Alex,


I translated all blocks to English, now, and created a repository here:
https://github.com/bwinf/blockly-html

The blocks are designed to translate to HTML 1:1, but I could also
imagine to redesign them to correspond to more general markup – so you
could also generate LaTeX or Markdown out of them. (I think that would
be more Blockly-style.)

In the repository, there also is a block library file that can be
imported into the block factory
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html


Best regards,
Robert

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Blockly" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/blockly/y27sDomKKS8/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> blockly+u...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Alex Booth]

Robert,

Thank you so much--this looks great. It is so nice to have a good starting point. I want to develop this a little further--would you like me to contribute to your project on github, or would you like me to make my own fork. If you want me to contribute, please add me on github as a contributor.

Thanks!!