How can I remove outdent and indent buttons form the toolbar. I found the option to remove the list where are the buttons stored, but not the buttons. Is it possible. I tried this, but this doesn't work:
$('.editor').wysihtml5({
toolbar: {
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": false, //Button which allows you to edit the generated HTML. Default false
"link": true, //Button to insert a link. Default true
"image": true, //Button to insert an image. Default true,
"color": false, //Button to change color of font
"blockquote": true, //Blockquote
},
lists: {
unordered: 'Unordered list',
ordered: 'Ordered list',
},
});
A little late with this answer, but in case this helps anyone.
The quick (dirty) way - hide the buttons using CSS:
a[data-wysihtml5-command="Outdent"],
a[data-wysihtml5-command="Indent"] {
display:none !important;
}
The better solution is to use custom templates:
var myCustomTemplates = {
emphasis : function(locale) {
return "<li>" +
"<div class='btn-group'>" +
"<a data-wysihtml5-command='bold' title='Bold' class='btn btn-none btn-default' ><span style='font-weight:700'>B</span></a>" +
"<a data-wysihtml5-command='italic' title='Italics' class='btn btn-none btn-default' ><span style='font-style:italic'>I</span></a>" +
"<a data-wysihtml5-command='underline' title='Underline' class='btn btn-none btn-default' ><span style='text-decoration:underline'>U</span></a>" +
"</div>" +
"</li>";
},
lists : function(locale) {
return "<li>" +
"<div class='btn-group'>" +
"<a data-wysihtml5-command='insertUnorderedList' title='Unordered list' class='btn btn-none btn-default' ><span class='fa fa-list-ul'></span></a>" +
"<a data-wysihtml5-command='insertOrderedList' title='Ordered list' class='btn btn-none btn-default' ><span class='fa fa-list-ol'></span></a>" +
//"<a data-wysihtml5-command='Outdent' title='Outdent' class='btn btn-none btn-default' ><span class='fa fa-outdent'></span></a>" +
//"<a data-wysihtml5-command='Indent' title='Indent' class='btn btn-none btn-default'><span class='fa fa-indent'></span></a>" +
"</div>" +
"</li>";
}
}
$('.texteditor').wysihtml5({
toolbar: {
"font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": true, //Button which allows you to edit the generated HTML. Default false
"link": true, //Button to insert a link. Default true
"image": false, //Button to insert an image. Default true,
"color": false, //Button to change color of font
"blockquote": false, //Blockquote
},
customTemplates: myCustomTemplates
});
Hence the custom template above returns only the first 2 lists template buttons
(since the last 2 are commented out in the template),
plus it also adjusts the styling buttons in the emphasis template
to B I U
Related
I want to make mouse hover pagination on Swiper Slider. How can I do it?
Here is my javascript code;
var subSlider = new Swiper ('.subsSlider', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
})
By regular/normal CSS hover style -
.swiper-pagination-bullet:hover{
background: red;
}
$('.swiper-pagination-bullet').hover(function() {
$( this ).trigger( "click" );
});
Im using TinyMCE in a project and want the user to select and upload images to the server using its default insert image window.
I want to click the following button:
Open the browsers default file select window and add the selected image to the editor:
My code so far is as follows..
JS:
tinymce.init({
selector: '#html-editor',
language: 'pt_PT',
plugins: [
"bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code media nonbreaking",
"table contextmenu directionality paste textcolor colorpicker imagetools"
],
add_unload_trigger: false,
toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table",
image_advtab: true,
file_picker_callback: function (callback, value, meta)
{
$('#html-editor input').click();
//how to get selected image data and add to editor?
},
paste_data_images: true,
images_upload_handler: function (blobInfo, success, failure)
{
// no upload, just return the blobInfo.blob() as base64 data
success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
}
});
HTML:
<div id="html-editor">
<input name="image" type="file" style="width:0;height:0;overflow:hidden;">
</div>
What kind of changes must i make to the file_picker_callback event in order to get the selected file and add it to the editor?
Had the same problem. Using the following fixed it for me, remember that the browser must support FileReader (otherwise just insert your own script).
html (put this anywhere on the html page):
<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />
js (in the tinymce init config):
file_picker_callback: function (callback, value, meta) {
if (meta.filetype == 'image') {
var input = document.getElementById('my-file');
input.click();
input.onchange = function () {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
}
Try
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Image Picker',
url: '/images/getimages',
width: 650,
height: 550,
buttons: [{
text: 'Insert',
onclick: function () {
//.. do some work
tinymce.activeEditor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}],
}, {
oninsert: function (url) {
callback(url);
console.log("derp");
},
});
};
tinymce.init({
selector: 'div#html-editor',
height: 200,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
paste_data_images: true,
automatic_uploads: true,
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
Below is my swiper slider initialization script.
var swiper = new Swiper('.swiper-container', {
effect: 'fade',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
height:490,
loop: true,
arrows:false,
autoplay: 4500,
autoplayDisableOnInteraction: false,
paginationBulletRender: function (index, className) {
var slide = $('.' + this.wrapperClass).find('.headermainslider')[index];
return '<span class="' + className + '"><a href="'+$(slide).attr('data-rel')+'" >' + $(slide).attr('data-value') + '</a></span>';
}
});
Each pagination bullet i have create a div and inside div anchor link is place. When i click on bullet slider will change but anchor link not works.
Due to paginationonClickable when I click on anchor link inside bullet div than anchor link not work and current slide change.
I want both condition to work. So can anyone help to resolve this issue.
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}