Remove "Blocks" in "Format" button dropdown menu in TinyMCE - 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'}
}
});

Related

How to specify next style to use with TinyMCE style_formats?

Given TinyMCE config fragment
style_formats: [
{ title: 'Headings', items: [
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Heading 4', format: 'h4' },
{ title: 'Heading 5', format: 'h5' },
{ title: 'Heading 6', format: 'h6' }
]},
{ title: 'Blocks', items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Pre', format: 'pre' }
]},
],
Does TinyMCE (version 5 or 6) allow somehow defining that when user is currently using "Heading 2" style and he or she presses Enter key, the next style would be "Blockquote"?
Logically it could be something like
{ title: 'Heading 2', format: 'h2', next_style_after_enter: 'Blockquote' },
but obviously this specific syntax is not the correct one because I don't know the correct syntax. Obviously using the label for linking different styles is not optimal either, so better id would be needed, too.

How to update CSS class and rel attributes for anchor link in TinyMCE 5 file_picker_callback / callback() function

so I'm using TinyMCE 5 and can't find how to update CSS class="" and rel="" attributes for:
<a class="..." rel="...." href="data.url">data.text</a>
anchor link with callback() function?
Couldn't find solution through documentation:
https://www.tiny.cloud/docs/plugins/opensource/link/
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback
and Google.
My TinyMCE 5 init() JavaScript example code:
tinyMCE.init({
//...
file_picker_types: 'file image',
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'file') {
tinymce.activeEditor.windowManager.openUrl({
title: 'File browser',
url: TINYMCE_FILE_BROWSER_URL,
onMessage: function (api, data) {
if (data.mceAction === 'fileAction') {
callback(data.url, { text: data.text, 'css_classes_attribute': 'int_mark_link' });
api.close();
}
}
});
}
},
//predefined CSS classes:
link_class_list: [
{title: 'None', value: ''},
{title: 'External Link', value: 'ext_link'},
{title: 'Internal Support Link', value: 'int_sup_link'},
{title: 'Internal Marketing Link', value: 'int_mark_link'},
{title: 'Other Internal Link', value: 'int_other_link'}
],
//...
});
Thanks in advance.
A rel can be set with the rel_list
rel_list: [
{title: 'None', value: ''},
{title: 'Rel nofollow', value: 'nofollow'},
{title: 'Rel sponsored', value: 'sponsored'}
],
Classes like this
link_class_list: [
{title: 'None', value: ''},
{title: 'Bold', value: 'classbold'},
{title: 'Extrabold', value: 'classextrabold'}
],

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

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>');
}
});
}
});

Customize tinymce 4.0.5 styleselect toolbar menu

I'm trying to customize the default styleselect toolbar menu so I can add to it a custom menu element. The idea is to place font size as a styleselect submenu:
I initialized a TinyMCE 4.0.5 in the following way:
tinymce.init(
{
language_url : '/webobbywebapp/js/tiny_mce/language/es.js',
selector:'textarea',
plugins: "image, link, print",
toolbar: "styleselect | undo redo | removeformat | bold italic underline | aligncenter alignjustify | bullist numlist outdent indent | link | print | fontselect fontsizeselect",
menubar: false,
statusbar: true,
resize: true
});
As I'm not able to find how to customize the default styleselect menu I'm also trying to create a complete new menu where i can add font size control. But I don't want to show any toolbar, I want a single menu bar.
EDIT: Right now I'm trying to modify the styleselect menu using the following code, but fontselect and fontsizeselect appear disabled
,style_formats:
[{
title: "Headers_",
items: [{title: "Header 1",format: "h1"}, {title: "Header 2",format: "h2"}, {title: "Header 3",format: "h3"}, {title: "Header 4",format: "h4"}, {title: "Header 5",format: "h5"}, {title: "Header 6",format: "h6"}]
},
{title: "_Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},
{title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]},
{title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},
{title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},
{title: "Classes", items: 'fontsizeselect'},
{title: "dddClasses", items: 'fontselect'
}]
As of version 4.0.13 there is now a new property you can use during init called style_formats_merge. Set this property to true and it will concatenate your styles onto the default set.
tinymce.init({
style_formats_merge: true,
style_formats: [
{
title: 'Line Height',
items: [
{ title: 'Normal Line Height', inline: 'span', styles: { "line-height": '100%' } },
{ title: 'Line Height + 10%', inline: 'span', styles: { "line-height": '110%' } },
{ title: 'Line Height + 50%', inline: 'span', styles: { "line-height": '150%' } },
{ title: 'Line Height + 100%', inline: 'span', styles: { "line-height": '200%' } }
]
}
]
});
Finally, adding the following code did the trick:
,style_formats:[
{
title: "Headers",
items: [
{title: "Header 1",format: "h1"},
{title: "Header 2",format: "h2"},
{title: "Header 3",format: "h3"},
{title: "Header 4",format: "h4"},
{title: "Header 5",format: "h5"},
{title: "Header 6",format: "h6"}
]
},
{
title: "Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},
{title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]},
{title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},
{title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},
{
title: "Font Family",
items: [
{title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
{title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
{title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
{title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
{title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
{title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
{title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
{title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
{title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
{title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
{title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
{title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
{title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
]
},
{title: "Font Size", items: [
{title: '8pt', inline:'span', styles: { fontSize: '12px', 'font-size': '8px' } },
{title: '10pt', inline:'span', styles: { fontSize: '12px', 'font-size': '10px' } },
{title: '12pt', inline:'span', styles: { fontSize: '12px', 'font-size': '12px' } },
{title: '14pt', inline:'span', styles: { fontSize: '12px', 'font-size': '14px' } },
{title: '16pt', inline:'span', styles: { fontSize: '12px', 'font-size': '16px' } }
]
}]
If you also need to remove elements from the defaults, you can simply copy/paste them from the source code on Github and adjust them as you wish:
tinymce.init({
style_formats: [
// Add the defaults from above
]
// ...
}
EDIT Updated URL thanks to #lucas-moeskops comment :)

TinyMCE displaying html tags after saving and reloading the data

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(/&#39/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.