tinyMCE disable Undo/Redo function - tinymce

I need to disable Undo/Redo function in tinyMCE. I saw the documentantion and I used this functions:
ed.onUndo.add(function(ed, e) {
tinymce.dom.Event.cancel(e);
e.preventDefault();
return false;
});
ed.onRedo.add(function(ed, e) {
tinymce.dom.Event.cancel(e);
e.preventDefault();
return false;
});
but without any success.
Note: ed is my active editor.

If you are using tinyMCE 4.*, you can disable Undo/Redo by returning false on BeforeAddUndo event:
ed.on('BeforeAddUndo', function(e) {
return false;
});

TinyMCE v4 - Just overwrite the default settings.
tinymce.init({
selector: '#content',
toolbar: 'bold italic strikethrough underline | quicklink | alignleft aligncenter alignright alignjustify | link ',
});

We had the same problem, but the solution is a bit hacky.
There is ajavascript class in the tinymce core that we needed to overwrite: tinymce.UndoManager.
We used a variable sticked to the editor object to decide if the creation of an undo step actually should take place or not: tinymce.activeEditor.disable_undo_creation.
Here is the code part of the overwritten class:
add : function(level) {
if (tinymce.activeEditor.disable_undo_creation) return;
var i, settings = editor.settings, lastLevel;
level = level || {};
level.content = getContent();
// Add undo level if needed
lastLevel = data[index];
if (lastLevel && lastLevel.content == level.content)
return null;
// Time to compress
if (settings.custom_undo_redo_levels) {
if (data.length > settings.custom_undo_redo_levels) {
for (i = 0; i < data.length - 1; i++)
data[i] = data[i + 1];
data.length--;
index = data.length;
}
}
// Get a non intrusive normalized bookmark
level.bookmark = editor.selection.getBookmark(2, true);
// Crop array if needed
if (index < data.length - 1)
data.length = index + 1;
data.push(level);
index = data.length - 1;
self.onAdd.dispatch(self, level);
editor.isNotDirty = 0;
return level;
},
When the editor is unable to create undo steps redo/undo won't work anymore.

Related

Cannot red property 'getText' protractor

I am trying to do a loop into a loop and a get the Cannot red property 'getText' of undefined error.
Here is my code:
element.all(by.className('col-md-4 ng-scope')).then(function(content) {
element.all(by.className('chart-small-titles dashboard-alignment ng-binding'))
.then(function(items) {
for(var i = 0; i<=content.length; i++) {
items[i].getText().then(function(text) {
expect(text).toBe(arrayTitle[i]);
});
}
});
element.all(by.className('mf-btn-invisible col-md-12 ng-scope'))
.then(function(itemsText) {
for(var i=0; i<=content.length; i++) {
for(var x = 0; x<=arrayContent.length; x++) {
itemsText[i].getText().then(function(textContent) {
expect(textContent).toBe(arrayContent[x]);
});
}
}
});
});
I am using the .then in the .getText() so i don't know what happens.
Your main problem now is you wrote 30 lines of code and you debug all of them at once. There maybe 1000 on possible issues. For this reason noone will help you, because I don't want to waste my time and make blind guesses myself. But if you reorgonize your code so you can debug them 1 by 1 line, then every line may have only a few issues.
With that said, stop using callbacks, I can see you don't completely understand what they do. Instead start using async/await. See how easy it is... Your code from question will look like this
// define elementFinders
let content = element.all(by.className('col-md-4 ng-scope'));
let items = element.all(by.className('chart-small-titles dashboard-alignment ng-binding'));
let itemsText = element.all(by.className('mf-btn-invisible col-md-12 ng-scope'));
// get element quantity
let contentCount = await content.count();
let itemsTextCount = await itemsText.count();
// iterate
for(var i = 0; i<contentCount; i++) {
// get text
let text = await items.get(i).getText();
// assert
expect(text).toBe(arrayTitle[i]);
}
// iterate
for(var i=0; i<contentCount; i++) {
for(var x = 0; x<itemsTextCount; x++) {
// get text
let text = await itemsText.get(i).getText();
// assert
expect(text).toBe(arrayContent[x]);
}
}
This way you can console.log any variable and see where your code breaks

How to remove L.rectangle(boxes[i])

I few days ago I implement a routingControl = L.Routing.control({...}) which works perfect for my needs. However I need for one of my customer also the RouteBoxer which I was also able to implement it. Now following my code I wants to remove the boxes from my map in order to draw new ones. However after 2 days trying to find a solution I've given up.
wideroad is a param that comes from a dropdown list 10,20,30 km etc.
function routeBoxer(wideroad) {
this.route = [];
this.waypoints = []; //Array for drawBoxes
this.wideroad = parseInt(wideroad); //Distance in km
this.routeArray = routingControl.getWaypoints();
for (var i=0; i<routeArray.length; i++) {
waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat);
}
this.route = loadRoute(waypoints, this.drawRoute);
}; //End routeBoxer()
drawroute = function (route) {
route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding
boxes = L.RouteBoxer.box(route, this.wideroad);
var bounds = new L.LatLngBounds([]);
for (var i = 0; i < boxes.length; i++) {
**L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);**
bounds.extend(boxes[i]);
}
console.log('drawRoute:',boxes);
this.map.fitBounds(bounds);
return route;
}; //End drawRoute()
loadRoute = function (waypoints) {
var url = '//router.project-osrm.org/route/v1/driving/';
var _this = this;
url += waypoints.join(';');
var jqxhr = $.ajax({
url: url,
data: {
overview: 'full',
steps: false,
//compression: false,
alternatives: false
},
dataType: 'json'
})
.done(function(data) {
_this.drawRoute(data.routes[0].geometry);
//console.log("loadRoute.done:",data);
})
.fail(function(data) {
//console.log("loadRoute.fail:",data);
});
}; //End loadRoute()
Well, my problem is now how to remove previously drawn boxes in order to draw new ones because of changing the wideroad using a dropdown list. Most of this code I got from the leaflet-routeboxer application.
Thanks in advance for your help...
You have to keep a reference to the rectangles so you can manipulate them (remove them) later. Note that neither Leaflet nor Leaflet-routeboxer will do this for you.
e.g.:
if (this._currentlyDisplayedRectangles) {
for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) {
this._currentlyDisplayedRectangles[i].remove();
}
} else {
this._currentlyDisplayedRectangles = [];
}
for (var i = 0; i < boxes.length; i++) {
var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);
bounds.extend(boxes[i]);
this._currentlyDisplayedRectangles.push(displayedRectangle);
}
If you don't store a reference to the L.rectangle() instance, you obviously won't be able to manipulate it later. This applies to other Leaflet layers as well - not storing explicit references to Leaflet layers is a usual pattern in Leaflet examples.

Leaflet Marker Cluster add weight to marker

I have a leaflet map and I am using the Leaflet.markerCluster plugin to cluster my markers. I have some markers that represent multiple points on the same location. Unfortunately when it gets clustered it only represents one single point. Is there a way to add a weight to each marker? So that the cluster sees it as more than one point?
Basically I am hoping for a clusterWeight property like the follwing:
var newMarker = L.marker(coordinates, {
icon: myIcon,
clusterWeight: 5
});
This propety does not exist however. Anyoneknow of a work around? Thanks!
First you will need to create a marker that supports custom properties. You can do this by extending the default L.Marker like so:
var weightMarker = L.Marker.extend({
options: {
customWeight: 0
}
});
Then you can make use of Leaflet.markercluster's iconCreateFunction to create a custom cluster marker, by changing what is displayed on the marker:
var markers = L.markerClusterGroup({
iconCreateFunction: function(cluster) {
// iterate all markers and count
var markers = cluster.getAllChildMarkers();
var weight = 0;
for (var i = 0; i < markers.length; i++) {
if(markers[i].options.hasOwnProperty("customWeight")){
weight += markers[i].options.customWeight;
}
}
var c = ' marker-cluster-';
if (weight < 10) {
c += 'small';
} else if (weight < 100) {
c += 'medium';
} else {
c += 'large';
}
// create the icon with the "weight" count, instead of marker count
return L.divIcon({
html: '<div><span>' + weight + '</span></div>',
className: 'marker-cluster' + c, iconSize: new L.Point(40, 40)
});
}
});
Demo: https://jsfiddle.net/chk1/0hq1t13t/

Javascript horizontal slider not working

I'm using an old version of the Slidedeck Plugin (v.1.4.5) and I have a javascript problem with one of the skins I'm using. More precisely, the horizontal slides are stitched together and I can't figure out how to fix this. I want each slide to be independent, without any content from the next or previous slide to be seen on the active slide.
You can see in the screenshot from below that the middle slide has visible content from the previous and next slide, which obviously I don't want to be visible.
I should mention that I have very limited knowledge of javascript / jQuery, and I suspect it's a js problem because the CSS is the same for all skins - the only variable is the script used by each skin.
You can see the slider behavior on this website and below is the full script used for the slider skin. I would appreciate any help on this. To change the slides click on each slide arrow from left or right side, or you can use the directional keys on the keyboard.
(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck){
var ns = 'fullwidth-sexy';
var elems = {};
elems.slidedeck = $(slidedeck);
elems.frame = elems.slidedeck.closest('.skin-' + ns);
// Disable spines as this skin is not meant to function with spines on
elems.slidedeck.slidedeck().setOption('hideSpines', true);
elems.frame.append('PreviousNext');
elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');
elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
event.preventDefault();
var $this = $(this);
elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
if($this.hasClass('prev')){
elems.slidedeck.slidedeck().prev();
} else {
elems.slidedeck.slidedeck().next();
}
});
};
$(document).ready(function(){
$('.skin-fullwidth-sexy .slidedeck').each(function(){
if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
$.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'](this));
}
});
});
})(jQuery);
The following might work, but it is hard to test without an example of what you are trying to do.
What I did is added a unique number to the ns variable (for namespace I assume.) This number is passed to the callback of the each function. (doc)
(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck,uniqueName){
var ns = 'fullwidth-sexy'+uniqueName;
var elems = {};
elems.slidedeck = $(slidedeck);
elems.frame = elems.slidedeck.closest('.skin-' + ns);
// Disable spines as this skin is not meant to function with spines on
elems.slidedeck.slidedeck().setOption('hideSpines', true);
elems.frame.append('PreviousNext');
elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');
elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
event.preventDefault();
var $this = $(this);
elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
if($this.hasClass('prev')){
elems.slidedeck.slidedeck().prev();
} else {
elems.slidedeck.slidedeck().next();
}
});
};
$(document).ready(function(){
$('.skin-fullwidth-sexy .slidedeck').each(function(n){
if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
$.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'+n](this,n));
}
});
});
})(jQuery);

tinyMCE word counter for on paste help needed

Good morning people, hope y'all are having a good time, first and foremost i want to thank y'all for your speedy response to my questions, a while ago i need a word counter for tinymce and i got some good response, this time i want when a user cut and paste into the counter it should also count the words and restrict them accordingly, here is the code to the onkey press counter
tinyMCE.init({
mode : "textareas",
elements : "teaser,headline",
setup: function(ed) {
var text = '';
var span = document.getElementById('word-count');
if(span)
{
var wordlimit = span.innerHTML;
ed.onKeyDown.add(function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8)
{
return tinymce.dom.Event.cancel(e);
}
});
}
}
})
please can you help modify it for me to also watch for on paste. Thank you.
#cyberomin.
That is pretty forward:
ed.onPaste.add(function(ed, e) {
text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
wordcount = wordlimit - (text.split(' ').length);
span.innerHTML = wordcount;
if(wordcount <= 0 && e.keyCode != 8)
{
return tinymce.dom.Event.cancel(e);
}
});