I have received a request from client, to be able to add accordion in the tinymce editor with clicking only on a button in the toolbar of the editor. I said ok as always :), but subsequent questions were coming on my mind, you need to add items in the accordion and again ok :), jquery table with add rows and delete rows will do the job. That question sorted, another question came up, modal window for editing and inserting items and guess what again jquery. The body of the inserted items needs to be styled so I need to use tinymce editor for that, ok I have that. Let’s roll :).
On line 8,9 and 11 I'm requesting the parent node of my selection in the tinymce editor. The class "accordion-panel-group" is my parent node and in line 11 i'm checking to see if the selection is inside that node. If it is I'm getting the id of the accordion panel (If there is title the second child has the id-panel, if not the first child has the id). After that activate window manager of the editor with parameters. And here comes AccordionSnippet.html on line 21.
Thanks to this guy with his post i managed to make a popup tinymce dialog.
var _parentNode = tinyMCEPopup.getWindowArg("argParentNode");
var _accordionID = tinyMCEPopup.getWindowArg("argAccordionID");
var min = 1;
var max = 50;
var random = Math.floor(Math.random() * (max - min + 1)) + min;
randomNumber = random;
if (parentNode != null) {
edit = true;
parentNode = _parentNode;
accordionID = _accordionID;
}
else {
accordionID = 'accordionID' + random;
}
</script>
</div>
</body>
</html>
As you can see in line 6,7,9 i have included my own downloaded version of tinymce (majorVersion:"3",minorVersion:"5.11",releaseDate:"2014-05-08") downloaded from their site. Because by EPiServer on this link In the last section "Using the TinyMCE editor from template pages" we can read that if we want to use TinyMCE editor in template pages as in our case AccordionSnippet.html, we need to download version from the official site and this version is not connected with the existing one on Episerver, because of that we are not able to insert local media files in body text. Line 11 is init function of tinymce. Line 24 the div is my dialog form for anoter popup where i can insert or edit items in the accordion (Title and Body text). Line 43 is the table with the conatining items displayed in table view. Line 63 is hidden accordion panel where i'm hiding the changes before the are updated on the main tinymce editor. Below i have the insert and close buttons for the snippet.
$(document).on('click', 'span.delete', function () {
$(this).parents('tr:first').remove();
recreate_accordion();//recreates the html of the accordion in the hidden div
return false;
});
//edit function
$(document).on('click', 'td a.edit', function () {
new_dialog('Edit', $(this).parents('tr'));
recreate_accordion();//recreates the html of the accordion in the hidden div
return false;
});
$(document).on('click', 'a.createa', function () {
new_dialog();
return false;
});
});
In this js file in the ready function i get all the titles and body texts and fill the table with the items to diplayed it. The function recreate_accordion i used to recreate the hidden accordion (explained before) on every change so i can keep track of changes. Functions addTinyMCE and removeTinyMCE are required for init and removing of the tinymce on the textarea (thanks to this guy on this link i have understand why). The other functions are pretty explanatory by themself.
You can use these files as copy/paste to your project, but if before you have added the mentioned tinymce version and jquery version. The css class i have not provided them becasue you can build them by yourself or find on internet.
I'm using the tinymce editor as plugin for the episerver tinymce editor to create styled items for the accordion and the accordion itself. The chalenge was the setup to work episerver tinymce edtor and the classic tinymce editor along with jquery and tinymce jquery together.
IMPROVEMENTS
Using the tinymce in popup window as plugin in episerver has limitations, one of that is that you cannot select local files of episerver as links in the body text. As mentioned above episerver reccomend to use downloaded version of tinymce.
BUT some gys have tried something and they are on good direction
If you just want to add a button that adds something to the TinyMCE you can add your own plugin, but if you like to extend the whole editor look at my blog post on how to do it:
http://world.episerver.com/blogs/Henrik-Fransas/Dates/2014/11/how-to-use-tinymce-in-a-custom-property-the-episerver-wayclean-version/
Hi i have built the plugin and working well in Firefox,Chrome.But got an issue with IE 11.It says SCRIPT28: Out of stack space when opening the plugin and when loading the tinyMCE editor
IE throw the error "not responding due to a long running script " and after that it crashes the IE.All times it happened when loading the tinyMCE editor. Couldn't identify where the code gone wrong when intializing tinymce in accordion.js
Issue with this is "open: addTinyMCE" .So when i commented it ,it is working fine without tinyMCE.But i need to load tinyMCE in the editor in the Internet Explorer as well.In other browsers it is working fine.
Also one bug i found when it testing in the Safari browser, it throw the error of "type error:null is not an object insert onclick" in AccordionSnippet.js
If you just want to add a button that adds something to the TinyMCE you can add your own plugin, but if you like to extend the whole editor look at my blog post on how to do it:
http://world.episerver.com/blogs/Henrik-Fransas/Dates/2014/11/how-to-use-tinymce-in-a-custom-property-the-episerver-wayclean-version/
Henrik thanks for commenting, but i have reedited my blog if you want to check it out :)
Will look at it
Seems like you have solved it, that's good and a good description
Hi i have built the plugin and working well in Firefox,Chrome.But got an issue with IE 11.It says
SCRIPT28: Out of stack space when opening the plugin and when loading the tinyMCE editor
IE throw the error "not responding due to a long running script " and after that it crashes the IE.All times it happened when loading the tinyMCE editor. Couldn't identify where the code gone wrong when intializing tinymce in accordion.js
var config = {
autoOpen: true,
height: 650,
width: 750,
modal: true,
open: addTinyMCE,
buttons: {
"Add accordion item": save_data,
"Cancel": function () {
removeTinyMCE();
dlg.dialog("close");
}
function addTinyMCE() {
$('textarea').tinymce({
// Location of TinyMCE script
script_url: '../../../tiny_mce.js',
theme: "advanced",
mode: 'none',
theme_advanced_toolbar_location: "top",
height: $('textarea').outerHeight(),
width: $('textarea').outerWidth()
});
}
Issue with this is "open: addTinyMCE" .So when i commented it ,it is working fine without tinyMCE.But i need to load tinyMCE in the editor in the Internet Explorer as well.In other browsers it is working fine.
Also one bug i found when it testing in the Safari browser, it throw the error of "type error:null is not an object insert onclick" in AccordionSnippet.js
Hi Lahiru DhananjayaI have tested on IE11 and Safari and it is working fine, i have attached pictures, you can see them bellow. All the best.
