Develop Reference

CKEditor - how to get the template attributes

I'm using CKEditor's template plugin to load the templates in the editor. In the templates I've defined likt this.
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}]
When the user selects a template, the html is loaded which is fine. But also, it would be great if there is a way to get the property of the current selected template from the CKEditor instance.
I need to get the html_et property value in this case. I didn't find anything in the documentation related to this. Any help would be appreciated.

#Lingasamy Sakthivel that is not how you define templates in CKEditor.
If you want to use templates, you need to create a file like the default one in templates plugin: https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/templates/default.js
NOTE: when defining my test template file, I have named the file my_template.js and have given the same name to template definition CKEDITOR.addTemplates( 'my_templates', {... for simplicity.
Now, Once you have the file ready, you can assign it to editor. To do that you need to specify path to your file (full or relative to context of your application) and definitions that should be loaded.
In the example below I'm loading the default CKEditor file as well as my custom one:
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
templates_files : [
'/myApp/ckeditor/plugins/templates/templates/default.js',
'/myApp/ckeditor/my_templates.js'
],
templates : 'default,my_templates'
});
This is for files - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates_files
This is for definitions - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates
Now the hard part. You have written you want to know which template was selected but to be honest I don't know any way in which you could do that except for changing plugin code.
When template definition is loaded, templates inside it are loaded one by one
and assigned an onclick handler. This is IMHO the place we you could add your custom code for getting the html_et property - https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/dialogs/templates.js#L53-L55.
To do that you would need to get the source version of the editor, make changes in template plugin and then building your editor (recommended approach):
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_source.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_build.html
Alternatively you can download CKEditor without the templates plugin (can be done using online builder where you can remove templates plugin from your build). Next you need to manually download that plugin, make your changes and add that plugin to editor by dropping plugin folder inside ckeditor/plugins folder and using the extraPlugins setting.

Can you try like this?
var editor = CKEDITOR.replace('editor1', {
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}
]
});
alert(editor.config.templates[0].html_et);

js: Using some custom jQuery

I have a bit unusual case in my project. The jQuery is loaded under a namespace, like
var grp = {
"jQuery": jQuery.noConflict(true)
};
So in my custom scripts I am doing:
(function($){...}(grp.jQuery);
The question I have is how to handle external jQuery plugins. E.g. I want to add autocomplete plugin, which depends on jQuery, and starts with
$(document).ready(function() { ....
And it looks like the only option to include them in source code like
<script type="text/javascript" src="/static/autocomplete_light/django_admin.js"></script>
would be to edit them all, which is not practical...

You have two options:
Move jQuery to where the plugins expect to find it (i.e. to a global)
Edit all the plugins to tell them where jQuery actually is
You could try writing a preprocessor that edits all the plugins for you at build time (this would probably be more work and more error prone than is worthwhile).

Assuming you are not using the $ variable name anywhere else,
maybe you can append it to the window on startup so it'll be available.
Something like:
(function(jQuery) {
window.$ = jQuery;
}(grp.jQuery))

jQuery Setup and issues

How do you set up jQuery in ColdFusion? I have downloaded 2.1.1.js created a js folder file and call the library like so .. <script src="/js/jquery-2.1.1.js"></script> I am trying this code but for some reason I cannot get this to work any suggestions or help?
$(document).ready(function () {
$('span.date').each(function() {
var dateFormat = $(this).text()
var dateFormat = $.datepicker.formatDate('MM/DD/YYYY', new Date(dateFormat));
//alert(dateFormat);
$(this).html(dateFormat + "<br>");
});
});

You would need to add jQuery UI from this page: http://code.jquery.com/. You need both:
jQuery-ui CSS (pick a theme that fits your design or appeals to you)
jQuery-ui JS
Examples:
http://code.jquery.com/ui/1.11.1/jquery-ui.js
http://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css
And then your code would need to change per the jQuery UI Datepicker API Documentation. Your code would not work as it is. Take a look at various examples here: http://jqueryui.com/datepicker/ and let us know if you still need help.

How do I refer to the root Wordpress directory INSIDE a Javascript file

I've got a javascript file and somewhere within the code I have this line:
$(".section-divider.ornament").append('<img src="wp-content/themes/blackandwhite/img/divider-glyph.png" alt="" />');
I know it's not best practice to hard code in the directory like that, but I don't know how else to do it since:
a) as far as I know, PHP doesn't work within JS files.
b) leaving it as "img/divider-glyph.png" (I've tried both with and without a leading '/') doesn't work either

I don't really like Wordpress so I keep my distance but I believe you can use this function to get the Wordpress base installation directory:
<?php
get_bloginfo('wpurl');
?>
You can use that to add this information to the DOM, for instance the <body> tag:
<body data-base-dir="<?php echo get_bloginfo('wpurl'); ?>">
Then your JS could read this information:
var baseDir = $("body").data("data-base-dir");
Note than jQuery's .data() method will only cache data-* attributes that exist when jQuery loads, so updating an attribute or adding it after jQuery loads will require using .attr("data-*").

Joomla - can't embed custom javascript

I have Joomla 1.5
I have found a plugin for form styling, the "jqtransform"
I have an article that imports a 'myform.php' page that connects to an external database
I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:
add link for the css in the header of joomla's index.php
add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
add the class jqtransform in form tag of the myform.php (rquired by the plugin)
at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:
$(function() {
//find all form with class jqtransform and apply the plugin
console.log("foo");
$("form.jqtransform").jqTransform(); });
(needed for the plugin)
The problem is that the plugin doesn't work.
I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });
The first bookmark works ok (the browser halts).
The second bookmark doesn't do anything. That means the browser doesn't get inside the function.
The console log doesn't show anything.
Anyone has any idea??

The issue is JQuery Conflict.
You should use var jq = jQuery.noConflict();
Just above the script and use jq instead of $ symbol.
like:
jq = jQuery.noConflict();
jq(function(){});
jq("form.jqtransform").jqTransform(); });
something like that.
Also you can add script from myform.php don't need to edit index.php for this kind of use.
Like a page required some js and css don't load it in the index.php
It will load everytime so speed will reduce.
For a component or module or specific page you can use joomla's default document factory.
Like:
$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');
Hope this will help you friend..

This method requires no editing to the template files.
Simply use a Custom HTML Module and Publish it in position
<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
jQuery("form.jqtransform").jqTransform();
});
</script>