I am using the TinyMCE editor, with the emotions plugin. Does anyone know how to resize the pop up window for the emotions plugin, as I have more emoticons that can fit in the window and the window has no scroll bar.
I have tried editing the editor_plugin.js file but this didn't change anything.
Any help appreciated.
EDIT:
My tinyMCE config
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor",
plugins : "emotions",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,emotions,|,code",
theme_advanced_buttons2 : "fontselect,fontsizeselect",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : false,
nonbreaking_force_tab : true,
apply_source_formatting : true,
editor_deselector : "mceNoEditor"
});
My editor_plugin.js file in /plugins/emotions/
(function() {
tinymce.create('tinymce.plugins.EmotionsPlugin', {
init : function(ed, url) {
// Register commands
ed.addCommand('mceEmotion', function() {
ed.windowManager.open({
file : url + '/emotions.php',
width : 120 + parseInt(ed.getLang('emotions.delta_width', 0)),
height : 400 + parseInt(ed.getLang('emotions.delta_height', 0)),
inline : 1
}, {
plugin_url : url
});
});
// Register buttons
ed.addButton('emotions', {title : 'emotions.emotions_desc', cmd : 'mceEmotion'});
},
getInfo : function() {
return {
longname : 'Emotions',
author : 'Moxiecode Systems AB',
authorurl : 'http://tinymce.moxiecode.com',
infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/emotions',
version : tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
// Register plugin
tinymce.PluginManager.add('emotions', tinymce.plugins.EmotionsPlugin);
})();
Change this part from editor_plugin.js OR editor_plugin_src.js depending on if you have tinymce.js or tinymce_src.js included
ed.addCommand('mceEmotion', function() {
ed.windowManager.open({
file : url + '/emotions.htm',
width : 250 + parseInt(ed.getLang('emotions.delta_width', 0)),
height : 160 + parseInt(ed.getLang('emotions.delta_height', 0)),
inline : 1
},
Related
I have a custom menu with a fixed position that allows users to navigate through FancyBox. It all works fine, except the part that the animation effects (those you have when you navigate through FancyBox by clicking the images) do not apply to the menu.
What do I have to do to get it working?
http://jsfiddle.net/PwMjP/866
FancyBox settings:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
wrapCSS : 'fancybox-custom-white',
closeClick : false,
topRatio : 0,
scrolling : 'no',
width : '100%',
padding : '0',
fitToView : false,
transitionIn : 'elastic',
transitionOut : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false,
nextMethod : 'changeIn',
nextSpeed : 250,
prevMethod : false,
helpers : {
title : {
type : 'inside'
}
}
});
$(".fancybox").click(function(){
$(".menu-content").css('background-color','rgba(0,0,0,0.95)');
});
P.S.: Would be great if anyone could post some working code or a fiddle. Thanks!
This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.
Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});
You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs
Here is my tinymce code . I am populating the tinymce textarea with content 'Cust Details' at on ready event. But tinyMCE.activeEditor evaluates as null even after appending the text area with tinymce
$(function() {
appendTinyMCE();
function appendTinyMCE(){
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "preview",
// Theme options
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
width : "640",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});}
alert("tinyMCE.activeEditor"+tinyMCE.activeEditor);// inyMCE.activeEditor is coming as null. Not getting why
if(tinyMCE!=null && tinyMCE.activeEditor!=null)
{
tinyMCE.activeEditor.setContent('Cust Details');
}
});
Please let me know how i can populated the tiny mce text area on ready event?
I had the same issue a while back...
Try setting the the text-area content from the init_instance_callback param in init options:
init_instance_callback : function() {
tinyMCE.activeEditor.setContent('Cust Details');
}
applying this to your code snippet should look something like:
$(function() {
appendTinyMCE();
function appendTinyMCE(){
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "preview",
// Theme options
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
width : "640",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
init_instance_callback : function() { tinyMCE.activeEditor.setContent('Cust Details');}
});}
});
This is my code below. How can I scroll to bottom of textarea?
It must be something like
Ext.getCmp('output').setScrollPosition(Ext.getCmp('output').getScrollHeight());
Here is my code for the textarea:
var myWin= new Ext.Window({
height : 340,
title : 'CHAT',
modal : true,
resizable : false,
draggable : false,
closable : false,
width : 477,
layout : 'absolute',
bodyStyle : 'padding : 10px',
buttonAlign : 'center',
items : [
{
id : 'output',
xtype : 'textarea',
width : 216,
readOnly : true,
autoScroll : true,
height : 234,
x : 10,
y : 10
},
item6,
{
id : 'input',
xtype : 'textfield',
width : 443,
y : 249,
x : 10
}]
...
I don't think there is ExtJs method to scroll textarea, however you can use HTML textarea properties:
var t = Ext.getCmp('output'),
t1 = t.getEl().down('textarea');
t1.dom.scrollTop = 99999;
Here is the question where it was discussed: Dynamically Scrolling a Textarea
var d = Ext.getCmp('output').getEl().down('textarea').dom;
d.scrollTop = d.scrollHeight - d.offsetHeight;
I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.
The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'