6 ms·

ContentTools: A WYSIWYG editor for HTML content

48 points by prawn 11y ago

ianstormtaylor 11y ago
I've got to say, this entire set of tools looks incredibly polished and well designed. The documentation is amazingly thorough, and the getting started tutorials cover exactly what I hoped they'd cover. (I'm looking at building a collaborative, real-time editor for Markdown-like content.) Everything was super positive. And then I went to browse the code, and it turns out it isn't actually hosted on NPM; it has a weird custom build process that means every file has implicit module dependencies between them, but you can't really tell which; and everything's written in Coffeescript. Went from super excited to questioning whether it's something that is going to be more of a hassle to develop and contribute to than it's worth. The design decisions of the library itself still seem strong, but the developer experience design decisions will probably mean that it sees nowhere near the adoption it could have seen. If anyone knows of similar libraries I'd be really curious to hear what people have used in the past.
- voltagex_ 11y ago
  I hope you don't mind, I've quoted you in https://github.com/GetmeUK/ContentTools/issues/28 https://github.com/GetmeUK/ContentTools/issues/28
  - arethuza 11y ago
    You might want to change the page that has "Click the pencil icon top-left" to make it clear which icon you are referring to - I was clicking on the pencil icon in the logo and getting confused. Took me three attempts before I noticed the red pencil icon on the far left (I had the page opened full screen on a very wide monitor). NB I was up early and haven't had much coffee - so it could just be me... :-)
    - anthonyjb 11y ago
      Never thought about the fact there's 2 pencils up there! I've added the word pink for now while I think if there's a better option.
    - aargh_aargh 11y ago
      +1
- nickjackson 11y ago
  Have you seen http://prosemirror.net http://prosemirror.net? Not quite as well polished, but probably more suited to real time collaboration.
- anthonyjb 11y ago
  Thank you for the feedback. Right now all dependencies are included with the package in a folder called '/externals' and the build process concatenates them to the start of the final output file - which 'hands up' isn't ideal and moving towards correct node/npm support is a goal for the very near future. To provide a very quick overview: ContentTools is a collection of libraries all written in CoffeeScript (this is up for debate https://github.com/GetmeUK/ContentTools/issues/10 https://github.com/GetmeUK/ContentTools/issues/10), the collection includes: - FSM (https://github.com/GetmeUK/FSM https://github.com/GetmeUK/FSM) [no dependencies] - HTMLString (https://github.com/GetmeUK/HTMLString https://github.com/GetmeUK/HTMLString) [depends on FSM] - ContentSelect (https://github.com/GetmeUK/ContentSelect https://github.com/GetmeUK/ContentSelect) [no dependencies] - ContentEdit (https://github.com/GetmeUK/ContentEdit https://github.com/GetmeUK/ContentEdit) [depends on HTMLString, ContentSelect] - ContentEdit (https://github.com/GetmeUK/ContentTools https://github.com/GetmeUK/ContentTools) [depends on ContentEdit] For developers each library does have other grunt related dependencies which are required to transcompile the CoffeeScript and SASS as well as perform some base concatenation. Instructions on building/testing each library is provided on each of the GitHub pages. Along with implementing better dependency support, for those looking to contribute: - I still haven't added a release numbers to the builds yet (so that's first priority) - I haven't posted any contributor guidelines as of yet. Please bare with me, didn't expect the amount if interest so far (though that's been awesome), not released an open-source project before, still learning about git (everything was on Mercurial before release) and publishing packages using bower/npm.
scoot 11y ago
Desktop only unfortunately. What are the plans for touch devices?
- anthonyjb 11y ago
  That's a good question. In reality whilst it's not too much work to make the editor function in a touch environment, I think there will be a lot of work in designing the UX for smaller screen touch devices - for example the floating toolbox really doesn't work on a mobile or smaller tablets. It is a goal for the editor to support touch such devices but I wouldn't feel comfortable saying it's something that's likely to be supported soon as there are other tasks ahead of it (including completing the test suite and finishing some additional tutorials). Thanks for your interest.
orf 11y ago
Looks amazing, not sure about the lack of bower/npm though
cttet 11y ago
Is there any external WYSIWYG HTML editors which I do not need to add the extra Javascript inside (except Dreamweaver)?

48 points by prawn 11y ago

I've got to say, this entire set of tools looks incredibly polished and well designed. The documentation is amazingly thorough, and the getting started tutorials cover exactly what I hoped they'd cover. (I'm looking at building a collaborative, real-time editor for Markdown-like content.) Everything was super positive. And then I went to browse the code, and it turns out it isn't actually hosted on NPM; it has a weird custom build process that means every file has implicit module dependencies between them, but you can't really tell which; and everything's written in Coffeescript. Went from super excited to questioning whether it's something that is going to be more of a hassle to develop and contribute to than it's worth. The design decisions of the library itself still seem strong, but the developer experience design decisions will probably mean that it sees nowhere near the adoption it could have seen. If anyone knows of similar libraries I'd be really curious to hear what people have used in the past.

voltagex_ 11y ago
I hope you don't mind, I've quoted you in https://github.com/GetmeUK/ContentTools/issues/28 https://github.com/GetmeUK/ContentTools/issues/28
- arethuza 11y ago
  You might want to change the page that has "Click the pencil icon top-left" to make it clear which icon you are referring to - I was clicking on the pencil icon in the logo and getting confused. Took me three attempts before I noticed the red pencil icon on the far left (I had the page opened full screen on a very wide monitor). NB I was up early and haven't had much coffee - so it could just be me... :-)
  - anthonyjb 11y ago
    Never thought about the fact there's 2 pencils up there! I've added the word pink for now while I think if there's a better option.
  - aargh_aargh 11y ago
    +1
nickjackson 11y ago
Have you seen http://prosemirror.net http://prosemirror.net? Not quite as well polished, but probably more suited to real time collaboration.
anthonyjb 11y ago
Thank you for the feedback. Right now all dependencies are included with the package in a folder called '/externals' and the build process concatenates them to the start of the final output file - which 'hands up' isn't ideal and moving towards correct node/npm support is a goal for the very near future. To provide a very quick overview: ContentTools is a collection of libraries all written in CoffeeScript (this is up for debate https://github.com/GetmeUK/ContentTools/issues/10 https://github.com/GetmeUK/ContentTools/issues/10), the collection includes: - FSM (https://github.com/GetmeUK/FSM https://github.com/GetmeUK/FSM) [no dependencies] - HTMLString (https://github.com/GetmeUK/HTMLString https://github.com/GetmeUK/HTMLString) [depends on FSM] - ContentSelect (https://github.com/GetmeUK/ContentSelect https://github.com/GetmeUK/ContentSelect) [no dependencies] - ContentEdit (https://github.com/GetmeUK/ContentEdit https://github.com/GetmeUK/ContentEdit) [depends on HTMLString, ContentSelect] - ContentEdit (https://github.com/GetmeUK/ContentTools https://github.com/GetmeUK/ContentTools) [depends on ContentEdit] For developers each library does have other grunt related dependencies which are required to transcompile the CoffeeScript and SASS as well as perform some base concatenation. Instructions on building/testing each library is provided on each of the GitHub pages. Along with implementing better dependency support, for those looking to contribute: - I still haven't added a release numbers to the builds yet (so that's first priority) - I haven't posted any contributor guidelines as of yet. Please bare with me, didn't expect the amount if interest so far (though that's been awesome), not released an open-source project before, still learning about git (everything was on Mercurial before release) and publishing packages using bower/npm.

scoot 11y ago

Desktop only unfortunately. What are the plans for touch devices?

anthonyjb 11y ago
That's a good question. In reality whilst it's not too much work to make the editor function in a touch environment, I think there will be a lot of work in designing the UX for smaller screen touch devices - for example the floating toolbox really doesn't work on a mobile or smaller tablets. It is a goal for the editor to support touch such devices but I wouldn't feel comfortable saying it's something that's likely to be supported soon as there are other tasks ahead of it (including completing the test suite and finishing some additional tutorials). Thanks for your interest.

orf 11y ago

Looks amazing, not sure about the lack of bower/npm though

cttet 11y ago

Is there any external WYSIWYG HTML editors which I do not need to add the extra Javascript inside (except Dreamweaver)?