I have a lot of tags, and I need to select a lot for each document. It is uncomfortable to click one by one every time. Also I see selected elements. How can I remake it into somefield like a multiselect? It could be even native. Or how to select all tags at once?
I am using array:
{
title: 'Language',
name: 'language',
type: 'array',
options: {
layout: 'grid'
},
of: [{
type: 'reference',
title: 'Lang',
to: {
type: 'settingLanguages'
}
}],
},
Dropdown example (Add field to schema):
{
title: 'Genre',
name: 'genre',
type: 'string',
options: {
list: [
{ title: 'Sci-Fi', value: 'sci-fi' },
{ title: 'Western', value: 'western' },
],
},
},
This is currently not possible out of the box with the default array component, but you should be able to create an input like this by building a custom input for it with the behaviour you want.
More on how to build custom inputs: https://www.sanity.io/docs/extending/custom-input-widgets
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>');
}
});
}
});
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
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'}
}
});
I'm having a bit of an issue with TinyMCE.
After saving the contents of the editor and redisplaying it all the HTML tags are visible.
This is how I'm initializing the editor:
tinyMCE.init({
setup: function (ed) {
ed.onSaveContent.add(function (ed, o) {
o.content = o.content.replace(/'/g, '&apos');
});
},
// General options
mode: 'specific_textareas',
theme: 'advanced',
encoding: 'xml',
entity_encoding: 'raw',
height: '500',
width: '100%',
plugins: 'autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave',
editor_selector: 'rich-text-area',
editor_deselector: 'text-area',
// Theme options
theme_advanced_buttons1: 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect',
theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor',
theme_advanced_buttons3: 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left',
theme_advanced_statusbar_location: 'bottom',
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
content_css: 'css/content.css',
// Drop lists for link/image/media/template dialogs
template_external_list_url: 'lists/template_list.js',
external_link_list_url: 'lists/link_list.js',
external_image_list_url: 'lists/image_list.js',
media_external_list_url: 'lists/media_list.js',
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
The data after its redisplayed:
The data as it is stored in the database:
<p>Testing</p>
See http://www.tinymce.com/wiki.php/Configuration:encoding
Seems like you need to comment encoding: 'xml' on your configuration.
Add this under init function:
tinyMCE.init( {
forced_root_block: false, // Start tinyMCE without any paragraph tag
} )
you can remove Html tags with the help of #Html.Raw()
<p>we are Arrivaler web and Mobile development</p>
index view
#Html.Raw(var.description)
result:
we are Arrivaler web and Mobile development
There is a option by which we get raw data from database which is stored in the form of html tags.
html.raw is used for this purpose
In asp.net #html.raw(object) is the solution for this problem
Remember to decode the string that will be passed to tinyMCE.
Use html_entity_decode function in php.