I'm trying to create an application. Where I'm using tinymce as editor. In the file panel, I don;t want to show new document. Corrently it's rendering:
But I just want to render it with thse two options:
Can anyone help me with it?
Here is my related config:
plugins: 'print preview ...',
menubar: 'file edit ...',
thanks.
Per the documentation if you want to control what you see on each discrete menu you have to provide those choices explicitly:
https://www.tiny.cloud/docs/configure/editor-appearance/#menu
The defaults are:
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
So if you only want 2 items on the file menu you would have to state that explicitly within the broader menu option:
file: { title: 'File', items: 'preview | print ' },
Here is a TinyMCE Fiddle showing this in action: https://fiddle.tiny.cloud/hYhaab
Related
I want to make tinymce input to read only. i have tried with the below code. Please help me with this issue.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: true,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});
If you are using version 4.x, remove the readonly: true option and try
setup: function (editor) {
editor.setMode("readonly")
},
http://fiddle.tinymce.com/Lugaab/2
As stated in the TinyMCE docs https://www.tinymce.com/docs-3x/reference/configuration/Configuration3x#readonly/ the readonly attribute should be set to '1' not to 'true'.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: 1,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});
I'm using latest stable release of TinyMCE 4. Initialization code:
tinyMCE.init({
mode: "textareas",
plugins: "codesample hr lists preview anchor code visualblocks fullscreen",
toolbar: ['alignleft aligncenter alignright alignjustify alignnone | styleselect formatselect | bold italic blockquote | link unlink',
'bullist numlist anchor | image | preview | codesample | visualblocks fullscreen code'
],
menubar: false,
height: 600,
codesample_languages: [
{text: 'Java', value: 'java'},
{text: 'Python', value: 'python'},
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'C', value: 'c'},
{text: 'C++', value: 'cpp'}
]
});
This code gives the following result:
As you can see, there is an empty space in the first toolbar, but the second one is OK. How to fix this?
I had a similar problem not related to Django. It would seem that the the menu items were picking up the float position of a previous floating element. Wrap your textarea with a style="clear:both;"
<div style="clear:both;">
<textarea></textarea>
</div>
I'm trying to use TinyMCE as an editor and want to have the ability to add "hr" elements. I've added the plugin as they outline, but I do not see the "hr" button/option in my editor.
Any insight on this problem would be great!
Here's how I an initiating it:
tinymce.init({
selector: "textarea",
plugins: [
"template advlist autolink link image lists charmap print preview",
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
browser_spellcheck : true ,
toolbar: "undo redo | styleselect | bold italic | link image | template ",
menubar: false,
resize: "both",
content_css: "/Content/bootstrap.min.css, /Content/Site.css",
template_cdate_classes: "cdate creationdate",
template_mdate_classes: "mdate modifieddate",
template_selected_content_classes: "selcontent",
template_cdate_format: "%m/%d/%Y : %H:%M:%S",
template_mdate_format: "%m/%d/%Y : %H:%M:%S",
file_browser_callback_types: 'file image media',
templates: [
{
title: "Center Column",
url: "/Scripts/tinymce/template/center_column.html",
description: "Adds Editor Name and Staff ID"
},
{
title: "Two Column w/ Image Right",
url: "/Scripts/tinymce/template/two_column_image_right.html",
description: "Adds an editing timestamp."
},
{
title: "Two Column w Image Left",
url: "/Scripts/tinymce/template/two_column_image_left.html",
description: "Adds an editing timestamp."
},
{
title: "Contact Page",
url: "/Scripts/tinymce/template/contact_page.html",
description: "Adds an editing timestamp."
}
]
});
Your toollbar syntax should look something like this :
toolbar: "hr undo redo | styleselect | bold italic | link image | template ",
I inserted the hr button in the beginning of the button stack but you can insert it anywhere you need. Hopefully tinyMCE will write about this on the relevant page.
Well you did not add HorizontalRule to the toolbar options.
I have just included my first tinyMCE bit of code, works absolutely great. However, In one part of my project, I dynamically create textareas that must also have tinyMCE enabled.. How do i go about adding tinymce to the new textarea i create.
At the moment, this is firing globally:
function LoadTinymce()
{
tinymce.init({
menu: {
file: false,
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'}
},
selector: ".tinymce"
});
}
LoadTinymce();
When i click on the button that creates my new textarea, what might i be calling to apply a new tiny mce rte on it?
This is very easy, all you need to do is to call the tinymce mceAddcontrol command in combination with the id of the newly created textarea:
tinymce.execCommand('mceAddControl', false, "your_textarea_id");
This should do! Click on fiddle link below. :)
http://jsfiddle.net/dcodesmith/ttXvb/
(function($) {
function loadTinymcsConfig(){
tinymce.init({
menu: {
file: false,
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'}
},
selector: ".tinymce"
});
};
loadTinymcsConfig();
var textareaHtmlTmpl = '<textarea class=\'tinymce\'></textarea>';
$('.addtextarea').on('click', function(){
$('body').append(textareaHtmlTmpl);
loadTinymcsConfig();
});
})($);
There is a need to dynamically change a view in ExtJS 4 grid panel.
By default grid is displayed as a table, but in my application I need a feature to switch grid from table view to tiles (or cards) view. Below I tried to represent how it should look like.
Normal view: Tiles view:
====================================== ====================================
| Name | Description | | Name | Description |
====================================== ====================================
| Name 1 | First description |^| | ------ ------ ------ |^|
|----------------------------------|X| | | O O | | # # | | > < | |X|
| Name 2 | Second description |X| | | \__/ | | \__/ | | \__/ | |X|
|----------------------------------|X| | ------ ------ ------ |X|
| Name 3 | Third description | | | Name 1 Name 2 Name 3 | |
|----------------------------------| | | | |
| | | | | ------ ------ ------ | |
| ... | ... |v| | | o O | | - - | | * * | |v|
====================================== ====================================
I have found almost perfect implementation of what I need, named Ext.ux.grid.ExplorerView. However, the extension was developed for ExtJS versions 2.x (3.x), and cannot be reused for ExtJS 4.
I use a grid which is created as simple as:
Ext.create("Ext.grid.Panel", {
store: ...,
columns: [{
header: "Name",
dataIndex: "name",
}, {
header: "Description",
dataIndex: "description"
}],
tbar: [ ... ],
bbar: [ ... ],
listeners: { ... },
multiSelect: true,
viewConfig: {
stripeRows: true,
markDirty: false,
listeners: { ... }
}
});
I have tried to update tpl property of the inner view component, but nothing seems to work.
Do you have any idea of how to make the dynamic switch between the views for a single grid panel?
The problem was easily solved with wonderful feature for grid panel named "Tileview" developed by Harald Hanek. The solution was specially developed for ExtJS 4.
The basic usage example is:
var grid = Ext.create("Ext.grid.Panel", {
store: ...,
columns: [{
header: "Name",
dataIndex: "name",
}, {
header: "Description",
dataIndex: "description"
}],
tbar: [ ... ],
bbar: [ ... ],
listeners: { ... },
multiSelect: true,
viewConfig: {
stripeRows: true,
markDirty: false,
listeners: { ... }
},
features: [Ext.create("Ext.ux.grid.feature.Tileview", {
getAdditionalData: function(data, index, record, orig) {
if (this.viewMode) {
return {
name: record.get("name").toLowerCase(),
};
}
return {};
},
viewMode: 'tileIcons', // default view
viewTpls: {
tileIcons: [
'<td class="{cls} ux-tileview-detailed-icon-row">',
'<table class="x-grid-row-table">',
'<tbody>',
'<tr>',
'<td class="x-grid-col x-grid-cell ux-tileview-icon" style="background-image: url("...");">',
'</td>',
'<td class="x-grid-col x-grid-cell">',
'<div class="x-grid-cell-inner">{name}</div>',
'</td>',
'</tr>',
'</tbody>',
'</table>',
'</td>'
].join(""),
mediumIcons: [ ... ].join(""),
largeIcons: [ ... ].join("")
}
})]
});
To change the view we should just use setView() method, i.e.
grid.features[0].setView("tileIcons");
That's how the feature looks like in the real life.
Example of tile view:
Example of image view:
References:
https://github.com/harrydeluxe/extjs-ux/blob/master/ux/grid/feature/Tileview.js -- Tileview sources
https://github.com/harrydeluxe/extjs-ux -- All Harald's extensions with screenshots
http://www.sencha.com/forum/showthread.php?183023-Thumbnails-in-Grid-with-switching-between-views -- Feature discussion node on Sencha forum
http://harrydeluxe.github.com/extjs-ux/example/grid/tileview.html -- Demo
I wouldn't do it like that. Instead, have a grid and a view in a card layout, the view gives you the ability to have pretty much any markup per item, here's a simple example:
Ext.define('Thing', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.require('*');
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: Thing,
data: [{
name: 'Name 1'
}, {
name: 'Name 2'
}, {
name: 'Name 3'
}]
});
var gridActive = true;
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: 'card',
tbar: [{
text: 'Switch',
handler: function(){
var item;
if (gridActive) {
item = panel.items.last();
} else {
item = panel.items.first();
}
gridActive = !gridActive;
panel.getLayout().setActiveItem(item);
}
}],
items: [{
border: false,
xtype: 'gridpanel',
columns: [{
text: 'Name',
dataIndex: 'name'
}],
store: store
}, {
xtype: 'dataview',
itemTpl: '<b>{name}</b>',
store: store
}]
});
});