PANmedia / raptor-editor

Raptor, an HTML5 WYSIWYG content editor!
www.raptor-editor.com
GNU General Public License v3.0
533 stars 136 forks source link

Event needed for when the editor exists in the DOM #167

Closed BOOKPATH closed 8 years ago

BOOKPATH commented 10 years ago

Currently ready fires too early. I need to know when the editor is in the DOM and accessible.

Any chance of adding a new event, like 'complete', or 'finished', means everything is built and the editor is visible.

I need this as my textarea is display: none, raptor then sets the editor to display none as well (is there any way to change this behaviour?), but ready fires before it is in the DOM. I know that raptor sets display: none on the textarea itself, but I want it hidden as I'm displaying a message that the editor is loading.

Petah commented 10 years ago

layoutReady might be the event you are looking for:

https://github.com/PANmedia/raptor-editor/blob/master/src/components/layout/toolbar.js#L199

BOOKPATH commented 10 years ago

Hi,

I tried this, it never seems to fire.

Here is my base sitewide config fur raptor, I have setup certain events

Petah commented 10 years ago

I had a deeper look. Seems there is some inconsistencies with the naming of events. I have pushed out a fix to normalise the names:

https://github.com/PANmedia/raptor-editor/commit/1f90520402e290d3009effb4f68bd4fc38d92ef0

Also note, layoutReady is fired when the UI DOM is attached, and layoutShow is called when the UI becomes visible.

BOOKPATH commented 10 years ago

Seems to work now, but the change to fire: needs removing, if I add that it doesn't work.

But I still need an event that fires when the wrapper is applied to the dom element.

when layoutShow fires '.raptor-editable-block' is in the DOM, but the wrapper (it's parent) is not there yet ('.raptor-plugin-dock-inline-wrapper'). That is what I need to edit as it gets its display property from the textarea, which in my case is display: none.

Petah commented 10 years ago

Hmm, I'll have another look tomorrow. If you could show me an example page with exactly what you want it would help.

BOOKPATH commented 10 years ago

HI, sorry raptor isn't installed on any live site at the moment as I was building some plugins that are needed before replacing the editor I was using before raptor, but I have some screenshots.

1 - Here is a page where raptor is used, I have the textarea (under the label description set to display: none) and show a loading message.

loading

2 - What I then want to do is hide the loading message (which I do in the ready event) when the raptor editor is finished and ready.

loaded

3 - What you actually see is the following:

actual_load

Why? Because my textarea is hidden, so is raptor... that is why I need an event that lets me know when the editor is there with all wrappers, as it is the wrapper that has the same display settings as the textarea - I have tested this, if I don't hide the textarea, I can see raptor's editor without any problems.

I have tried the layoutShow and layoutReady events but what is in the DOM then is just the '.raptor-editable-block', sometime after this event a wrap is added around this (for the toolbars???) so it is all contained in one div. This div '.raptor-plugin-dock-inline-wrapper' unfortunately has the same display properties as the textarea, so I need to know when this wrapper is in the dom through some kind of event so that I can change it's display css. I can't override this in my css as the css is set as the style attribute on the wrapper.

I hope this explains the problem as I can't provide a live link for sometime.

Or maybe you could provide some css object in options that should be applied to the wrapper, instead of just giving it the same settings as the textarea?

Petah commented 10 years ago

I have pushed out some more changes, and an example if you could give it a try:

https://github.com/PANmedia/raptor-example/blob/master/examples/background-load/example.php

deeknow commented 9 years ago

@BOOKPATH just checking to see how you got on with @Petah's example?

deeknow commented 8 years ago

closing as part of legacy support issue triage - can open a new task should this feature be still required by original poster, or others