I have been able to create my own Font color picker for TinyMCE, but but the color palette is linked to the original color picker. What I am trying to do is make my custom color picker totally independent of the original one (so I can show both). Here is my current code, and this works, but the color palette is the same for both buttons:
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 = '<?php echo $university->getDto()->getIcoFile();?>',
o.onclick = function (color) { ed.execCommand('Forecolor', false, 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);*/
// execute the same command that the regular forecolor plugin uses (choosen theme needs to be advanced! in order to work)
ed.execCommand('ForeColor', false, color);
};
// limit the colors using own setting
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
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,|,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,
theme_advanced_text_colors :"<?php echo implode(',', $university->getDto()->getColors());?>" // example
});
To apply custom fonts see this fiddle: http://fiddle.tinymce.com/jYcaab/2
This was actually very easy after reading through what was happening. All that needed to be done was alter this line:
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
to
if (v = ed.getParam('custom_colors')) o.colors = v;
then add add custom_colors definition in init method.
Related
How can I hide the bottom toolbar of agentTypeGridPanel ?
I tried .getDockedComponent('bottomtoolbar').hide() but its not working.
eci.admin.agentType.agentTypePanel = function(attributes){
var agentTypeGridPanel = eci.admin.agentType.agentTypeGrid(attributes);
var fieldsGridPanel = eci.admin.agentType.getFieldsGridPanel(attributes);
var dataPanel = new Ext.Panel({
itemId: 'eciAgentTypeDetails'+eci.admin.agentType.dataTypeId+'-panel',
title : 'Agent Type',
border : false,
//height : 300,
hideHeaders: true,
items : [agentTypeGridPanel, fieldsGridPanel]
});
//eci.admin.agentType.GridPanel.getDockedComponent('bottomtoolbar').hide();
//agentTypeGridPanel.getTopToolbar().hide();
return dataPanel;
};
I think this is what you are looking for.
GridPanel.getDockedItems('toolbar[dock="top/bottom"]').hidden = true;
You need to provide the grid code for further analysis.
Hi i am using quick note plugin.
In IE8 i am getting the error Object doesn't support this property or method, have no idea how to solve this, I am getting this error on below code
error here ->
$.fn.postitall.defaults = {
// Basic Settings
id : 0, //Id
created : Date.now(),
domain : window.location.origin, //Domain in the url
page : window.location.pathname, //Page in the url
backgroundcolor : '#FFFC7F', //Background color
textcolor : '#333333', //Text color
textshadow : true, //Shadow in the text
position : 'relative', //Position absolute or relative
posX : '5px', //top position
posY : '5px', //left position
height : 180, //height
width : 200, //width
minHeight : 152, //resizable min-width
minWidth : 131, //resizable min-height
description : '', //content
newPostit : false, //Create a new postit
autoheight : true, //Set autoheight feature on or off
draggable : true, //Set draggable feature on or off
resizable : true, //Set resizable feature on or off
removable : true, //Set removable feature on or off
changeoptions : true, //Set options feature on or off
savable : false, //Save postit in local storage
// Callbacks / Event Handlers
onChange: function () { return 'undefined'; },
onSelect: function () { return 'undefined'; },
onDblClick: function () { return 'undefined'; },
onRelease: function () { return 'undefined'; }
};
Date.now wasn't added to Javascript specification until ECMAScript 5 which means that it is not present on IE8 and lower. This is why you get the mentioned error. However, you can implement your own Date.now() method:
/** +new Date is short for (new Date).valueOf(); */
var Date.now = Date.now || function(){ return +new Date; };
So, if Date.now exists you will use existing browser's implementation, otherwise you define your own function.
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
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) {