Is it possible to change tinyMCE custom Toolbar ListBox values after tinymce init - tinymce

Following example is add a custom dropdown to tinyMCE, is it possible to change again after init tinyMCE? for example, after init the tinyMCE, update the list again by another button by different list.
https://codepen.io/tinymce/pen/JYwJVr
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'mybutton',
menubar: false,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
setup: function (editor) {
editor.addButton('mybutton', {
type: 'listbox',
text: 'My listbox',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: 'Menu item 1', value: ' <strong>Some bold text!</strong>' },
{ text: 'Menu item 2', value: ' <em>Some italic text!</em>' },
{ text: 'Menu item 3', value: ' Some plain text ...' }
],
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});

I didn't find any choice that I can update only for the custom dropdown. This is not what good way but the only way I can make it work. So what I did was remove tinymce and re-add it again.
tinymce.remove();
tinymce.init({
selector: 'textarea',
setup: function (editor) {
var self = this;
editor.addButton('mybutton', {
type: 'listbox',
text: 'myList',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: newList,
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});

Related

How can I add a new element or div to TinyMCE?

I would like to add one of the open source sliders to my TinyMCE project But I can only change the content_style in the React component. How do I add new HTML tags? I want to add a specific class to some tags or I want to easily change the style or script of the specific class, tag, id vs. I couldn't find anything about this in the documentation. Can anyone help?
<Editor
init={{
selector: "textarea",
height: 500,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste imagetools wordcount",
"table",
],
toolbar:
"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image CustomSlider table",
content_style:
"tr {display: flex} td {flex: 1; overflow-wrap: anywhere} td img {width: 100%; height: auto} img {width: auto}",
file_picker_types: "image",
file_picker_callback: function (cb, value, meta) {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = "blobid" + new Date().getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(",")[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
menu: {
custom: { title: "Custom Menu", items: "undo redo basicitem" },
},
menubar: "file edit format custom",
image_class_list: [
{ title: "None", value: "" },
{ title: "No border", value: "img_no_border" },
{ title: "Green border", value: "img_green_border" },
{ title: "Blue border", value: "img_blue_border" },
{ title: "Red border", value: "img_red_border" },
],
image_list: [
{ title: "Cat", value: "cat.png" },
{ title: "Dog", value: "dog.jpg" },
],
setup: function (editor) {
editor.ui.registry.addMenuItem("basicitem", {
text: "My basic menu item",
onAction: function () {
alert("Menu item clicked");
},
});
editor.ui.registry.addButton("CustomSlider", {
text: "Slider",
icon: "gallery",
onAction: function () {
tinymce.activeEditor.windowManager.open({
title: "Dialog Title", // The dialog's title - displayed in the dialog header
body: {
type: "panel", // The root body type - a Panel or TabPanel
items: [
// A list of panel components
{
type: "htmlpanel", // A HTML panel component
html: "Panel content goes here.",
},
],
},
buttons: [
// A list of footer buttons
{
type: "submit",
text: "OK",
},
],
});
},
});
},
}}
/>

Assign table_class_list as default - TinyMCE

I added two classes by table_class_list, but every time I create a table I have to open the advanced settings, choose the class, and save. Without that it doesn't use any class and is unformatted.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
});
I want the first class to always be selected by default, without me having to open the settings and hit save.

Add data to a custom menu button in TinyMCE

How can I add or associate data to a custom menu button in TinyMCE? My code goes like this:
tinyMCE.init({
selector: 'textarea',
toolbar: " example",
setup: function (ed) {
ed.addButton('example', {
type: 'menubutton',
title: 'Insert Latest Newsletter Link',
icon: false,
text: 'Insert Latest Newsletter Link',
menu: [{text: "Insert Link", onclick: function () {
//this is where i want to retrieve data that
//i associated with my button
} }]
});
}
The solution is by using 'value' in the menu object like:
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
menu:[[object1],[object2],[object3]]
displays the object1,object2, object3 in custom button menu

Remove "Blocks" in "Format" button dropdown menu in TinyMCE

I have this "Format" toolbar button in tinymce, and I just want to know if there's a way to configure it's dropdown list items and how.
For now I have "Headers", "Inline", "Blocks" and "Alignment",
and I want to remove "Blocks".
Thanks in advance :)
Here's a screenshot of what I want to remove:
tinymce dropdown menu item http://imageshack.com/a/img34/2654/wr2h.png
I know this post is old but it appears an answer was never provided. The following will create a custom format menu for the toolbar in TinyMCE 5.0
tinymce.init({
style_formats: [
{ title: 'Headers', items: [
{ title: 'Heading 2', block: 'h2' },
{ title: 'Heading 3', block: 'h3' },
{ title: 'Heading 4', block: 'h4' },
{ title: 'Heading 5', block: 'h5' },
{ title: 'Heading 6', block: 'h6' }
]
},
{ title: 'Blocks', items: [
{ title: 'Paragraph', block: 'p' },
{ title: 'Div', block: 'div' },
{ title: 'Blockquote', block: 'blockquote' },
{ title: 'pre', block: 'pre' }
]
}
]
});
can you try this?
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: '|'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table'},
tools: {title: 'Tools'}
}
});

Reading a form-field in sencha touch extjs

I have a form field and i want to read the text entered into it, i tried the following code:
this.searchButton = new Ext.Button({// The button press will invoke the search action
text: 'Go',
handler: this.searchButtonTap,
scope: this
});
this.topToolbar = new Ext.form.FormPanel({
items: [
{xtype: 'textfield',
name: 'search',
placeHolder: 'Search'},
this.searchButton
]
});
searchButtonTap: function () {
// console.log(this.topToolbar.items.items[1]);
var currentText = AsApp.views.AsListView.getRecord();
console.log(currentText);
},
you may try this:
this.searchField = new Ext.form.Text({
displayField: 'name',
valueField: 'name',
editable: true,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Search...',
selectOnFocus: true
});
this.searchButton = new Ext.Button({// The button press will invoke the search action
text: 'Go',
handler: this.searchButtonTap,
scope: this
});
this.topToolbar = new Ext.Toolbar({
items: [
{ xtype: 'spacer' },
this.searchField,
this.searchButton,
{ xtype: 'spacer' },
]
});
searchButtonTap: function () {
var searchText = this.searchField.getValue();
console.log(searchText);
},
To get the value of a textfield, use the field's getValue() method.
For example:
var field = myTextField;
var currentText = field.getValue();
You can also use searchfield instead of textfield. It also has the getValue() method available.