I am seeing an empty box for my grid toolbar icons using font awesome 5 classes.
Usage:
...
toolbar: {
items : [
{
type: 'button',
id: 'toobar_download',
icon: 'fas fa-download',
text: 'Download',
tooltip: 'Download Report',
disabled:false,
onClick: function (event) {
that.download();
}
}
]
},
...
This was the workaround that allowed the font awesome icons to render properly, adding the oh-so-famous !important
.w2ui-tb-image .fa, .fas {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
}
Related
I recently upgraded my Material UI from V4 to 5 and stuck with a truckload of issues. One of them is that the styles are messing up when i move away from JSS
The arrow icon need to get the styles and the styles are not getting applied.
const StyledPopper = styled(Popper)(({ theme }) => {
return {
[`&.${classes.popper}`]: {
top: "100px !important",
left: "200px !important",
zIndex: 1,
'&[x-placement*="bottom"] $arrow': {
// is not getting applied
marginTop: theme.spacing(-5.25),
"&::before": {
borderWidth: "0 1em 1em 1em",
borderColor: `transparent transparent red transparent`
}
}
},
[`& .${classes.arrow}`]: {
position: "absolute",
"&::before": {
content: '""',
display: "block",
borderStyle: "solid"
}
}
};
});
<StyledPopper
open
placement="bottom-end"
anchorEl={
document && document.getElementById("location-confirmer-desktop")
}
modifiers={{ arrow: { enabled: true, element: arrowRef } }}
className={classes.popper}
>
<Box ref={setArrowRef} className={classes.arrow} />
<Box>This is the content</Box>
</StyledPopper>
https://codesandbox.io/s/combobox-demo-material-ui-forked-v5-8-4-g0pyhg?file=/demo.tsx
How to add custom icons in w2ui toolbar.
I need to add redo and undo icons in w2ui toolbar.
Could you please let me know?
You can use font awesome or any other CSS class based icons in a w2ui toolbar.
Example:
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item1', text: 'Undo', icon: 'fa fa-undo' },
{ type: 'button', id: 'item2', text: 'redo', icon: 'fa fa-repeat' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
}
});
});
Internally, w2ui will create a <span class="fa fa-undo"> tag for the icon, thus - like I said - you can just use any other CSS based icons.
Live example: http://w2ui.com/web/demos/#!toolbar/toolbar-9
Note: the live example uses an old font awesome version, where the extra fa class is missing.
Change [] and ... Enjoy:
[!DOCTYPE html]
[html][head][title]W2UI Demo: toolbar-1[/title]
[link rel="stylesheet" href="http://w2ui.com/web/css/font-awesome/font-awesome.min.css"]
[link rel="stylesheet" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css"]
[script type="text/javascript" src="http://w2ui.com/web/js/jquery-2.1.1.min.js"][/script]
[script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"][/script]
[style]
.MyIcon1 { content:url('MyLocalIcon.png'); }
.MyIcon2 { content:url('https://www.gstatic.com/inputtools/images/tia.png'); }
[/style]
[/head]
[body]
[div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"][/div]
[script type="text/javascript"]
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [ { type: 'button', id: 'btn1', text: 'Undo', icon: 'fa-undo' }, //icon get from: font-awesome
{ type: 'button', id: 'btn2', text: 'Redo', icon: 'fa-repeat' }, //icon get from: font-awesome
{ type: 'button', id: 'btn3', text: 'Local Icon', icon: 'MyIcon1' }, //local file
{ type: 'button', id: 'btn4', text: 'Net Icon', icon: 'MyIcon2' } ] //internet link to file
});
});
[/script]
[/body]
[/html]
You can use also bootstrap glyphicon with no problem, example
icon: 'glyphicon glyphicon-menu-left'
But bootstrap 4 doesn't include fonts folders so you can download bootstrap3 and copy the fonts folder in you project , the folder contains
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
and after go here and add this css in bootstrap4 css at the end of the file..
https://gist.github.com/planetoftheweb/5d75a1ad45eb3059710747a3695fc068
and insert the right font path of your folder copied in your project.
Or you can use every png in right format for example in this way
<style type="text/css">
.icona:before{
content:url('yourUrl.png');
}
</style>
<script type="text/javascrpt">
//Your w2ui object....
{ type: 'button', id: 'item1', text: 'Undo', icon: 'icona' },
</script
I'm using tinymce a trying to extend a plugin to show a dialog with specific layout:
editor.windowManager.open({
title: 'Title of my dialog',
body: [
{type: 'label', text: 'my label'},
{ name:'my_input', type: 'textbox'},
// { type: 'text', html:'some content with <b>bold</b> if posilbe!'},
// { type: 'html', value:'<div>with custom formating</div>'}
]
}
I checked the the documentation for tinymce.ui several times but can find a way to add html or text component in the constructor of the dialog (like the comment rows in the example).
I know there is a option using a ready html template for the dialog.. but there are also a lot of events and triggers so using the constructor and .ui components is more suitable for my case.
I used to use JQuery UI dialog for this but ran into some issues after TinyMCE 4.0.
I have a TinyMCE plugin that lets people fetch the plain text version of their post in the WordPress editor. Then I show them that text using this:
var plain_block = {
type: 'container',
html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};
ed.windowManager.open({
title: "Plain Text of This Post",
spacing: 10,
padding: 10,
items: [
plain_block
],
buttons: [
{
text: "Close",
onclick: function() { ed.windowManager.close();}
}
]
});
End result is a pretty plain-jane dialog box with some HTML and a Close button
I’ve been looking for a way to do this. I have a style sheet that is loaded into TinyMCE. The style sheet is generated via my content management system based of the active template. Problem is I can not get TinyMCE to let me select multiple CSS classes to a signle element. Here is a example:
.left_round_thumb_small {
width:65px;
height:65px;
border-radius:35px;
-moz-border-radius:35px;
-webkit-border-radius:35px;
-khtml-border-radius:35px;
background:url(/skins/msc_2013/images/lines.png) repeat;
float:left;
margin:0 25px 0 0;
}
.center_round_thumb_large {
width:162px;
height:162px;
border-radius:85px;
-moz-border-radius:85px;
-webkit-border-radius:85px;
-khtml-border-radius:85px;
background:url(/skins/msc_2013/images/lines.png) repeat;
position:relative;
margin:0 25px 0 0;
}
.round_border_black {border:1px solid black;}
.round_border_red {border:1px solid red;}
.round_border_blue {border:1px solid #00aeef;}
.round_border_green {border:1px solid #3cb64b;}
Now I know I could go in and do something like:
tinyMCE.init({
style_formats : [
{title: 'Left Thumb Black', classes: 'left_round_thumb_small round_border_black'},
{title: 'Center Thumb Blue', classes: 'center_round_thumb_small round_border_blue'},
]
});
Now seeing that this style sheet loaded into TinyMCE is generated based of the CMS’s active template. If I were to change the template I would also have to change the style code. Which will be come a major hassle in the future.
So anyone knows of a code patch to the style selector or plugin that will let me do this?
see below usage of content_css for multiple css files
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
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'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
**content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css']**
});
I know this is an old post, but here is what I do, in case someone else come looking.
style_formats: [
{
title: 'Button Styles', items: [
//{ title: 'Button Class (Must Select)', selector: 'a', classes: 'btn' },
{ title: 'Default Class', selector: 'a', classes: ['btn', 'btn-default'] },
{ title: 'Primary Class', selector: 'a', classes: ['btn', 'btn-primary'] },
{ title: 'Success Class', selector: 'a', classes: ['btn', 'btn-success'] },
{ title: 'Warning Class', selector: 'a', classes: ['btn', 'btn-warning'] },
{ title: 'Danger Class', selector: 'a', classes: ['btn', 'btn-danger'] },
{ title: 'Info Class', selector: 'a', classes: ['btn', 'btn-info'] },
{ title: 'Charcoal Class', selector: 'a', classes: ['btn', 'btn-charcoal'] },
{ title: 'Disabled Class', selector: 'a', classes: ['btn', 'btn disabled'] }]
}
]
As you can see, I wanted to include the 'btn' class with each of the Bootstrap button classes. All you have to do is wrap each class name in single-quotes, and separated each class name with a coma, then wrap all those class names in square brackets []
example: classes: ['btn','btn-default']
I hope this helps someone else.
Based on the name classes - being plural and also on other configuration setting example syntaxes, I would believe that it should look something like this:
tinyMCE.init({
style_formats : [
{title : 'Style1', classes : {'left_round_thumb_small','round_border_black'} },
{title : 'Style2', classes : {'center_round_thumb_small','round_border_blue'} },
]
});
I am using Tiny 4.3.3 for MODx
I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please?
Thanks
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
Steps to be done, in order to achieve the desired solution:
tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
plugin code:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
The editor now looks like this:
and the source like in your example:
First of all you will need to modify the tinymce setting valid_elements and valid_children to your needs (add em to the valid_elements and em as child to the tags desired (probably p) to valid_children).
Second you will need an own plugin with an own drop down or button to insert this code.
You can add one or more tag structures simply using the template plugin.
See documentation
https://www.tiny.cloud/docs/plugins/opensource/template/
See interactive example:
https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});