I am having a problem getting TinyMCE to wrap the contents of the selection.
The first style_format simple adds the class to the selected element, this works fine.
The problem is with the second style_format I want it to wrap the selected elements inside of the
E.g.
BEFORE
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
AFTER
<p class="accordion_top">test text</p>
<div class="accordion_middle">
<div class="accordion_middle-wrapper">
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
Using the jQuery version I have below, the code in question is the bottom style formats
$("#tinymce").tinymce({
script_url : HOME+"/webapp/shared/javascript/tiny_mce/tiny_mce.js",
mode : "textareas",
theme : "advanced",
skin : "cirkuit",
width: "726",
plugins : "advlist,insertdatetime,paste,print,searchreplace,spellchecker,table,wordcount,visualchars,xhtmlxtras,template,codemagic",
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,undo,redo,|,hr,acronym,charmap,blockquote,replace,|,insertdate,inserttime,|,cleanup,removeformat,codemagic,",
theme_advanced_buttons2 : "wrap_div,styleselect,formatselect,|,bold,italic,underline,bullist,numlist,|,table,|,link,unlink,insertimage,spellchecker|mybutton",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
//theme_advanced_buttons1 : "|,,table,pasteword",
theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
forced_root_block : "p",
force_br_newlines : false,
force_p_newlines : true,
valid_elements : "span[class|id],br[class|id],a[href|target|title],img[src|id|width|height|class|alt],i,"+
"li[class|id],ul[class|id],ol[class|id],p[class|id],"+
"table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
"h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
"div[class|id]",
content_css : TEMPLATE_HOME+"/css/tinymce.css?" + new Date().getTime(),
plugin_insertdate_dateFormat : "%d/%m/%Y",
plugin_insertdate_timeFormat : "%H:%M",
paste_auto_cleanup_on_paste : true,
convert_urls: false,
relative_urls: false,
// Style formats
style_formats : [
{title : 'Accorion Top', selector : 'p,h2,h3,h4,h5,h6', classes : 'accordion_top'},
{title : 'Accorion Middle', block : 'div', classes : 'accordion_middle'}
],
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text) {
tinyInsert('<div class="accordion_middle"><div class="accordion_middle-wrapper">' + text + '</div></div>');
}
}
});
}
});
It requires big changes in the tinymce core (Formatter.js) to get what you want using the style plugin.
I would write an own function placed in an own tinymce plugin.
To achieve your goal you wouldn'tneed that much code.
EDIT: You got it almost correct. Try this first using spans to make sure this works in your editor.
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text && text.length > 0) {
ed.execCommand('mceInsertContent', false, '<span class="accordion_middle"><span class="accordion_middle-wrapper">' + text + '</span></span>');
}
}
});
}
Next step will be to replace the spans withs divs and make sure your tinymce settings will allow nested div tags (see the valid_children setting).
Related
I have implemented Fancybox code in AngularJS and angularjs using "#" for creating their URLs. Fancybox working properly in all browser except IE11. Please see my code:
$(document).on('click','.iframePopup',function(){
var id_role = $(this).data('roleid');
$.fancybox.open([
{
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
type : 'iframe',
href : basePath + '#/getuser-list/'+id_role,
title : false,
iframe : {
preload : false
}
}
]);
});
Please suggest me any proper solution for that, so this fancybox open properly in IE11 as well.
Thanks in advance.
I am using TinyMCE to for an WYSIWYG editor on my site, and I want to add a custom color picker to the editor in addition to the existing colorpicker using forecolor. I found this http://fiddle.tinymce.com/lwcaab/16 and used it to get the button to show up, but there are 2 problems. I need to filter the colors that show up in that button (only show a couple of colors), and when you click the color, it doesn't change the font color in the editor.
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function(n, cm)
{
switch(n)
{
case "universityColors":
var o = {};
ed=tinyMCE.activeEditor;
o.scriptURL = ed.baseURI.getURI();
o['class'] = 'mce_forecolor';
o.title='University Font Colors';
o.scope=this;
o.image = '../images/uor.ico',
o.onclick = function (color) { console.log('clicked',color);/*this.cs.showMenu(); if (this.o.onClick) this.o.onClick(c);*/};
o.onselect = function (color) {console.log('selected',color); /*this.color=this.o.color=c; if (this.o.onSelect) this.o.onSelect(c);*/};
var mcsb = cm.createColorSplitButton('universityColors', o);
// return the new ColorSplitButton instance
return mcsb;
}
return null;
}
});
tinymce.PluginManager.add('universityColorPicker', tinymce.plugins.ExamplePlugin);
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinyMCE",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview, -universityColorPicker",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor, universityColors",
theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
I have made a fiddle to work of of also at: http://fiddle.tinymce.com/jYcaab
I made that older fiddle :)
Here your modified fiddle that limits the colors: http://fiddle.tinymce.com/jYcaab/1
Applying the font to the content is another story.
Update: The font gets applied now: http://fiddle.tinymce.com/jYcaab/2
im trying to display inline using fancybox. but currently it pops up but displaying error "The requested content cannot be loaded. Please Try again later." . below is the code.
<script type="text/javascript">
jQuery(document).ready(function() {
$(".various").click(function() {
parent.$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 640,
'height' : 385,
'type' : 'inline'
});
return false;
});
});
</script>
and where i used fancybox
<a class="various" href="#inline3">Inline</a>
<div id="inline3" style="display:none;" ><img src="https://xxxxx" /></div>
FOUND A SOLUTION!
the thing is, i need to change type from inline to iframe. and also insert a 'href' string inside the javascript and remove the href from the link. and for the href value put in "this.href" ... and now it works.
ITs simple,
If the image is not loaded, it will happen,
Please check the image source in img tag then proceed.
$('.fancybox').fancybox({
autoSize : true,
autoResize : true,
autoDimensions : false,
padding: 25,
width : 630,
openEffect : 'elastic',
closeEffect : 'elastic',
type : 'iframe',
href :'Pass your url'
});
In my case, instead of using this.href, I passed url, and its working form me.
Basically I use TinyMCE for my text areas for easier editing and someone constructed this JS for me to make a textarea only go to 255 characters.
The only problem is that it affects all textareas on a page its included on instead of a set one, I know no JS so I am wandering if one of you wizards could guide me to add a place I can set what textarea to affect?
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});
All you need to do is
//find the id of the currently active editor
var editor_name=tinyMCE.activeEditor.editorId;
then
//provide regex for list of editors to be matched
var editors_to_be_matched = /first_editor|third_editor/;
find
//if active editor matches against the list of editors
var matched = editor_name.match(editors_to_be_matched);
if
//active editor does not matches return
if(!matched) return;
else
//do character count stuff
your code here
So here is how it would look like in your case
ed.onKeyUp.add(function(ed, e) {
var editor_name =tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /first_editor|third_editor/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
alert("Do character count stuff here");
// your code here
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
........
..........
});
Here is a DEMO
to make tinymce work on only some textareas you should change mode to "exact" and specify html element IDs in element parameter like this:
tinyMCE.init({
mode : "exact",
elements : "elm1,elm2",
});
you can find more info about tinymce modes here: http://www.tinymce.com/wiki.php/Configuration:mode
Display Name here is the new code then can you check it over :), think i got it right.
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
var editor_name = tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /tagline/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});
</script>
I have successfully setup tinymce to work on a page within an iframe. Everything works perfectly.
However, when you use imagemanager to pick an image to be inserted or replaced in the editor it will not copy the path(and filename) of the image to the "Image URL" input in the "Insert/edit image" box. The box will either remain empty or keep the address of the previous image.
The behaviour is the same with the filemanager plugin.
tinyMCE.init(
{
mode : "none",
editor_selector : "mceEditor",
theme : "advanced",
plugins : "filemanager,imagemanager,autoresize,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,spellchecker",
theme_advanced_buttons1 : "insertfile,insertimage,advimage,imagemanager,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,nonbreaking,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist",
theme_advanced_buttons2 : "blockquote,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor,|,charmap,iespell,media,advhr",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,strikethrough",
theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect,|,undo,redo,|,spellchecker",
theme_advanced_toolbar_location : "external",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
relative_urls : true,
document_base_url : "http://xxxxxxxxxxx.com/",
auto_resize : true,
content_css : "/custom/css/style.css",
extended_valid_elements : "iframe[height|width|src|frameborder|scrolling]",
});
/*
The following code comes from- http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12966
Without it the editor only loads 10% of the time. With it, it's pretty much 100% consistent.
The other changes mentioned in the post have also been implemented.
*/
var setupTiny = function()
{
var ifrObj = document.getElementById('pageEditIFrame');
var win = ifrObj;
if (win.contentWindow)
{
win = win.contentWindow;
}
var d;
if(ifrObj.contentDocument)
{
d = ifrObj.contentDocument;
}
else if (ifrObj.contentWindow)
{
d = ifrObj.contentWindow.document;
}
else if (ifrObj.document)
{
d = ifrObj.document;
}
textAreas.each(function(txtEl)
{
tinyMCE.execCommand('mceAddFrameControl', false,
{
element_id : txtEl,
window : win,
doc : d
});
});
};
//Waiting 1 second seems to make the editor load more reliably.
setTimeout("setupTiny();",1000);
I ran across a similar issue that only shows up in more recent versions of Firefox - Chrome and IE work fine for me. Not sure if it is exactly the same problem (I'm not using iframes) but it presents in the same way.
Here's where I found my solution:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=23302
As you can read there, one of the coders for TinyMCE thinks its a bug in FF, though the fixes look more like it's tiny_mce assuming a bug still exists in Firefox that was fixed at some point in 3.5. Here's the solution that worked for me (quoted from the post):
1)
Go to tiny_mce.js
2)
Find this line: this.isGecko = ua.indexOf('Gecko') != -1;
under it add:
this.isGecko369 = (this.isGecko && ua.indexOf('irefox/3.6.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.6.')+11,2)) >= 9);
this.isGecko369 = (this.isGecko369 || (this.isGecko && ua.indexOf('irefox/3.5.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.5.')+11,2)) >= 9 ) );
3)
Find this line: fixGeckoBaseHREFBug : function(m, e, h) {
below that there is this line: if (tinyMCE.isGecko) {
alter it with: if (tinyMCE.isGecko && !tinyMCE.isGecko369) {