Can I use slider for font size plugin in TinyMCE editor - tinymce

I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?

TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.

Related

Activate command in CKEditor 5 drop down

I am trying to create a drop down menu in CKEditor 5 toolbar.
function createKMDropdown(editor, menuName, menuLabel, icon, commands) {
editor.ui.componentFactory.add(menuName, locale => {
const dropdownView = createDropdown(locale);
const items = new Collection();
commands.forEach(command => {
items.add({
type: 'button',
model: new Model({ withText: true, command: command, label: command }),
});
});
dropdownView.buttonView.set({
withText: true,
label: menuLabel,
tooltip: true
});
addListToDropdown(dropdownView, items);
return dropdownView;
});
}
class StyleMenu extends Plugin {
init() {
const { editor } = this;
const commands = ['strikethrough', 'subscript', 'superscript'];
createKMDropdown(editor, 'StyleMenu', 'Style', '', commands);
}
}
Question / Problems
I got the drop down show up, but clicking the item 'subscript" has no effect
Subscript is a plugin from CKEditor. How can I get its localized name show up in the drop down? Currently, I hard coded 'Subscript' in the plugin that does not work when user's locale is not English.
How can I access the icon of the plugins?
The drop down needs icon and localized name. If I want to choose "Cut" (or its localized version in other languages) and its icon for the drop down? How can I access it? In CKEditor 4, I can get hold of any icons and strings from the plugins.

How to use HTML in a tooltip on a Leaflet legend (or other control)?

I have lost a day on this so far. I have a legend that will obscure a large part of my (AngualrJs) leaflet map, so I don't want it to be permanently visible.
I guess that means a tooltip, although a clickable button might also be acceptable (downside: requires a click to open & one to close).
There are many, many, many attempts to answer this out there, and even a Leaflet legend plugin, which would be ideal, but won't work for me, probably because of the versions of angualrJs or Leaflet used.
Most of the solutions I found seem to use HML & CSS to position a button over the map, but I would be happier with something that is a part of the map.
This question has an answer that actually works. BUT, if I put even the simplest HTML in it, it gets rendered as plain text. E.g <h``>Legend</h1>.
What is the simplest way to show a tooltip on a Leaflet control with interpreted HTML? Failing that a pop-up window?
The legend cannto be permanently displayed as it would obscure the map, and the map must fill the window.
title can't be styled because every browser display it different and has no style functions. Also it should only a one liner.
You can create your own Tooltip which is only visible if the mouse is over the control.
L.CustomControl = L.Control.extend({
options: {
position: 'topright'
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
container.title = "Plain Text Title";
var button = L.DomUtil.create('a', '', container);
button.innerHTML = '<img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/location-512.png" width="100%"/>';
L.DomEvent.disableClickPropagation(button);
L.DomEvent.on(button, 'click', this._click,this);
L.DomEvent.on(button, 'mouseover', this._mouseover,this);
L.DomEvent.on(button, 'mouseout', this._mouseout,this);
var hiddenContainer = L.DomUtil.create('div', 'leaflet-bar leaflet-control',container);
hiddenContainer.style.position = "absolute";
hiddenContainer.style.right = "32px";
hiddenContainer.style.width = "100px";
hiddenContainer.style.height = "100%";
hiddenContainer.style.top = "-2px";
hiddenContainer.style.margin = "0";
hiddenContainer.style.background = "#fff";
hiddenContainer.style.display = "none";
L.DomEvent.on(hiddenContainer, 'mouseover', this._mouseover,this);
L.DomEvent.on(hiddenContainer, 'mouseout', this._mouseout,this);
L.DomEvent.disableClickPropagation(hiddenContainer);
this.hiddenContainer = hiddenContainer;
return container;
},
_click : function () {
},
_mouseover : function () {
this.hiddenContainer.style.display ="block";
},
_mouseout : function () {
this.hiddenContainer.style.display ="none";
},
setContent: function(text){
this.hiddenContainer.innerHTML = text;
}
});
var control = new L.CustomControl().addTo(map)
control.setContent('<span style="color: red">TEST</span>')
https://jsfiddle.net/falkedesign/r1ndpL9y/
You need to style it with CSS by your self

TinyMCE get font size of selection

I'm currently building my own custom toolbar for TinyMCE, getting & setting the formats through the JS API.
For example, I can set the selected text to bold like this:
this._editor.formatter.toggle('bold');`
Afterwards I can get the format and set the state of my bold-button accordingly like this when the selection changes:
this.isBold = this._editor.formatter.match('bold');
To support font sizes I have a dropdown which applies the correct font size on change:
this._editor.formatter.apply('fontsize', {value: this.fontSize});
But now I need to be able to read the fontsize when the selection changes and I don't know how to achieve this. How can I read the fontsize of the current selection?
As a workaround I'm trying to match the format of the selected node against a list of supported font sizes.
const supportedFontSizes = ['10px', '11px', '12px', '14px', '16px', '18px', '20px', '24px'];
const defaultFontSize = '16px';
let foundFontSize = false;
let fontSize;
supportedFontSizes.some(size => {
if (editor.formatter.match('fontsize', { value: size })) {
fontSize = size;
foundFontSize = true;
return true;
}
return false;
});
if (!foundFontSize) {
fontSize = defaultFontSize;
}

How to add html in autocomplete ace editor?

Somebody can help me how to custom autocomplete for ace editor?
I need to display the emoji images such as below:
This editor is work well for me, but i need to insert the emoji images to the result of autocomplete.
var editor = ace.edit('editor');
editor.setTheme('ace/theme/github');
editor.getSession().setMode('ace/mode/markdown');
editor.$blockScrolling = Infinity; //prevents ace from logging annoying warnings
editor.getSession().on('change', function () {
draceditor.val(editor.getSession().getValue());
});
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
// Ace autocomplete
var emojiWordCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
var wordList = emojis; // list emojis from `atwho/emojis.min.js`
var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
var curTokens = obj.value.split(/\s+/);
var lastToken = curTokens[curTokens.length-1];
if (lastToken[0] == ':') {
console.log(lastToken);
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word.replace(':', '') + ' ',
meta: 'emoji' // this should return as text only.
};
}));
}
}
}
editor.completers = [emojiWordCompleter]
my bad idea, i try with this meta: '<img src="/path/to/emoji.png">', but of course it can't be work.
Any idea how to solve this? Thank so much before..
There is no built in way to do this.
You can create a custom renderer similar to https://github.com/c9/c9.ide.language.core/blob/bfb5dd2acc/completedp.js#L44, or modify https://github.com/ajaxorg/ace/blob/master/lib/ace/autocomplete/popup.js and create pull request to ace.

Tinymce applies heading style to whole paragraph, not only selected text

I have just noticed an annoying behavior of TinyMCE editor. When I have written, let's say, a few paragraphs of text, and I want to select some of it and make it a heading (Heading 2 style), the whole text gets that heading style, not only the text I have selected.
This is not happening when I want to apply bolding - in this case it works as expected; only the selected text becomes bolded.
How can I change this behavior? I know there is HTML mode where I can change the style, but I am afraid my clients are not so familiar with HTML and they'd want to use visual mode only.
I guess it is because h2-tags usually are not valid as child nodes of paragraphs.
You may try to adjust the tinymce configuration parameter valid_children according to your needs.
This is the native behavior of TinyMCE and it cannot be changed.
Here is the workaround that I've found. Works great for me
tinyMCE.PluginManager.add('FormatingToolbarButtons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function () {
if (this.active()) {
editor.execCommand('mceToggleFormat', false, name);
this.active(false)
}
else {
editor.selection.setContent('<' + name + '>' + editor.selection.getContent() + '</' + name + '>');
this.active(true)
}
},
onPostRender: function () {
var self = this, setup = function () {
editor.formatter.formatChanged(name, function (state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
Could you try below:
https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#force_br_newlines/
Try force_p_newlines : true, and see if it works.