How to select element inside CKEditor by class using Jquery - ckeditor

I cannot find out how to select element inside CKEditor by class using jQuery selector, so any help is appreciated.

CKEDITOR.instances.editor1.window.getFrame().$ retrieves a native DOM element for editor editable area. So:
$( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find( anything );
Should solve your problem.
Also note that CKEditor provides an API for DOM manipulation:
CKEDITOR.instances.editor1.document.getById( 'someId' );
CKEDITOR.instances.editor1.document.getElementsByTag( 'div' );

This one worked for me:
$(youreditor.document.find('anything'))
where youreditor is
youreditor = CKEDITOR.replace( '' ... etc

If you using jQuery Adapter (tested on 4.4.3 version)
$( $('.your_selector').ckeditor().editor.window.getFrame().$).contents().find('a.super_link')

Related

How to change cursor icon in editable area dynamically in CKEditor (IE issue)?

IE 'contenteditable' implemntation is not allowing me to change the cursor property when ever the contenteditable property in CKEditor is set to 'true'(no issue if the contenteditable='false').
Not an issue in chrome in both cases whether the contenteditable is set to true/false.
tried to change it dynamically using the following code but was not successful
var element = $('iframe').contents().find('body.cke_show_borders').get(0);
var elem = CKEDITOR.dom.element.get( element );
elem.setStyle('cursor', 'pointer');
any idea to handle this please?
Thanks.
It is browser native bug.
You can reproduce this issue outside of CKEDITOR with following code:
<body style="cursor:pointer" contenteditable="true">
</body>
I doubt there are any workarounds for this.

Multiple ckeditor on the same page with same ID

I would like to be able to replace multiple text area by ckeditor, but they will all have the same ID. Do you know how to do, because now, after loading one editor, it stops.
The actual JavaScript code:
<script>
CKEDITOR.replace( 'advance_editor' );
</script>
Thank you !

Using Kendo components within a polymer custom element

I am researching how to add a layer of abstraction to Kendo UI components (e.g. grid).
One avenue I am exploring is wrapping up kendo components within a custom Polymer element; note that the Polymer element may contain more elements than just the kendo component.
This is one of my many attempts to get this working:
<polymer-element name="kendo-test" attributes="data">
<template>
<div id="grid"></div>
</template>
<script>
Polymer({
data: [],
ready: function () {
var element = $("#grid").kendoGrid({
dataSource: this.data,
...
});
}
});
</script>
The script block runs okay, but the grid element doesn't get rendered (in the shadow DOM or otherwise). The contents of the element variable show that Kendo has done its thing.
I've also tried embedding a script tag within the template so Kendo executes once it has been rendered, but then I can't bind my data property.
Does anyone know how Kendo UI (or any other DOM manipulating 3rd party package) can be wrapped inside of polymer elements successfully?
Thanks
Thanks to this answer I have found that you can reference shadow DOM elements if you use the Polymer reference and not the elements ID:
var element = $(this.$.grid).kendoGrid({

CDATA content messed up in CKEditor

I have the following CDATA content in the source string.
<![CDATA[This is something inside cdata <b>this is bold</b>]]
However, when this gets shown in WYSIWYG editor, this looks like :
this is bold]]
When i click "source" toolbar and check the contents, ckeditor had modified the original content to :
<!--[CDATA[This is something inside cdata <b-->
<p>this is bold]]</p>
You can see that ckeditor has tried to comment out CDATA but incorrectly handled it.
Is this a known bug ? Are there any workaround available to this ?
Use config.protectedSource in config.js:
CKEDITOR.editorConfig = function( config ) {
config.protectedSource.push( /<!\[CDATA\[[\s\S]*?\]\]>/g );
};
Once you start using protected source, you might find this plugin useful: http://ckeditor.com/addon/showprotected

Recaptcha translation

Does anyone know how to change text language from Recaptcha?
I've already tried:
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'fr',
};
</script>
But it doesn't change.
For the reCAPTCHA V2 widget you can override the default interface language detection as a parameter to the javascript. See the new docs.
<script src="https://www.google.com/recaptcha/api.js?hl=fr"></script>
set your lang at last of api address (persian "farsi"):
https://www.google.com/recaptcha/api.js?hl=fa
find your language short name in https://developers.google.com/recaptcha/docs/language
Append &hl=fr to the public key.
Appending the language code to your public key work very well :
define('RECAPTCHA_PUBLIC_KEY', '__YOUR_PUBLIC_KEY_HERE__&hl=fr');
echo recaptcha_get_html(RECAPTCHA_PUBLIC_KEY);
So you can remove your JavaScript from your code. Or leave it if you use other options, but remove "lang:'fr'"
If you mean the language in the actual images that you are trying to solve, unfortunately you can't change the language of that text, at least not yet. The only thing you can change is the language of the interface (the text/prompt in the widget, etc.).
Response to comment: well, according to the docs, you seem to have it right. Is this code place in the same page where the widget appears?
The docs also say:
you need to add the following code in your main HTML page anywhere before the <form> element where reCAPTCHA appears (this will not work if placed after the main script where reCAPTCHA is first invoked)
so also make sure that this code is placed before the <form> tag which encloses the reCAPTCHA widget.
RecaptchaOptions is never working.
Another solution is to add a parametrt hl= langCode while we including the captcha script
<script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . &hl=de">/script>
You pasted the incorrect js. There should not be a comma after lang: 'fr'. The correct code is:
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'fr'
};
</script>

Resources