Jump to content
flydev 👊🏻

FieldtypeEditorJs : Preview of a productivity fiedltype for editors.

Recommended Posts

Posted (edited)

Hello,

I would like to present you a new module which aim to facilitate the productivity of your editors/publishers when working on ProcessWire.

The idea begun when my co-worker told me that when typing in ProcessWire CkEditor field he was feeling "loosing motivation" when writing big wall of text and/or inspiration. So he opened his web-browser and show me a site looking to Wordpress - feel free to put your preferred emoji here - then he opened Gutenberg... typed some text and moving some "blocks".

I understood immediately why he got this feeling with CkEditor. If you or your client feel like this guy, then you will love this module !

 

What is currently supported ?

Features

  • Auto-save
  • Medias upload support
  • HannaCode support

Blocks Implemented

  • Heading
  • Image
  • Paragraph
  • Embed
  • Quote
  • Code
  • Link
  • Table (beta)
  • Block Delimiter
  • Raw HTML
  • Note (custom block markup)

Feature Request

  • Frontend Edition 

 

And there you go for the preview - sorry I am to lazy and bad at typing text so I had a copy/pasta moment :

 

editorjspw.gif?raw=true

 

Module featured in the ProcessWire Weekly #317 - Thanks @teppo

Edited by flydev 👊🏻
features / pw weekly link
  • Like 17
  • Thanks 2

Share this post


Link to post
Share on other sites

Got a link?

 

  • Like 1

Share this post


Link to post
Share on other sites

Sorry @rick not yet, there is a chance that the module will be released as ProModule with refund policy to be able to try the module.

  • Like 3

Share this post


Link to post
Share on other sites

Intrigued!

As it happens, I have InputfieldEditorJS + FieldtypeEditorJS proof-of-concept sitting on one of my own sites as well. Mostly functional, though your module looks way more polished. I never got to implement media uploads, for one. It was intended as a test to see if our team would prefer that over Repeater Matrix, and since it wasn't a massive success, I never fully completed it.

Very much looking forward to seeing your module in action 🙂

  • Like 3

Share this post


Link to post
Share on other sites

Interesting, I was thinking that ProcessWire could do with a couple of alternatives to the dated CK Editor. EditorJS is one of those 'modern' editors (I was also looking at Quill), I definitely like the block-based output in JSON format.

In the end I think it would be nice to be able to change the editor implementation library for textarea fields on the fly – like having a textarea field where you can select between CK Editor, EditorJS, TinyMCE etc. and being able to easily add other editors through a hook or something.

Edit: Obviously this should be changed in the field settings per site, not configurable by editors themselves!

  • Like 3

Share this post


Link to post
Share on other sites
1 minute ago, MoritzLost said:

like having a textarea field where you can select between CK Editor, EditorJS, TinyMCE etc. and being able to easily add other editors through a hook or something.

If I got what you mean (compatible Fieldtype ?) it's already the case, you can drop a textarea then choose EditorJS, CkEditor or the vanilla textarea as field.

 

2 minutes ago, MoritzLost said:

I definitely like the block-based output in JSON format.

Sure !  On my side, it's the possibility to fetch those JSON data directly into the third party apps (mobile, desktop, etc).

 

26 minutes ago, teppo said:

It was intended as a test to see if our team would prefer that over Repeater Matrix, and since it wasn't a massive success, I never fully completed it.

Glad to hear that someone tried to implement this editor solution. Could you elaborate on why it wasn't a great success ? As a non-editor who I am, I really like what I feel writing thing on this fieldtype. 

About RepeaterMatrix, I think (and we already saw some posts here in the forum) that it could be used to make a page builder, but thats not intended by this module.

  • Like 4

Share this post


Link to post
Share on other sites
5 hours ago, flydev 👊🏻 said:

Could you elaborate on why it wasn't a great success ? As a non-editor who I am, I really like what I feel writing thing on this fieldtype. 

About RepeaterMatrix, I think (and we already saw some posts here in the forum) that it could be used to make a page builder, but thats not intended by this module.

To be clear I wouldn't say that it was a failure by any means — more like we didn't see major benefits going with Editor.js vs. Repeater Matrix + CKEditor. "Results were inconclusive" 🙂

Like you said, Editor.js probably isn't going to replace Repeater Matrix if what you really need is a block builder; at least it doesn't seem like a good idea at the moment. While it could definitely help with some tasks that CKeditor currently isn't very good at — such as embedding images — at the same time the "every element is a block" approach can also feel a little intimidating and perhaps even unintuitive for those more familiar with "traditional" content editors (CKeditor, Word, etc.)

Should probably also mention that I did my proof of concept back in March, when the Editor.js project seemed a little... unresponsive. There were big missing parts (including i18n support) and issues that were not getting much attention. Now that I've checked, it appears that the project is going strong again.

Hope this makes sense. All in all I'm very curious to see where you're going with this module! 🙂

  • Like 2

Share this post


Link to post
Share on other sites

This could be a block builder option?

https://grapesjs.com/
https://github.com/artf/grapesjs

Newsletter demo: https://grapesjs.com/demo-newsletter-editor.html
Webpage demo: https://grapesjs.com/demo.html

Usage:

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

That's it..

 I try it before, but I don't know how to build a module 😞

  • Like 4

Share this post


Link to post
Share on other sites

Thanks @teppo for your insight, as always highly appreciated. I got what you mean. 

I think that there is a part of question of taste but also depending on the task on which the user is involved/focused. In first instance, while discussing with the colleague, I started to insist that he could use the CKEditor to write his articles; The point is here, he is specialised in content creation. I also suggested MS Word as tool - but no, the UI is not soft as Gutenberg. Then I abdicated and told him to write his articles on Gutenberg and a local install of Wordpress, after all, I will not touch at it, and I can import the content of a Wordpress page to ProcessWire.

I don't know if you guys are used to write content, but this guy showed me also the editor that was crafted for the big site Medium. It's something similar, polished, the editor contain an inline toolbar and some blocks. I understood then that it's like an "new" category of users, they are used to write content in a modern environment. I was not even aware of those type of editor / blocks approach 😂 . So yes, I can understand that it can be "intimidating". 

2 hours ago, teppo said:

Hope this makes sense. All in all I'm very curious to see where you're going with this module! 

Yes! First mission that was to bring back this guy to use ProcessWire is almost done 👍🏻

 

@Pixrael Yes it could. The module you would like to see was already mentioned and I remember that Theo, Elabx and Joshua worked on something. It was not grapejs but the idea remain the same. If you really want to give a try and invest some time the community will help you ! @bernhard wrote nice tutorials on modules creation you could begin with, then start a new thread here in the modules/dev forum. There are some hard works in perspective and I think that a module like that should be taken by a group with dev and designers 🙂

 

  • Like 5

Share this post


Link to post
Share on other sites

Forgot to put a note on what is currently supported :

Features

  • Auto-save
  • Medias upload support
  • HannaCode support

Blocks Implemented

  • Heading
  • Image
  • Paragraph
  • Embed
  • Quote
  • Code
  • Link
  • Table (beta)
  • Block Delimiter
  • Raw HTML
  • Note (custom block markup)

 

  • Like 8

Share this post


Link to post
Share on other sites

Shut up and take my money.

I also thought a long time about making a fieldtype with editor.js, because it is just awesome to store contents as structured data.

Prosemirror is an alternative, which works similar and is used in Statamic for its Bard field (which is also awesome).

Is there any release date yet?

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder. I'd probably get used to it and enjoy it once I got into the habit.

  • Like 1

Share this post


Link to post
Share on other sites
On 6/8/2020 at 9:23 AM, dotnetic said:

Is there any release date yet?

Not yet, when the website used to promote the module will be ready, the release date will posted here. 

 

On 6/9/2020 at 1:23 PM, gornycreative said:

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder.

Same here, and what I can say/confirm, is that once you get your hand into the editor, you will want to use it 😉

Thanks you for your interest.

 

PS: If you think onto something that should be indispensable and that need to be implemented, please do not hesitate to ask/discuss the feature here.

  • Like 2

Share this post


Link to post
Share on other sites
9 hours ago, flydev 👊🏻 said:
On 6/9/2020 at 1:23 PM, gornycreative said:

This looks great - I don't personally care for these types of editors because I'm an older user, but many clients have asked for this type of builder.

 

The big catch is, that no HTML is generated but structured data and you only have to define your elements once and can reuse them as often as you like in one field, without modifying the template or adding new fields to ProcessWire. You can move things around and render the different elements like an image for example, however you want it. Output it as a picture element, put some divs around it, etc. Or render a heading of level two as a heading level 3 instead. This is not possible if you only have HTML.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

That makes a lot more sense in terms of advantages - I will need to look into this some more! Thanks.

  • Like 1

Share this post


Link to post
Share on other sites

This looks cool. One bit of feedback (and this may just be my opinion rather than a general consensus) but I really dislike how the WP Gutenberg treats every paragraph as a block. To me it makes no sense to be able to rearrange text at the paragraph level. To me a single block of text with multiple paragraphs within it seems more sensible.

Although looking at the example JSON doc on the Editor JS homepage it looks like it treats every para as an element and for ease of maintenance I guess you won't won't want to stray too far the default behaviour.

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

I think I get what you mean @Guy Incognito

Actually, you can move every single paragraph independently - BUT, you can also copy/cut all the selected paragraphs and move them as it was a "one-block".

guyinc.gif.9b1b606e8b345b6decb44b7adb3a012d.gif

 

Edited by flydev 👊🏻
screencast
  • Like 1

Share this post


Link to post
Share on other sites
3 minutes ago, flydev 👊🏻 said:

I think I get what you mean @Guy Incognito

Actually, you can move every single paragraph independently - BUT, you can also copy/cut all the selected paragraphs and move them as it was a "one-block".

 

 

Ok this is awesome then - best of both worlds!

One other feature request that will make this a killer module IMO... that it should work with Front End editing.

 

  • Like 3

Share this post


Link to post
Share on other sites
Just now, Guy Incognito said:

that it should work with Front End editing.

Indeed, it will work on front-end editing for defined roles 👍🏼

  • Like 3

Share this post


Link to post
Share on other sites
19 minutes ago, flydev 👊🏻 said:

Indeed, it will work on front-end editing for defined roles

OH, hurry up, I need this as soon as possible! 😁

  • Like 1
  • Haha 2

Share this post


Link to post
Share on other sites
11 hours ago, horst said:

OH, hurry up, I need this as soon as possible!

+1 🙂

  • Like 2

Share this post


Link to post
Share on other sites

Another +1, this would be my default editor as there are so many issues with CKE. I was even contemplating moving to builtin markdown editor, but would be difficult to convince the clients. This would be great for new websites, but what about the existing sites poluted with CKE's html tags? I guess it would be tricky just to update the existing text/body field to a new type due to html vs json?

  • Like 1

Share this post


Link to post
Share on other sites
50 minutes ago, encho said:

Another +1, this would be my default editor as there are so many issues with CKE. I was even contemplating moving to builtin markdown editor, but would be difficult to convince the clients. This would be great for new websites, but what about the existing sites poluted with CKE's html tags? I guess it would be tricky just to update the existing text/body field to a new type due to html vs json?

I think you can still store HTML in Editor.js. So I wonder if it might be feasible to add a new editor field alongside CKeditor ones then use a hook to copy the content over on page save... or something like that anyway!... I'll be looking to address the same issue if this module works out.

  • Like 1

Share this post


Link to post
Share on other sites
On 6/17/2020 at 8:29 PM, Guy Incognito said:

I think you can still store HTML in Editor.js. So I wonder if it might be feasible to add a new editor field alongside CKeditor ones then use a hook to copy the content over on page save... or something like that anyway!... I'll be looking to address the same issue if this module works out.

I am aware of the fact that Editor.js can do html, it would be easy that way to just do in-place swapping the text field with the new one.

But it would also be nice to move old texts to json. I see it discussed in Editor.js Github so there must be a way. One workaround I can do is to dump my database and then run some custom regex search/replace to remove <p> and other tags and replace with json key/values. Problem is there are so many variants, spans, divs, and stuff pasted from word that it is very difficult to anticipate all the options. Did this in past when I was trying to replace <p><strong>***</strong></p> with <h2> enclosure. Web editors/moderators never learn and this Editor.js approach seems to be closest to neatness perfection and keeping everyone happy along the way.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "https://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


    • By DV-JF
      Hey girls and guys,
      I'll want to open this thread in order to discuss a main problem I've run into with following setup:
       
      I'm maintaining a site where different URLs are directed to the same folder. In site/ready.php the $user->language is set based on the $config->httpHost
      <?php /* Set language based on the domain and user is not logged in */ /* Slovenian */ if( $config->httpHost == "www.domain.si" || $config->httpHost == "domain.si" || $config->httpHost == "domain.si.local") { if (!($user->isSuperuser())) $user->language = $languages->get('si'); } /* German */ elseif( $config->httpHost == "www.domain.at" || $config->httpHost == "domain.at" || $config->httpHost == "domain.at.local" || $config->httpHost == "domain.ch" || $config->httpHost == "www.domain.ch" || $config->httpHost == "domain.de" || $config->httpHost == "www.domain.de") { if (!($user->isSuperuser())) $user->language = $languages->get('default'); } /* Croatian */ elseif( $config->httpHost == "www.domain.hr" || $config->httpHost == "domain.hr" || $config->httpHost == "domain.hr.local") { if (!($user->isSuperuser())) $user->language = $languages->get('hr'); } /* English */ elseif( $config->httpHost == "www.domain.eu" || $config->httpHost == "domain.eu" || $config->httpHost == "domain.eu.local") { if (!($user->isSuperuser())) $user->language = $languages->get('en'); } /* Italian */ elseif( $config->httpHost == "www.domain.it" || $config->httpHost == "domain.it" || $config->httpHost == "domain.it.local") { if (!($user->isSuperuser())) $user->language = $languages->get('it'); } The homepage (id=1) has following settings:

      As you can see German (Deutsch) is set as default language. Everything is working nice and fine and I'm really happy with this kind of setup but now there are some new requirements, which causes me quite a headache :
      I've to add some pages only in one or two languages (they should not be present in German) I've to create some editor roles that are allowed to only edit (can be done with https://processwire.com/docs/user-access/permissions/#multi-language-page-edit-permissions) & add pages to their specific language. What I've found out so far:
      The default language can't be disabled and must always be present (though this would be in my eyes the easiest solution) Creating my own "language select field" - example here: won't work in this case because I've to rely on the native languages in order to setup the right permissions for editors. There seems to be some solutionsbut I think these won't match for me because I've to think about handling editors and permissions, too. After searching and searching, scratching my head and searching and searching again, the only possibility that comes to my mind is to add another language for German and assign this language to the specific URL's instead of the default language.
      The advantages with this solution for me:
      I could activate or deactivate any language on any page Editors which are allowed to add pages can get the permission page-edit-lang-default without affecting the German pages. The disadvantages:
      All multi-language-fields will have an empty tab for the default language - this may irritate editors a lot Seems to me like a lot of work to do because I've to copy the language field nearly for 1000 pages/repeaters (maybe I'll find an SQL query) My questions:
      How would you handle this task? Could my setup be optimized in a completely different way? If I go for my solution (adding another language for German) would it be possible to hide the language tab for default language in any way?  If some points aren't clear enough please don't hesitate to ask.
      Many greets...
    • By Mustafa-Online
      Did any one tried to integrate "WordPress New Editor" into ProcessWire ??
      I did some searches and I found this Repo on Github: https://github.com/front/drupal-gutenberg Which allows Drupal Users to use Gutenberg.
      Any Thoughts ?

       
    • By MilenKo
      Hello guys.
      I've decided to get brave and start my first delayed output profile for a remake of my knowledge sharing profile. It went all.good so far but I decided to make it multilingual as to fit the users needs.
      For starters, added a field named: image_single and limited the input to one image as this would be used for the logo. Added.the markup to allow the front end editing (method D or direct edit tag to the <img>. After double clicking on the image, I see the pop-up showing up for a second and then closes. As far as there are no errors in the logs, I am a bit stuck to find the reason. I've read earlier that some users had issues with multilingual fields but could not find anything to point me to the right direction. Any ideas or suggestions?
    • By pwuser1
      Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support? 
×
×
  • Create New...