I'm working on an email editor using the last ckeditor version.
To provide compatibility with outlook, I need to force HSPACE and VSPACE on images.
I found some workarounds that have been working on previous ckeditor version.
Now CKEDITOR output is:
<p><img alt="" src="/userfiles/images/river.jpg" style="float:left; height:900px; margin:10px; width:1600px" /></p>
I need something like:
<p><img alt="" src="/userfiles/images/river.jpg" align="left" vspace="10" hspace="10" /></p>
Any idea how to achieve that on the last ckeditor version?
Thank you in advance
My method would be simpler than modifying ckeditor. I would attempt to do something like the following. Disclaimer, the regex here probably doesn't work as written. Regex is not my strength and it takes a lot of research and time for me to get it right. And depending on the various possibilities for your output, you might have to loop through multiple images if each has different needs. But as an idea.... I am replacing the whole style statement with the vspace and hspace settings. Note, editor is the name of your instance of the editor
window.onbeforeunload = function (e) {
data = CKEDITOR.instances.editor.getData();
data = data.replace(/<style=(.*)>/g, 'align="left" vspace="10" hspace="10"');
CKEDITOR.instances.editor.setData(data);
};
Related
Since I upgraded from Pandoc v1.19 to 2.9, decorative images are not exported as expected anymore.
First of all, when generating HTML from , in v1.19 a <p class="figure"> structure was wrapped around the image, but now it's only a <p>:
<p>
<img src="test.jpg">
</p>
This makes it harder to style in line with other images that have an alternative text.
But what's really a problem here: there's no alt="" attribute produced anymore! This means that e.g. screen readers will not recognise this as a decorative image anymore.
So let's see what happens to an image with an actual alternative text, e.g. when generating HTML from :
<div class="figure">
<img src="test.jpg" alt="">
<p class="caption">Hello</p>
</div>
Here we get a class="figure" in the surrounding element, but now it's a <div> instead of a <p> (I don't bother too much about this, but again, it makes it harder to style everything the same).
What again is a big problem though is the fact that the alt attribute is now set empty: this prevents screen readers from perceiving them at all, which is horribly wrong! I guess that Pandoc concludes that having alternative text and caption would be redundant, which is correct, and that the caption below would be the right thing to show - which it is not.
The right structure would look something like this:
<div class="figure">
<img src="test.jpg" alt="Hello"><!-- Leave the alternative text on the image -->
<p class="caption" aria-hidden="true">Hello</p><!-- Hide the redundant visual alternative text from screen readers -->
</div>
Any reason why this behaviour would make sense? Can it be changed somehow? Otherwise I will have to fiddle around with some post-processing JavaScript...
The  example is no longer treated as a figure, because pandoc now requires that
the image is the only element in a paragraph, and
it has a caption.
Wrapping of figures with <div> happens when exporting to HTML4. Using the latest pandoc 2.9.2.1 and running pandoc -t html5 on the input 
<figure>
<img src="test.jpg" alt="" /><figcaption>Hello</figcaption>
</figure>
The rationale for emitting an empty alt attribute is that screen readers would read the caption twice: first the alt, then the figcaption. Your suggestion seems much better, please open an issue.
If you can't wait for a new release, then use a Lua filter to create figures the way you like:
function Para (p)
if #p.content == 1 and p.content[1].t == "Image" then
local image = p.content[1]
local figure_content = pandoc.List{}
figure_content:insert(image)
figure_content:insert(
pandoc.RawInline('html', '\n<p class=caption aria-hidden="true">'))
figure_content:extend(image.caption)
figure_content:insert(pandoc.RawInline('html', '</p>'))
local attr = pandoc.Attr("", {"figure"})
return pandoc.Div({pandoc.Plain(figure_content)}, attr)
end
end
I have this line in code into a longtext field in ckeditor:
<div style="width:100%"> <canvas id="canvas3"></canvas></div>
but when I save then delete and replace by:
<div style="width:100%"> </div>
so delete all: I use to show graphics. Any idea to solved it?
Thanks
You need to add config.extraAllowedContent = 'canvas[*]{*}(*)'; inside your config.js. Basically none of existing plugins has reported canvas element to Advanced Content Filter (ACF) thus they get removed. This filter lets you decide what tags, attributes, styles and classes can be used inside the editor.
Once you add this, please simply switch to source mode. If canvas are there it means CKEditor is fixed and it no longer removes that tag. If the tag, despite being in editor, still isn't saved in your data base, please check your server-side code for potential HTML filters.
If you wish learn more about ACF, please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I am trying to mask an element that has some images inside of it, using only css.
i have done this and it works fine in webkit using -webkit-mask-box-image and its doing just what i want, but im having trouble using other browsers.
gecko is supposed to work using mask, and that tag does show up in firebug, but it doesnt actually use the mask.. i've also tried converting the png im using to base64 data uri, but to no avail.
example: http://jsfiddle.net/nNLta/
does anyone know the correct way for doing this?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
example: http://jsfiddle.net/nNLta/
Part 1
mask is not the same as mask-box-image unfortunately. If you read the (rather sparse) docs you will see it is applicable to SVG only. More on this later.
Currently Gecko doesn't support 'mask-box-image' - if you search the MDN you'll see it applies to -webkit- only.
Additionally I don't think this is actually spec. Webkit has had this capability/concept for ages (in various forms like -webkit-box-reflect) and I think that it's just a hangover from those days. I'm not sure whether this will even be adopted by all browser vendors (although I hope, and it makes sense that, it will).
Part 2
To use the svg dependant mask: css property you need to create an SVG element and reference that. Here is a guide. I've not used this technique before so I'm afraid that's all the detail I'm going to go into right now.
An alternate option
If you don't need a clever repeating/growing mask why not create a large png and overlay the text/image you wish to hide. I'm not sure I understand what you are ultimately trying to do but this seems pretty simple to me. The obvious issue is when you need the stuff behind the mask to be selectable/interactable (err..interactive that is...); for instance when you wish to apply masking to text or links. A way around this is to use pointer-events:none which is supported in Gecko and Webkit (but nothing else...). Here's more from the MDN
Sorry I don't have better news - if none of the above is helpful please feel free to leave a comment with your specific requirement and we'll see if we can't work around the browser limitations.
Hope this is helpful!
The Problem:
I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.
It seemed like the type of problem that would have a simple fix but I struggled with it for a while.
I tried the solution at:
JQTransform - Exclude an element from styling?
This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.
What has produced usable results is adding:
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>
This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.
Then I added:
$(function () {
$( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
});
and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.
(I know you're now asking: "Then why are you here?")
The Question:
Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?
If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:
<div class="donot-jqtransform">
<?php
echo printCaptchaPlugin();
?>
</div>
or
<div class="donot-jqtransform">
<%= PrintPasswordValidationPlugin() >
</div>
That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.
well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems
I'm creating regular input fields (css styled) and you won't have those problems
https://github.com/pkoretic/csTransPie
It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!
all suggestions are welcome!
Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.
I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)
if (textarea.parents().hasClass('jqTransformIgnore')) { return; }
I then just had to add the jqtransformIgnore class to the recaptcha div...
<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>
... and that did the trick!