• Welcome to the Chevereto user community!

    Here users from all over the world gather around to learn the latest about Chevereto and contribute with ideas to improve the software.

    Please keep in mind:

    • 😌 This community is user driven. Be polite with other users.
    • 👉 Is required to purchase a Chevereto license to participate in this community (doesn't apply to Pre-sales).
    • 💸 Purchase a Pro Subscription to get access to active software support and faster ticket response times.

Popup upload plugin, not showing as expected in IPBoard

Artefact

Chevereto Noob
Hi,

I am currently experimenting your (nice) demo PUP on my Invision Power community.
Everything works properly (images are uploaded, link is correctly inserted in the text area, etc.) except that the button doesn't show up in the editor toolbar, but below the text area.

I carefully read the documentation to try and add options but none of them gave me the expected behaviour.
I took a couple of screenshots to illustrate the different results I managed to get :

1. With default code
HTML:
<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

default.jpg

The button shows up below the editable textarea.

2. If i explicitly add the vendor
HTML:
<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-vendor="ipb"</script>
ipb.jpg

The button has completely disappeared.

3. If now I also enable the fit-editor option
HTML:
<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-vendor="ipb" data-fit-editor="1"</script>

ipbfiteditorQuickereply.jpgipbfiteditor.jpg

Not only the button is back, but its place has changed, and it is now also visible before clicking in the quick reply area (so, before the editor is even loaded.)
I also tried to use the observe and observe-cache options without success.

4. Notably, if I force data-vendor to other board types that the one I use, some of them (two example below with discourse and nodebb), the button shows up elsewhere (above the editor toolbar, and as a small button without text.)

discourse.jpg

nodebb.jpg

Overall, it seems to me that my ipb version is not totally recognized.
I use IP Suite version 4.4.3, with the CKEditor 4.11.4 (version provided by default by Invision Power).
I only have very minor customizations (theme and plugins) but even switching back to all default settings of IPB doesn't solve this issue.

Many thanks for your help!
 
I don't recall which was the current IPB version when I did pup.js, this is the IPB thing in pup.js:

[CODE lang="javascript" title="pup.dev.js"] ipb: {
settings: {
autoInsert: 'html-embed-medium',
html: '<a %x class="cke_button cke_button_off %bClass" title="%text" tabindex="-1" hidefocus="true" role="button"><span class="cke_button_icon">%iconSvg</span><span class="cke_button_label" aria-hidden="false">%text</span><span class="cke_button_label" aria-hidden="false"></span></a>',
sibling: '.cke_button__ipslink',
siblingPos: 'before',
css: '.cke_button.%bClass{background:%1;position:relative}.cke_button.%bClass:hover{background:%3;border-color:%5}.cke_button.%bClass svg{font-size:15px;width:1em;height:1em;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;left:50%;top:50%;fill:%2}.cke_button.%bClass:hover svg{fill:%4}'
},
palettes: {
default: ['inherit', '#444', '', 'inherit']
},
check: 'ips',
getEditorFn: function() {
var id = this.getEditor().dataset.ipseditorName;
return CKEDITOR.instances[id];
},
getEditor: function() {
return document.querySelector('[data-ipseditor-name]');
},
editorValue: function(str) {
var element = CKEDITOR.dom.element.createFromHtml('<p>' + str + '</p>');
this.getEditorFn().insertElement(element);
},
useCustomEditor: function() {
return 1;
}
}[/CODE]

Most likely that detection is outdated.
 
Thanks for your answer. I'm not sure I understand what you mean by "detection": do you think they could have change the css selector for the link button? which would prevent the plugin to find where to place it? shall I check that and if relevant, override the data-sibling property?
 
Many thanks for your time. I'll be very happy to contribute and pull a request if I find a workaround :)

Just to let you (or other users passing by) know :
Eventually with the explicit inclusion of "data-vendor=ipb", the button does appear... from time to time. That's probably why I missed it in the first place. Apparently it shows up "more often" after forced IPS cache refresh and/or patience, which made be suspect some cache issues (inconclusive investigation for the moment.)

I also noticed that suppressing the asynchronous property (+ inserting the code snippet after inclusion of CKEditor scripts) makes the button consistently and reliably work on Windows+Chrome. But in this case, it never shows up anymore on other platforms (neither Windows+Firefox nor Android+Chrome ; I couldn't test more combinations for now.) By contrast, with the proposed async version, the button appears sporadically on all tested platforms.

I'll give some update if I manage to narrow down the riddle!
 
Problem solved! :)

Eventually, the timeout of 200ms in the waitForSibling method was a little short for last versions of CKEditors.
As the optimal parameter may depend on each configuration (depending on how many additional plugins and custom buttons people use), I don't think it would be relevant to commit a new version just for the value that suits for me. There is a compromise to find between the blink effect and the risk of not waiting enough to have the editor loaded.

I may try to fork the plugin to integrate this as an optional user parameter, but it will probably take me some time, so, I just wanted to let a trace of the quickfix here.
 
Hi everybody, I hope it's okay when I ask in this thread because I have the same setup but much bigger problems (CKEditor, IPS).

I mean I don't care where the button is displayed, the problem is nothing is inserted in the textfield at all. I can click the button, the popup opens, I upload my pics and then the popup closes, that's all.

Tested on 2 completely different sites with the same default plugin code (one is a fresh installation without any other modifications). To make sure I tested exactly the same code with another editor (Froala, XF), where it works fine.

Is there some kind of special setting to make pup.js work with CKEditor?
 
Back
Top