Develop Reference

How to pass options over to izimodal (JS) from HTML

Want to get iziModal to work. As a beginner the documentation is a bit daunting.
It works fine, but I cannot pass the available options over to the script. The documentation for that is here under 'Data Attributes'.
This is my HTML code:
<div id="modal" data-iziModal-title="My Title">
<button data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-izimodal-open="#modal-iframe">iFrame</button>
</div>
And here the JS:
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
iframe: true,
iframeURL: "http://izimodal.marcelodolza.com"
});
All I want is for the popup to display the title attribute and by extension all other attributes, of course. The documentation says that "all options can be set via data-attrs."
You might notice that the iframeurl is set twice (in HTML and again in JS). Take it out in JS and it will stop working... just as another example of that issue.
Does anyone know this script and what I might have missed?

Got it.
The documentation is somewhat unclear. So here is the solution for anyone trying to figure this out too. The id in the div has to match with data of the following elements. To explain:
<div id="modal-iframe" data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-iziModal-title="My Title"></div>
<button data-izimodal-open="#modal-iframe">iFrame</button>
In the example the div id is set to "modal-iframe". To get the button to respond with all the options, the button references the ID with data-izimodal-open="#modal-iframe". If the names don't match, it won't work.
Important: all options must be set in the div. In the example you see *data-iziModal-title="My Title" set correctly. Thus if placed into the it will not work.
Hope this helps anyone having the same issue.
EDIT
To clarify further: the JS code is fine. No changes necessary for it to work. You may change it's options, of course. The options in the HTML will always have preference over the ones set in the JS.

How do I get tab spaces to work in CKEditor?

Is it possible to get CKEditor to recognize tab as a feature inside the editor, especially when in source code mode? Right now, when I hit the tab key, the cursor goes to the next field on the page.
I'd like to get the tab character working so CKEditor can work more like a code editor in which I can format my markup with tab spaces.
I'd really appreciate any help I can get with this.
I'm using CKEDitor 4.0.1
Or, perhaps this feature is supported in one of the newer versions of CKEditor?

This link might help: http://get-simple.info/forums/showthread.php?tid=1347
Basically, just add
config.tabSpaces = 4; // or some other value
to config.js and every time Tab is hit, you get that number of spaces.

The code is config.tabSpaces = 4; if you are saving to config.js. If you are setting configurations inside the file, the code will be as follows:
var editor = CKEDITOR.replace( 'editor1', {
tabSpaces: 4
});
it should be noticed, as Kamil Sama commented in rvighne answer, that this requires the tab plugin: tab plugin

<textarea name="text_note" id="text_note"> </textarea>
<!-- tabSpaces:4 add this in your script like as bellow code.-->
<script type="text/javascript">
CKEDITOR.replace('text_note',{tabSpaces:4});
</script>

If you using inline element, you can use like this
var editor2 = CKEDITOR.inline( 'your div id', {
tabSpaces : 5,
});

FineUploader div will not display class

Here's a snippet of code into a :
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="button" style="margin-top: 10px;">Save</div>
<script type="text/javascript" src="~/js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var manualuploader = new qq.FineUploader({
element: $('#manual-fine-uploader')[0],
request: {
endpoint: 'server/handleUploads'
},
autoUpload: false,
text: {
uploadButton: 'Select Files'
}
});
$('#triggerUpload').click(function () {
manualuploader.uploadStoredFiles();
});
});
</script>
As background, I'm using V3.5.0 of FineUploader, and I am using the standalone dependency free version. I've literally just copied this example for the FineUploader dev. I changed the second div to say class="button" (a CSS style I use everywhere in my application). However, no styling occurs. Also where would I put a reference to one of my styles to custom style uploadButton in the javascript?
Thanks.

As you mentioned in the comments, you want to style the "save" button (which you have created) and the "select files" button (which Fine Uploader creates).
As far as the "Save" button is concerned, that is not related to Fine Uploader at all. You have created this button, and it is not a part of Fine Uploader. You can style it however you like via CSS.
Regarding the "Select files" button, you have three options:
Create your own div/anchor/etc element, and pass it to Fine Uploader via the button option. Fine Uploader will add an opaque file input element as a child of this button element. Style your element however you like using CSS.
Create your own CSS (file), targeting the default button created by Fine Uploader's UI module. There are numerous ways to ensure your CSS properties "win", but that is strictly a CSS question, and out of scope here really.
Override the template option. I recommend not going this route. Fine Uploader's template options are brittle and need to be improved in a later version. You can read more about overriding the templates in the first half of the styling readme but, again, I suggest you not do this.
Of the three options above, the first option is the easiest and the one I personally recommend.
It also sounds like you are simply not importing the CSS file that ships with Fine Uploader properly. This is covered in the very first example "Setup" on the demo page/website.

TinyMCE Stripping Out All Markup

I'm trying to insert a simple image link in a TinyMCE-wrapped text field, but it's stripping out all of my markup. My markup looks like:
<a class="video-launcher lightbox-video-launcher" href="http://www.youtube.com/watch?v=blah" ><span class="video-launcher-bg"></span><span class="video-launcher-button"></span></a>
My tinymce_config_url_init.html looks like:
{
"theme_advanced_toolbar_align":"left",
"content_css":"/media/css/cms_tinymce.css,/media/css/cms_tinymce_admin.css",
"theme_advanced_blockformats":"p,h2,h3,div,customformat",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_path":false,
"plugins":"fullscreen,paste",
"valid_elements":"*[*]",
"media_strict":false,
"paste_auto_cleanup_on_paste":true,
"theme_advanced_styles":"Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
"width":"680",
"theme":"advanced",
"theme_advanced_font_sizes":"8px,10px,12px,14px,16px,18px,20px,24px,36px",
"theme_advanced_resizing":true,
"height":"300",
"relative_urls":false,
"theme_advanced_toolbar_location":"top",
"inline_styles":true,
"language":"en",
"theme_advanced_buttons1":"fullscreen,|,undo,redo,|,bullist,numlist,|,anchor,link,unlink,charmap,|,code,|,justifyleft,justifycenter,justifyright,|,image,",
"theme_advanced_buttons3":"",
"theme_advanced_buttons2":"removeformat,styleselect,formatselect,fontselect,fontsizeselect,|,bold,italic,underline,|,forecolor,backcolor",
"removeformat_selector":"span,div,p,h1,h2,h3"
}
I know the problem is with TinyMCE, because without submitting the form, and just clicking the "html" button again, TinyMCE's popup shows no content.
I'm assuming TinyMCE is striping out anything it thinks looks insecurity or invalid. For my app, it's being used in an admin section, so the content can be trusted. How do I disable the TinyMCE config causing this markup from being stripped out?

Add your website's css stylesheet to the "content_css" variable, perhaps?
And also set "paste_auto_cleanup_on_paste" to false, not true.

You should have a closer look at the tinymce configuration paramters valid_elements. You need to set them accoring to your needs and define valid elements and attributes.

TinyMCE SetContent for multiple instances

I am trying to set the content of a number of text editors on page load. I am not too familiar with TinyMCE and have inherited the code somewhat. Here is how I am initializing the editors -
tinyMCE.init({
// General options
mode: "exact",
elements: "txtContent1,txtContent2,txtContent3,txtContent4,txtContent5,txtContentRight1,txtContentRight2,txtContentRight3,txtContentRight4,txtContentRight5",
theme: "advanced",
plugins: "layer,table,save,advhr,advimage,advlink,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1: "bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,format,selectcut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,help,code,",
theme_advanced_buttons2: "ComparativeFiguresTableButton",
//theme_advanced_buttons3: "ComparativeFiguresTableButton,tablecontrols,|,hr,|,sub,sup,|,print,|,ltr,rtl,|,fullscreen",
//theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
relative_urls: false,
document_base_url : "example.com",
remove_script_host: false,
setup: function(ed) {
// Add a custom button
ed.addButton('ComparativeFiguresTableButton', {
title: 'Comparative Figures Table',
image: 'images/icons/cumulativefiguresBtn.gif',
onclick: function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('<p><strong>Comparative Figures</strong></p><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-size:12px; line-height:1.5em; font-family:Verdana, Arial, Helvetica, sans-serif;"><tbody><tr><td> </td><td><strong>Offered</strong></td><td><strong>Sold</strong></td><td><strong>Aggregate (€)</strong></td><td><strong>Average (€)</strong></td><td><strong>Median (€)</strong></td></tr><tr><td><strong>2009</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr><tr><td><strong>2010</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr></tbody></table><br clear="all" />');
}
});
}
Can anyone suggest the best way to set different html content for each editor on page load?
Thanks,
Tristan

From your config you have quite a few instances of TinyMCE on your page. In each, you have a button that allows the end user to insert some predefined content (a "Comparative Figures Table")
When you say you want to "set different html content for each editor on page load" I assume you mean you want to have each instance of TinyMCE load with the appropriate content (either some default or what you retrieved from your repository).
If that's the case then, as #russjman stated, each of the ID's in the elements config item refers to a TextArea/DIV on the page. All you need to do is put the appropriate content in those elements. Importantly, remember to HTML encode it.
For example
<textarea id="txtContent1">
<?php echo htmlentities("<p>This is the content from the first text area.</p>");?></textarea>
<textarea id="txtContent2">
<?php echo htmlentities("<p>This is the content from the second text area.</p><p><strong>Note</strong> This needed to be encoded using htmlentities in PHP</p>");?></textarea>
The other way to read your question is that you want the ComparativeFiguresTableButton to do something different in each instance of the editor. In this case you will need a different config for each element, each with a different value in the ed.selection.setContent() method
As #Thariama states, the best approach would be to create a simple plugin that adds a button and has a config parameter that is the content you want inserted when it's pressed.
Finally, if all you want to do is insert HTML fragments, then it may be worth checking out the template plugin.

I assume that you want set up TinyMCE for multiple textareas on the same page. The 'elements' variable should be doing what you are asking as long as they correspond to a textarea with an id.
<textarea id="txtContent1" ></textarea>
<textarea id="txtContent2" ></textarea>

Try creating your own plugin (it is pretty easy):
ed.onInit.add(function(ed){
ed.setContent('<p>my new content</p>');
}
Since every tinymce instance gets initialized using the same code - they all get the same content (right after the editor instance has loaded).
Alernative 1: I am not sure if the following init setting will work, but you might give it a try:
setup : function(ed) {
ed.setContent('<p>my new content</p>');
}
Alernative 2: Set the content of each textarea which gets transformated into a tinymce editor instance before tinymce.init gets called.