Front Edit (plugin Editable) does not work

Hello,

Has someone already made the plugin "Editable" to work?

I have installed it and the Edit button is visible after the LogIn, but the Edit button is not clickable and the layout of the website is destroyed.

Does anyone have an idea or solution?

Best regards
Käpsele

What theme are you using? Can I see your site? If not, can you send me some screenshots and as much info as you can share? Preferably the full page (the .md file) and your user/config/plugins/editable/editable.yamlfile? Did you modify anything else?

I'm close to releasing a fully rewritten version of Editable with the SimpleMDE editor. It doesn't use 'Add-ons', supports caching, uploading images en files and fixes some other issues with the current plugin. It's good to fix the issues you have in that next version before it's release.

Hello,

Thank you for your reply!

I have sent you a private message with the access data.

Thank you for your help!

Best regards
Stefan

Hi.
Can I hijack this thread. I have the same problem.

I tried with ContentTools and SimpleMDE. With ContentTools the buttons and controls show up but nothing on the page is editable. With SimpleMDE I see the Edit Me Button on the top right of the page but cannot click on it.

We use the grayscale theme. The testing site can be viewed here: www.8horses.ch/neue-site/

Screenshot
editable.yaml:

enabled: true
active_admin: false
editor: contenttools
editable_self: true

@kaepsele, For some reason I don't have a private message from you in this Forum.

@simonstar66, No problem about hijacking; this is all valuable feedback. Your config file looks good to me, that is if I put it in between triple backticks (hint):

enabled: true
active_admin: false
editor: contenttools
editable_self: true

With ContentTools make sure your page content is HTML. ContentTools can not edit markdown so if you use a standard Grav page, which by default uses markdown nothing will happen.

To make sure the Edit button will be on top of al other HTML elements in the page, through CSS I gave it a z-index of 1000. Usually this is enough. But the Greyscale theme navigation bar has a z-index of 1030 so effectively it covers the Edit button and makes the button inaccessible. In fact the SimpleMDE editor itself is also partially hidden behind the Greyscale nav bar making the toolbar useless.

The fix is simple. In the file user/plugins/editable/editors/simplemde/css/customstyles.css just add z-index: 10000 to the editable class, so that class looks like this :

.editable {
  margin-top: 32px;
  position: relative;
  z-index: 10000;
}

I'll apply this fix to the current code on GitHub.
Thanks!

Thanks for the quick reply.

The missing underlines in the editable.yaml were just a copy paste issue in the forum. I had them correct.

I changed the css and also moved the button a bit down out of the way of the navbar. But I still cannot click on it.

For ContentTools I don't really understand. How would I switch the content to html? Screenshot2

Well, with the change SimpleMDE works fine on a clean Greyscale theme.

You can enter HTML as page content just as you write markdown. For example, create a new page and instead of:

## Hello

write:

<h2>Hello</h2>

The word "Hello" will be editable by ContentTools.

I looked at the source of your CT and MD editable examples and while on your pages the editable content is wrapped in a data-editable div this is not the case on my side (in ContentTools mode) the div exists but is empty. The content of the page only follows later.
Putting part of the page content in <h2> brackets didn't change anything.

<div data-editable="" data-name="editable___privat"><p class="ce-element--empty ce-element ce-element--type-text"></p></div>

vs.

<div data-editable="" data-name="editable___demo-ct-1"><h2>
    Demo CT-1
</h2>
<p>
    This is a demo of the "<i>editable_self</i>" mode.
</p>
<p>
    You can start editing this page by clicking on the <b>blue</b> pencil icon on the top left.
</p>
<p>
    Change text, save by clicking the green check icon and reload the page. Also try to move blocks around on the page.
</p></div>

Anyways, I think the end of my html, css, etc ... knowledge is almost reached. I could try to start fresh with an unchanged grayscale template

Don't worry, your knowledge will increase with every problem you encounter and overcome. Just start over and from a working situation slowly change the theme until the editor breaks.

Thanks.
I quickly switched to a fresh grayscale theme. Still the same behaviour on both editors.
The theme works with modular pages. Might that be the issue?

In Safari I manually edited the page source and shifted the page content inside the data-editable div. And the editing with ContentTools worked.

But now I'm definitely at the end of my knowledge. The malfunction on my site must have to do with the way the plugin places the div for the editable content.

Both editors use a Twig template to insert a div which "includes" the editor in a page. These templates are located in a 'templates' folder in the editors folder, e.g. user/plugins/editable/editors/contenttools/templates/contenttools.htm l.twig.

You can download the fresh setup I did yesterday from this link. Please let me know.

Hmmm. I overlooked the fact that the complete editable div was hiding the save/fail confirmation visual because of it's high z-index. So I set that z-index to 10001 :)

This has resulted in an updated zip. Please use this one.

To demonstrate the working please see attached animated GIFs.

8horses-SimpleMDE

8horses-ContentTools

for downloading do I need access data?

The download is not password protected.

Please look at the attachment...

Download-1 Download-2

This is very strange. I removed the first link so that might explain your first screenshot ('Download-1). The new link should work without the need to login. Are you sure the screenshot "Download-2" is the result of clicking the link I posted earlier today: https://warden.stackstorage.com/s/irjiQdQ22d3UCZg ?

If you keep having trouble to download, I could put the zip file somewhere else.

Hi Bleutzinn

Just a quick feedback: I got editing with ContentTools to work. But I think the problem rather lied in the modular pages. It works now on a non-modular page.
Thanks a lot already. I will get back later after some more testing and see if I also get simplemde to work.

@simonstar66, I think we are getting to the point here.

Editable works on page content stored in the page file. Usually this is a "default.md" file. Technically Editable can also work with content stored in a modular page. The requirement in that case is that this content can not be a collection. As the whole purpose of modular pages is to assemble and display content from other pages (as a collection) I think Editable should be prevented to "run" or act upon a modular page.

Ok. I understand.
Most themes including Grayscale use modular pages as a way to combine different layouts in one page, which in our case I mostly use for the full page background image in the header. I think it would be doable to convert the page to work without modular pages.
But do you see a way to make Editable work with modular pages? How about disabling editable_self on a global level and enabling it on the modular sections that should be editable?