Troubles with the plugin clips, it ignore our HTML

Redactor
#1

Hi,

we tried this JSON clips configuration:

[{
    "title":"right arrow",
    "clip":"cba<i class='gfx gfx-arrow-right'></i><h3>bingo</h3>"
},{
    "title":"Copyright",
    "clip":"©2013 modmore."
}]

and we have the correct result in our manager, but when you clic on a clips… the HTML of the clips is lost.
We tried different configuration of redactor without success. Our current config use redactor.deniedTags.

Do you have any idea for the reason of that?

thx

#2

Hi Samuel, this appears to be a bug that we are looking into (filed yesterday after a similar bug report as #378). It’s definitely supposed to let you do that but we suspect the last Redactor.js release got a bit too excited about filtering stuff out.

#3

Hi Mark,

Same issue here, and I bought Redactor exactly because I needed the clip feature.
Is there a way I can downgrade Redactor to a previous version?

Thanks!
Jean-Philippe

#4

I’m afraid our provider wont let you download older versions, so the only way to downgrade is to uninstall the most recent version if you had older versions installed before. I’ve also just answered your support ticket.

#5

This should be fixed in 2.0.3-pl which should be publicly available soon. One thing to note though, you may need to use the advanced attribute for “advanced” clips like so:

[
{
"title":"Buy Button",
"clip":"<a href='https://www.modmore.com/extras/?p=127' class='buy'>Buy this product     now</a>.",
"advanced":true
},
{
"title":"Copyright",
"clip":"©2013 modmore."
}
]
1 Like
Redactor 2.0.3: fixes Clips and path placeholders
#6

2.0.3 is now available.

#7

Hi @mhamstra thx for the fix,

now the clips work but his behaviour is special when you use the advanced:true … :neutral_face:

I’ll describe here the test done, but first I’ll provide my configuration.

The clips JSON for test

[{
    "title":"right arrow",
    "clip":"<i class='gfx gfx-arrow-right'></i><span class='gfx gfx-arrow-right'></span>",
    "advanced":true
},{
    "title":"p",
    "clip":"<p>paragraph</p>",
    "advanced":true
},{
    "title":"pre",
    "clip":"<pre>pre</pre>",
    "advanced":true
},{
    "title":"blockquote",
    "clip":"<blockquote>blockquote</blockquote>",
    "advanced":true
},{
    "title":"only text",
    "clip":"only text"
}]

Notes:

  • for this test I use your Redactor v2.0.3.
  • you will need some paragraph of text already writed

Test 1: insert the right arrow clip in the middle of a text
The result is that your HTML tag will be insert at the end of the paragraph and not at the cursor’s position.

Test 2: insert the p clip in the middle of a text
The result is that your HTML tag will be insert at the correct place, but will be converted to a span with a inline style declaration!

Test 3: insert the pre clip in the middle of a text
The result is the same as test 2.

Test 4: insert the blockquote clip in the middle of a text
Nice! it woks like expected!
Add the HTML, split the paragraph in 2 paragraph. But this behaviour is valid only for this test.

Test 5: insert the only text clip in the middle of a text
Work perfectly. Inert the text in the right place.

Some considerations

  • another test can by done on the tag <a/>
  • some important apsect for the usability are:
    • insert the HTML in the correct place
    • if possible allow the selection of the inserted HTML (in this moment if you try to select the clip right arrow will not be possible)

I hope that this test scenario can help you, in every case thx for your job :beers:

#8

Hi Samuel, apologies for taking so long to respond (thanks for your PM!).

For the p, pre and blockquote examples I would probably recommend custom formatting instead of Clips, I think that would be better suited for setting or changing the block-level tag, clips is more for inserting fixed pieces of text.

Especially that first test looks weird though, not sure why it’s being appended at the end. I’ve opened an issue in our tracker (#388) and will report back when we know more.

1 Like
#9

When the advanced attribute is set we use the insert.htmlWithoutClean() API method to insert the selection as is. For some reason since Samuel’s clip tags don’t contain any innerHTML they don’t get inserted correctly. This can be worked around using this code:

[{
"title":"right arrow",
"clip":"<i class='gfx gfx-arrow-right'>&nbsp;</i><span class='gfx gfx-arrow-right'>&nbsp;</span>",
"advanced":true
}]

Notice the &nbsp; being used within the <i> and <span> tags. I’m not sure if this is acceptable, but if you give it a try I believe you should notice the clip is inserted in the current position. Another work around would be to use a chunk for the icons like so:

Create a Chunk named icon with this code:

Then use this clipsJSON:
[{
“title”:“right arrow”,
“clip”:"[[$icon? &icon=arrow-right]]"
}]

(shouldn’t need advanced since it isn’t HTML anymore)

This will inserted [[$icon? &icon=arrow-right]] in Redactor, which as far as Redactor is concerned is plain text.

#10

Hi Samuel,

Redactor 2.0.6 is now available with a bug fix for this issue. Please update and let us know if you experience any further trouble or have any questions!

1 Like
#11

Same issue here, and I bought Redactor exactly because I needed the clip feature.
Is there a way I can downgrade Redactor to a previous version?

#12

Hi @crysmarye - the issues from this thread were resolved in 2.0.3 and 2.0.6. If you’re on the latest version, you shouldn’t be having those issues. If you’re still having problems with clips, please open a new topic with details.

#13

Hi,

Can you add instructions about advanced feature here also:
https://docs.modmore.com/en/Redactor/v2.x/Clips.html