Can't enter javascript using CKEditor dialog - javascript

Been trying to enter some javascript using a CKEditor dialog, tried editor.document.createFromHtml('<script> some javascript </script>');
which only created a set of empty script tags. Did not really change anything and now I get the error:
createFromHtml is not a function
and cannot figure out what is wrong.
onOk : function()
{
//var eHtml = this.getContentElement('tab1','selectedGraph').getElement();
var graphscript = editor.document.createFromHtml( ' <script type="text/javascript"> <script>' );
//var graph = editor.document.createElement( 'div' );
//graph.setAttribute('id', 'graph'); //dialog.getValueOf( 'tab1', 'abbr' ) );
//editor.insertElement( graph );
//graphscript.setValue('test'); //dialog.getValueOf( 'tab1', 'abbr' ) );
//editor.insertElement( graphscript );
}

I got it working by using this:
CKEDITOR.dom.element.createFromHtml('somejavascipt', editor.document );

Take a look at:
http://ckeditor.com/forums/CKEditor/Trouble-getting-CKEditor-to-load-in-a-jqueryui-Dialog-where-the-dialog-used-load-url
http://ckeditor.com/forums/Support/Second-Time-jQuery-Doesnt-Work
they had the same problem then figured it out so this should help you

Related

Editing the gravityforms form tag?

I need my gravityforms form tag to have an "oninput" in it.
Like so:
<form oninput="loanval.value=parseInt(loan.value, 10).toLocaleString('en-US').replace(',', ' ');">
I read about the gravity forms hooks, but there not really a lot of documentation and I'm not very experienced with coding. Does anyone know how I can accomplish this?
You can use the gform_form_tag-filter. It is documented over here: https://www.gravityhelp.com/documentation/article/gform_form_tag/. For your example it would look something like this:
add_filter( 'gform_form_tag', 'form_tag', 10, 2 );
function form_tag( $form_tag, $form ) {
if ( $form['id'] != 3 ) { //Select the form by ID
return $form_tag;
}
$form_tag = str_ireplace( "<form", "<form oninput=\"loanval.value=parseInt(loan.value, 10).toLocaleString('en-US').replace(',', ' ');\"", $form_tag );
return $form_tag;
}
But you could also use jQuery to do your Javascript on change, which is more simple and accomplishes the same effect as your oninput-attribute:
jQuery(function($) {
// "gform_1" Target the form by id
$('#gform_1 input, #gform_1 textarea').on('change', function() {
// Do your "oninput" code
}
});
Change the ID's to target the desired form. For example if your form has ID 20, then change it to #gform_20.
If jQuery is available and either the form ID is static or you have access to it in your JS, I would go with BasC's jQuery approach.
Otherwise, here's a super simple plugin that will allow you to put the event attribute (any event attribute) on the <form> tag itself.
http://gravitywiz.com/gravity-forms-tag-editor/
Example usage:
new GW_Tag_Editor( array(
'tag' => 'form',
'form_id' => 123,
'oninput' => 'loanval.value=parseInt(loan.value, 10).toLocaleString('en-US').replace(',', ' ');'
) );

Span tag inside the div tag is not appearing

I have to create a span inside the div tag in CKEditor on onclick event of dialog window. I tried the following code but it is not working.
link = editor.document.createElement( 'div' );
this.commitContent( data );
link.setAttribute('itemscope','');
link.setAttribute( 'itemtype', 'http://schema.org/Person' );
link.setAttribute( 'id', 'person' );
link1 = editor.document.createElement( 'span' );
document.getElementById("person").appendChild(link1);
link1.setAttribute( 'itemprop', data.prop );
You completely mixed up native DOM API with CKEditor's API. It's even hard to guess what you had in mind writing that code, but I hope that this will help you a little:
var link = editor.document.createElement( 'div' );
this.commitContent( data );
link.setAttributes( {
itemscope: '',
itemtype: 'http://schema.org/Person',
id: 'person'
} );
// Now you need to append link somewhere...
editor.editable().append( link );
var link1 = editor.document.createElement( 'span' );
link1.appendTo( link );
link1.setAttribute( 'itemprop', data.prop );

Plugin for CKeditor to add multiple styles

Codewaggle's answer here got me started and I also have looked at Reinmar's answer, but I can't quite put this together.
I want to create a plugin with five custom spans (correction, deletion, suggestion...etc.) that I can then add to my CSS and have a button to apply each style using CKeditor in Drupal 7.
I don't want to use the drop-down for styles and prefer to have buttons with icons for each class added.
I used the basicstyles plugin as a jumping off point, but I have never done anything in javascript before so I am really in the dark.
I have added
config.extraPlugins = 'poligoeditstyles';
to the config file and set up the file structure of my plugin according to the guide on the CKeditor.
I assume that if all has gone according to plan I should see a button to drag into my toolbar, but, alas! No joy. I can see nothing added to my CKeditor toolbar when I add content or on the configuration page in Drupal:
admin/config/content/ckeditor/edit/Advanced
Am I missing something? Any help would be appreciated!
Here's my plugin code:
/**
* POLIGO edit styles plug-in for CKeditor based on the Basic Styles plugin
*/
CKEDITOR.plugins.add( 'poligoeditstyles', {
icons: 'correction,suggestion,deletion,commendation,dontunderstand', // %REMOVE_LINE_CORE%
init: function( editor ) {
var order = 0;
// All buttons use the same code to register. So, to avoid
// duplications, let's use this tool function.
var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
// Disable the command if no definition is configured.
if ( !styleDefiniton )
return;
var style = new CKEDITOR.style( styleDefiniton );
// Listen to contextual style activation.
editor.attachStyleStateChange( style, function( state ) {
!editor.readOnly && editor.getCommand( commandName ).setState( state );
});
// Create the command that can be used to apply the style.
editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
// Register the button, if the button plugin is loaded.
if ( editor.ui.addButton ) {
editor.ui.addButton( buttonName, {
label: buttonLabel,
command: commandName,
toolbar: 'poligoeditstyles,' + ( order += 10 )
});
}
};
var config = editor.config,
lang = editor.lang;
addButtonCommand( 'Correction', 'That's a mistake', 'correction', config.coreStyles_correction );
addButtonCommand( 'Suggestion', 'That's OK, but I suggest...', 'suggestion', config.coreStyles_suggestion );
addButtonCommand( 'Deletion', 'You don't need that', 'deletion', config.coreStyles_deletion );
addButtonCommand( 'Commendation', 'Great job!', 'commendation', config.coreStyles_commendation );
addButtonCommand( 'Dontunderstand', 'I don't understand what you mean', 'dontunderstand', config.coreStyles_dontunderstand );
}
});
// POLIGO Editor Inline Styles.
CKEDITOR.config.coreStyles_correction = { element : 'span', attributes : { 'class': 'correction' }};
CKEDITOR.config.coreStyles_suggestion = { element : 'span', attributes : { 'class': 'suggestion' }};
CKEDITOR.config.coreStyles_deletion = { element : 'span', attributes : { 'class': 'deletion' }};
CKEDITOR.config.coreStyles_commendation = { element : 'span', attributes : { 'class': 'commendation' }};
CKEDITOR.config.coreStyles_dontunderstand = { element : 'span', attributes : { 'class': 'dontunderstand' }};
Shot in the dark here but have you added your button to your config.toolbar in your initialization or config somewhere else - see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

Apply background-color in ckeditor textarea

I'm having some problems to apply a background-color in the textarea of a ckeditor instance.
When the user clicks on submit without adding any text, it's shown a message telling him to fill all the required fields, and these required fields areas all with the text-fields set with background-color: #CFC183;.
As the ckeditor is created with javascript code, I was using it to try to check if there's any text entered in the text area. if there's no character, I apply the changes.
When I apply in the console this code:
CKEDITOR.instances.body.document.getBody().setStyle('background-color', '#CFC183');
It applies the background exactly like I want to.
So, I added this javascript code in my javascript file to try to manage it, but doesn't seems to be working. Here's my code:
var editorInstance = CKEDITOR.replace('body', { toolbar : 'Full' });
editorInstance.on("instanceReady", function (ev) {
var editorCKE = CKEDITOR.instances.body; readyMap[editorCKE] = true;
editorCKE.setReadOnly(true);
});
var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();
if (!hasText) {
CKEDITOR.on('instanceCreated', function(e) {
e.editor.document.getBody().setStyle('background-color', '#CFC183');
});
}
Firebug shows this error message:
TypeError: CKEDITOR.instances.body.document is undefined
I'm not that good at Javascript, so is there anything wrong with my code?
I already checked this question here, so I believe there's something wrong with my javascript code and I want your help, please.
I guess that you've got an error in this line:
var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();
This is because you're trying to get document element before it's ready (before instanceReady event).
The same error will be thrown here:
if (!hasText) {
CKEDITOR.on('instanceCreated', function(e) {
e.editor.document.getBody().setStyle('background-color', '#CFC183');
});
}
Again - instanceCreated is still too early. You have to move all that code to instanceReady listener. You'll have something like (I'm not sure if I understand what you're trying to achieve):
var editor = CKEDITOR.replace( 'body', { toolbar: 'Full' } );
editor.on( 'instanceReady', function( evt ) {
readyMap[ editor.name ] = true;
editor.setReadOnly( true );
var hasText = editor.document.getBody().getFirst().getText();
if ( !hasText ) {
editor.document.getBody().setStyle( 'background-color', '#CFC183' );
}
} );
As you can see, there is one more issue in your code:
readyMap[editorCKE] = true;
In JS there are no weak maps (yet, but they will be introduced soon). Only strings can be used as a keys of an object. In your case toString() method will be called on editorCKE, which returns [object Object]. That's why I added name property there.

How to overwrite language labels in TinyMCE

I'd like to change language labels used in TinyMCE. E.g. "Überschrift 2" -> "Überschrift".
Im using the jQuery plugins version of TinyMCE.
Is there a way to overwrite those labels without editing the label files?
Just found this question and I did it in the following way (using tinyMCE 4.1.x):
tinymce.init({
language : 'en_GB',
init_instance_callback : function(editor) {
tinymce.i18n.data.en_GB['New window'] = 'Open in new tab or window';
tinymce.i18n.data.en_GB.Target = 'Options';
}
});
What this does is override the defaults with your text after the editor has been initialised. No need to edit any lang files
yeah look for the 'langs' folder edit de.js.
It is possible.
I've tested it at least for my own localization strings, using helpers geti18nstring() and set18nstring() handling tinymce.i18n property.
BTW, Here is the 'full' documentation http://www.tinymce.com/wiki.php/API3:property.tinymce.i18n of property. :)
The rest of snippet is done using well-known agile pattern 'trust-the-source-Luke'.
// folder: plugins/mycustomtinymceplugin
//
// file: ./langs/en_dlg.js
tinyMCE.addI18n('en.mycustomtinymceplugin_dlg',{charts:"Some charts"});
// file: mycustomtinymceplugin.html <-- opened by ./editor_plugin.js#init ed.windowManager.open({file : url + '/mycustomtinymceplugin.html'
<script>
function geti18nstring( id )
{
return tinymce.i18n[ tinymce.activeEditor.settings.language + '.mycustomtinymceplugin_dlg.' + id ];
}
function seti18nstring( id, i18nstring )
{
//just for curiosity if you wan't to modify something in a plugin which is killed after modification
if( geti18nString( id ) == i18nstring )
{
alert( 'id['+id+'] was replaced already with [' + i18nstring +'].' );
}
else
{
tinymce.i18n[ tinymce.activeEditor.settings.language + '.mycustomtinymceplugin_dlg.' + id ] = i18nstring;
}
}
function dostuffonpluginstart()
{
//to get localized strings
var charts_text = geti18nstring('charts');
$('#chartlist').append( charts_text );
...
//to manipulate localized strings
seti18nstring( 'charts', 'karamba' );
charts_text = geti18nstring('charts');
$('#chartlist').append( charts_text )
}
</script>
...
<div id"chartlist"></div>

Categories