In TinyMCE editor, is it possible to turn on the resizing handles on div like they are available on images?
The object_resizing setting can only take true, false, img as possible values.
See https://www.tinymce.com/docs/configure/advanced-editing-behavior/#object_resizing
The TinyMCE source code has a isResizable function which contains
if (typeof selector != 'string') {
selector = 'table,img,figure.image,div';
}
and a showResizeRect function which activates the resizing handles.
I have not been able to activate it for a div.
This is what I have tested so far :
editor.addButton('Test', {
text: 'Test',
onclick: function() {
editor.selection.getNode().setAttribute("data-mce-resize","1");
console.log(editor.selection.controlSelection.isResizable(editor.selection.getNode()));
editor.selection.controlSelection.showResizeRect(editor.selection.getNode());
}
});
isResizable is false
Any clue?
Your code works fie on my end:
http://fiddle.tinymce.com/cugaab
I add type to the editor, highlight and use the bottom Formats>Blocks>Div option to put a div around it, use your test button and I get resize handles and the console logs 'true'.
Resized div image
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I have implemented editable AG-Grid. In the grid, one of the column displays country of the player as shown below:
Now in last column, when user click on the cell, I want to display list of available countries as a dropdown.
Here by default AG-Grid displays normal dropdown. Which I want to replace with Bootstrap-select.
To achieve this, I have implemented custom selector and using Bootstrap-select library.
But when cell is clicked, Dropdown is not being rendered. I am not getting any error though in console.
Here is the code of my custom cell-editor:
var selectCellEdior = function () { };
selectCellEdior.prototype = {
init: function (params) {
selector = document.createElement('select');
for(var i = 0; i < params.values.length; i++) {
var option = params.values[i];
$('<option />', { value: option, text: option }).appendTo(selector);
}
this.cellSelector = selector;
$(this.cellSelector).selectpicker({ size: 'auto' });
},
getValue: function () {
return $(this.cellSelector).find('.btn-text').text();
},
getGui: function () {
return this.cellSelector;
},
destroy: function () {
$(this.cellSelector).remove();
}
};
Here is the Sample Code
I dont understand what is the issue.
The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.
The following changes to getValue and getGui will make the grid work:
...
getValue: function () {
return $(this.cellSelector).val();
},
getGui: function () {
this.cellSelector.style.display = 'block';
return this.cellSelector;
},
...
Here is the modified Plunker
For anyone looking at this now.... Ag-grid has a method afterGuiAttached that is called after the GUI has been attached to the Grid's cell. If you're noticing that the bootstrap-select still isn't "quite right" after following the instructions above, put ALL of the calls to selectpicker in afterGuiAttached instead of init or getGui. This will place the bootstrap-select into a div with the right classes it needs (dropdown, bootstrap-select, etc), and create all of the bootstrap-select elements that are properly shown/hidden.
I have created a portfolio-type (WordPress-based) website, using FullPage and Flexslider (as a absolute positioned pop-up), and it has a FullScreen button, which is currently giving me some nightmares, but only on the second ".section" in of the FullPage (it only has two sections).
I am also using SlimScroll.js as advised on the FullPage documentation as it can be taller than the window.
For Chrome the animation is "clunky", and when it goes fullscreen it waits like a second until it actually does. Please see the image below:
Screenshot of transition happening
I have added the following code and it worked for the first section, but not to the second section...:
html:not(.ios) .fp-section.active {
height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
height: 100vh !important;
}
On Safari, though, the transition is smooth but, every now and then, when it finishes it flickers...!
On Firefox there's not much problem as the fullscreen fades in and out. (Is there a way to replace it for a zoom-type animation?
My FullPage settings:
$('#fullpage').fullpage({
// Navigation
slideNavigation: false,
// Scrolling
easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
scrollingSpeed: 500,
scrollOverflow: true,
// Design
controlArrows: false,
// Events
afterLoad: function(anchorLink, index) { // after changing section
if (index == 1){
// Load scrollDown link so that you don't have to load it afterwards
$('#main').load(scrollDown + ' .main-content', function(){
$.fn.fullpage.reBuild();
});
// Hide menu
if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
$( '#site-navigation' ).removeClass('toggled');
$( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
$( '#site-navigation ul').attr( 'aria-expanded', 'false' );
}
}
colorInversion();
popupSlider();
},
afterRender: function() { // so that it applies to first section too
colorInversion();
popupSlider();
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
//$.fn.fullpage.reBuild();
popupSlider();
}
});
My FlexSlider settings:
$('#popup-slider').flexslider({
animation: 'slide',
slideshow: false,
easing: 'easeInOutExpo',
animationSpeed: 0,
customDirectionNav: $(".flex-direction-nav a"),
// Usability features
video: true,
// Special Properties
manualControls: '.popup-slider-link',
// Callback API
start: function(slider){
$('.slides li *').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
},
after: function(){ // After each slider animation completes
flexslideColorInversion(); // Check for color inversion
$('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
},
});
(Flexslider is initialised inside the popupslider() function.)
Is there a way to "fix" these issues?
Thank you so much in advance to anyone who may be able to help me with this.
EDIT:
I have seen that the lag in Chrome was because the popup was over the thumbnails and therefore was still resizing them even though they weren't in view; my solution to this was to apply a "display: none" to when the popup slider was on.
The Flicker in Safari is because FullPage.js changes the sections' sizes and their "translate3d", so there is a flicker when that adjustment occurs. The default Fullpage.js characteristic is to actually show part of the section above while it's adjusting, but as I am using 100vh for the .active section it doesnt show on Chrome, Opera or Firefox and only flickers in Safari (hence me wondering what the flicker was!)
Probably the only way around it is to recode Fullpage.js's translate3d (and height/width) codes also with "vh" so that it doesn't have to adjust the size. If any one has a ready code of this, that would be really appreciated! (IE8 is support is not required).
Cheers
I'd like it to simply be labeled "Font" as this is more useful to my non technical users. I can't seem to find a way to do this. Using version 4.x
you can change it in the tinymce.min.js file. just search for the text "Font Family" and you will see where you can change it.
You can do this by changing the default value in tinymce.min.js file. Just search for the code part beginning with:
{type:"listbox",text:"Font Family",tooltip:"Font Family",values:i,
...
Then put your desired label (for example "Font") inside the text:"". After change it should be look like :
{type:"listbox",text:"Font",tooltip:"Font Family",values:i,.
Result:
If you want to do this programmatically, for example create a button that will change label on click you can add this code when initializing tinyMCE:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
toolbar1: 'fontselect fontsizeselect mybutton',
//...
// extra coding can go here
//...
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
var fontlabel = "Font";
document.getElementsByTagName("button")[4].firstChild.innerText = fontlabel;
// getElementsByTagName is an array, so the index changes belonging to
// position of your "FontFamily" dropdown. In my example it' 6th.
}
});
}
});
</script>
Before:
After:
I have a static html form layout where i add extjs form fields using the "renderTo" config. In order to have form validation and simple submit methods i want to add the fields to a form panel. As the layout is managed by the html frame i don't want the form to be rendered by the panel (panel has html frame as contentEl and this should be used as is).
In extjs3 i could achieve this by adding the field not to the panel but to the BasicForm (formpanel.getForm().add(...)) but in extjs4 this method seems to be gone.
How can i do this using extjs4?
Thanks in advance.
Since you already have a Panel that uses the contentEl to render HTML into its body, I recommend to stick with this approach:
Replace the panel with an Ext.form.Panel instance - the configuration, particularly the contentEl config - can remain unchanged.
The code provided here will override a standard Ext class (Ext.layout.Layout) and introduce support for a 'renderItemTo' config property on child items of any Ext container or panel instance (including Ext.form.Panel).
The value of the config property should be the ID of an already rendered DOM node, e.g. a DIV element that is part of the HTML fragment used in as the contentEl of the parent container's body.
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Usage:
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 2'
}
]
});
I uploaded a working example to JSFiddle (note: resize the window if you experience a render problem - this is related to JSFiddle, not my override).
After digging through the layout system of ExtJS 4.1 i implemented a custom layout which moves the items after rendering to the desired position in the fixed markup. The result is the same as for the ExtJS 4.0.7 version from this thread. It seams to work for the ExtJS standard fields. I have some problems with my custom fields though.
Ext.define('Ext.ux.layout.Fixed', {
extend: 'Ext.layout.container.Auto',
alias: 'layout.uxfixed',
afterRenderItem: function(item) {
// move items with renderToFixedMarkup to desired position
if (item.renderToFixedMarkup) {
var target = Ext.getDom(item.renderToFixedMarkup);
this.moveItem(item, target);
}
},
isValidParent: function(item, target, position) {
// items with renderToFixedMarkup property are always positioned correctly
return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
}
});
It can be used by setting "layout: 'uxfixed'" on the panel and the "renderToFixedMarkup" config on the items.