No more 'Save' in P5 editor

Not important, but in "old" Plones, the TinyMce editor used to have a 'Save' button.
In Plone 5 not anymore.
Why?
Will it ever go back?
(I missed it :slight_smile: )

2 Likes

Do you mean when editing in full screen mode? I see the save button when editing in normal mode, but not when using full screen.

Hi!
It is not the page 'Save' button, it is the Save button that used to be available inside the TinyMce editor.
That was a great and distinctive feature compared to other CMS's.
For me, and many of the clients where I helped install Plone, they used a lot that feature (some of them just keep the page open for hours, instead of saving-> editing every time they need to change a comma.

In my opinion, this is a important regression in Plone 5.
(but unfortunatly not the only one)

Now I understand you. I do not known how to solve it, but I guess that it can be configured in the admin configuration of TinyMCE. There is a section called "Plugins and Toolbar" that I guess could solve this problem. Inside there is an item named Menubar, where you can enter what items you would like in the menu bar. The problem is that you need to known the name of the save button. I do not known it.

Also, there is an item called "Editor plugins" that select plugins to include with tinymce. One option is autosave.

Tell me if you solve your problem, because I'm also interested in using the save button.

I guess that this button is provided by the TinyMCE Save plugin.

I edit the field in the "Advanced" tab of the TinyMCE configuration. I set the following:

{
  "plugins": "save",
  "toolbar": "save"
}

This code shows the save button in the TinyMCE toolbar, but the other items are lost.

1 Like

do you mind to provide a screenshot for both, Plone 4 and Plone 5?

@hvelarde, these are the screenshots:

The editor interface with the save button in Plone 5.0.3, after adding the configuration code that I posted above.

The interface in Plone 5.0.3 without it.

The interface in Plone 4.3.7.

do you mind opening a PR with that fix?

I have not planned it. But, I can do it. Where? By the way, I guess that PR means feature request, however I cannot remember what exactly the PR acronym means.

PR means pull request; where? I have no idea; as this is a regression fixed should be easy.

I issued this at https://github.com/plone/Products.CMFPlone/issues/1454.

2 Likes

Very nice, thank you!

Yes, the button is there, but it does not do anything, the text changes are not saved, at least in my Plone 5 install.

Hello

I see, that this topic seems to sleep - but from what I see, I'm not sure, if there could be found a solution..

We have Plone 5.0.8 and would love to have a possibility to save a document, without having to leave the edit-mode...

Could anybody find a solution for this? Would be nice getting an update - thank you very much!
-> There is some more information in the link, danielhz mentioned - does this work?

Kind regards
David

Well, I can't give you a fix. Sorry. Maybe tomorrow or never, I don't know yet.
However I can at least give you some guessing on what happened, because I tried to see if I could fix it.

Getting back the button is very easy. All that is needed is to remove the comment like said in CMFPlone issue #1454 and add the component in the registry (2 changes).
However, the button don't do what it is intended to do. It does not work.
What I think is that the comment was added to remove the button because of that.
You see, the code structure of this part of Plone has changed enormously between 4 and 5. In Plone 4 TinyMCE was a component of its own right, in Plone 5 it is just a part of the big CMFPlone monolith. Many code changes. I think that the part that was doing the save has been either forgotten, or the developer could not find the right place to add it (that's certainly the problem I have at least!)
The editor save button is supposed to trigger a special request, a XMLHttpRequest that is talking directly to the server without posting the whole form. If I add the button to Plone 5, it triggers a global POST of the whole form (and it does not work). I think I have found the Plone Js 4 code that do this stuff, it's very short:

settings.save_onsavecallback = function() {
                        moveContent();
                        window.opener.tinyMCE.get(oeID).execCommand('mceSave');
                        window.close();
                };

There is no trace of setting the 'save_onsavecallback' in Plone 5 even while there is code to call it.
This is frustating, but I have currently no idea of the correct place to add it to Plone 5, of if changes would be necessary to make it work. I have not given up yet but that's not a trivial fix.
Unfortunately it's not realistic to expect real help from the Plone honchos. The big priority is to get Plone on Python3 (else in 2020 Plone is dead when Python2 is no more supported). And the developer who specifically removed the button is no more engaged with day to day Plone development, he is working on a more exhilarating work, a future web server to replace the old Zope Zserver (guillotina, that's really the name). Maybe you could try to contact him (https://github.com/vangheem) to confirm what happened. But don't even think he will work to fix the issue.

Thank you very much for your answer.

Most of the technical details, myself, I don't understand, but I have a potential contact to follow up with and I appreciate, that you replied with what I can expect and what probably not...
Sad, it's the current status as described, but I understand the reason of the priorities set. I still hope, there can be found a solution. This simple button would mean some easier work with Plone - as it was before...

Kind regards
David

I got back to this problem and I have now found where the Plone dev are tucking away their javascript. I am 95% sure that the mockup/patterns/tinymce/pattern.js is the file I need to change. Nearer into the labyrinth :slight_smile:

It has been some time now and I am getting back to this. Unfortunately the final answer is quite definite: this feature has not been ported to Plone 5. That's the reason the button has been removed: the code is not here.
To be quite certain, I looked at what could be missing; I added the following to Plone 5.1:

Products/CMFPlone/interfaces/controlpanel.py

--- controlpanel.py.ori	2017-12-21 19:04:34.301777000 +0000
+++ controlpanel.py	2017-12-28 19:08:42.125744097 +0000
@@ -622,8 +622,7 @@
             SimpleTerm('paste', 'paste', u'paste'),
             SimpleTerm('preview', 'preview', u'preview'),
             SimpleTerm('print', 'print', u'print'),
-            # XXX disable save button since it is not implemeneted
-            # SimpleTerm('save', 'save', u'save'),
+            SimpleTerm('save', 'save', u'save'),
             SimpleTerm('searchreplace', 'searchreplace', u'searchreplace'),
             SimpleTerm('tabfocus', 'tabfocus', u'tabfocus'),
             SimpleTerm('table', 'table', u'table'),

then the plugin appears but it's impossible to check it, because the registry is missing.
So some declarations should be added to the registry for the plugin to be recognized; I did not do this part since I am not a Plone developer, I just patched a few lines directly:

<registry>
  <record name="plone.resources/tinymce-save.conf" interface="Products.CMFPlone.interfaces.resources.IResourceRegistry" field="conf">
    <field type="plone.registry.field.Text">
      <description xmlns:ns0="http://xml.zope.org/namespaces/i18n" ns0:domain="plone" ns0:translate="">Should be accessible on @@getWCconfig?id=name</description>
      <required>False</required>
      <title xmlns:ns0="http://xml.zope.org/namespaces/i18n" ns0:domain="plone" ns0:translate="">Configuration in JSON for the widget</title>
    </field>
    <value/>
  </record>
</registry>

and 

<registry>
  <record name="plone.plugins" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="plugins">
    <field type="plone.registry.field.List">
      <default>
        <element>advlist</element>
        <element>fullscreen</element>
        <element>hr</element>
        <element>lists</element>
        <element>media</element>
        <element>nonbreaking</element>
        <element>noneditable</element>
        <element>pagebreak</element>
        <element>paste</element>
        <element>preview</element>
        <element>print</element>
        <element>searchreplace</element>
        <element>tabfocus</element>
        <element>table</element>
        <element>visualchars</element>
        <element>wordcount</element>
        <element>code</element>
      </default>
      <description>Select plugins to include with tinymce</description>
      <missing_value/>
      <required>False</required>
      <title>Editor plugins</title>
      <value_type type="plone.registry.field.Choice">
        <values>
          <element>advlist</element>
          <element>anchor</element>
          <element>autosave</element>
          <element>charmap</element>
          <element>code</element>
          <element>colorpicker</element>
          <element>contextmenu</element>
          <element>directionality</element>
          <element>emoticons</element>
          <element>fullpage</element>
          <element>fullscreen</element>
          <element>hr</element>
          <element>insertdatetime</element>
          <element>layer</element>
          <element>lists</element>
          <element>media</element>
          <element>nonbreaking</element>
          <element>noneditable</element>
          <element>pagebreak</element>
          <element>paste</element>
          <element>preview</element>
          <element>print</element>
          <element>save</element>
          <element>searchreplace</element>
          <element>tabfocus</element>
          <element>table</element>
          <element>textcolor</element>
          <element>textpattern</element>
          <element>visualblocks</element>
          <element>visualchars</element>
          <element>wordcount</element>
        </values>
      </value_type>
    </field>
    <value>
      <element>advlist</element>
      <element>autosave</element>
      <element>code</element>
      <element>fullpage</element>
      <element>fullscreen</element>
      <element>hr</element>
      <element>lists</element>
      <element>media</element>
      <element>nonbreaking</element>
      <element>noneditable</element>
      <element>pagebreak</element>
      <element>paste</element>
      <element>preview</element>
      <element>print</element>
      <element>save</element>
      <element>searchreplace</element>
      <element>tabfocus</element>
      <element>table</element>
      <element>visualchars</element>
      <element>wordcount</element>
    </value>
  </record>
</registry>

it's necessary to add some python code: (new file) Products/CMFPlone/browser/tinymce.py:

# -*- coding: utf-8 -*-
from Products.CMFPlone.interfaces.tinymce import ITinyMCEBrowserView
from zope.interface import implementer
from plone.app.textfield.value import RichTextValue
from urllib import unquote

@implementer(ITinyMCEBrowserView)
class TinyMCEBrowserView(object):
    """ . 
    """

    def save(self):
        """ 
           set the field.
        """
        s = unquote(self.request.get('data'))
        self.context.text = RichTextValue(s, outputMimeType='text/html')
        return 'saved'

and a class definition: Products/CMFPlone/browser/configure.zcml

--- configure.zcml.ori	2017-12-25 22:10:40.078742000 +0000
+++ configure.zcml	2018-01-19 10:10:40.611545791 +0000
@@ -209,6 +209,15 @@
       attribute="checkDocument"
       />
 
+  <!-- TinyMCE Support -->
+  <browser:page
+      for="*"
+      class=".tinymce.TinyMCEBrowserView"
+      permission="cmf.ModifyPortalContent"
+      attribute="save" 
+      name="tinymce-save" 
+      />
+
   <!-- Default Page View -->
   <browser:page
       for="OFS.interfaces.ITraversable"

finally the code in the browser:

mockup/patterns/tinymce/pattern.js

--- pattern.js.ori	2017-12-25 22:25:04.803216000 +0000
+++ pattern.js	2018-02-09 23:30:16.124137169 +0000
@@ -177,12 +177,12 @@
         theme: '-modern',
         plugins: ['advlist', 'autolink', 'lists', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
                   'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'contextmenu',
-                  'paste', 'plonelink', 'ploneimage'],
+                  'paste', 'plonelink', 'ploneimage', 'save'],
         menubar: 'edit table format tools view insert',
         toolbar: 'undo redo | styleselect | bold italic | ' +
                  'alignleft aligncenter alignright alignjustify | ' +
                  'bullist numlist outdent indent | ' +
-                 'unlink plonelink ploneimage',
+                 'unlink plonelink ploneimage save',
         //'autoresize_max_height': 900,
         'height': 400
       },
@@ -355,6 +355,27 @@
         }
       };
 
+
+      if (!self.options.inline) {
+          tinyOptions.save_onsavecallback = function(editor) {
+                  self.tiny.save();
+                  $.ajax({
+                      url:self.tiny.documentBaseUrl + '/tinymce-save',
+                      type:"POST",
+                      data: {
+                       _authenticator: utils.getAuthenticator(),
+                       data: encodeURIComponent(self.tiny.getBody().innerHTML)
+                      },
+                      error: function() {
+                         editor.notificationManager.open({text:'Problem saving data',type: 'error'})
+                      },
+                      success: function(data) {
+                         if (data != 'saved') editor.notificationManager.open({text:data,type: 'error'})
+                      }
+                 })
+            };
+      };
+
       self.initLanguage(function() {
         if(typeof(self.options.folderTypes) === 'string'){
           self.options.folderTypes = self.options.folderTypes.split(',');

so I am quite certain that if any of this had been in Plone 5 I would not have missed it.

if you add all this with care to a Plone 5.1 configuration, it should work (be aware that the second registry addition will trash the existing relevant part of the registry, so do a backup first); this has taken me quite some hours to learn all that was necessary, but I don't doubt that an experienced developer could redo all this in less than half an hour + maybe one hour for the management work (as I have zero experience with this part I have no clear idea). The problem is just that no developer had the time to add back this function to Plone.

@gp54321 Do these snippets of codes that you've mentioned exist in Plone 4? I couldn't find them on any of the 4.x branches of the GitHub repository

AFAIK TinyMce implementation in Plone 4 was very different (mockup did not exist, that's was lost when upgrading to 4 to 5, mockup implementation of this feature was never done)