I am using TinyMCE 5 for my React project. I want to customize the editor and I want to do things like for eg: editing border property or adding box shadow to toolbar. I tried adding css using content_css property but it isn't working. Is there any other work around for it?
edit:
Here's how I want it to look like in the end
here
I was able to add custom icons. Only problem I'm facing is modifying the css. I want to bring the toolbar down, add shadow effect, make icons little smaller and reduce the width of the toolbar. I also tried using styled-components to override CSS but it didn't work. Is there any alternative to override CSS?
You can bring the toolbar down using toolbar_location: "bottom".
Regarding CSS, you can override the default CSS with your own styles using content_css. For example:
content_css: "/mycontent.css";
Or you can override specific parts of it using content_style. For example:
content_style: "body { font-family: Arial; }";
Also see:
Customizing the TinyMCE toolbar
content_css & content_style
Related
I am trying to access the scrollbar styling in the antD Select component. I have found where to style the scrollbar but it is not functional. Meaning, it shows up when I remove the diplay: none from the style and change the color, but it doesn't scroll. Am I doing something wrong. In order to change the style I am doing something like this...
Also, I found a way to add a functional scrollbar using this code...
.ant-select-dropdown{
overflow: auto;
}
But this does not allow me to style the dropdown scrollbar. Instead I have to style it using the webkit which styles this everywhere and I cannot get it to fit exactly in the dropwdown. I was hoping to use the antD one, as it looks nicer, but it doesn't function for some reason. Any idea how to get this to work?
I found the solution here by setting this on the select element.
Im trying to override Material UI's default styles to make each TableRow have a margin between each other. However, it seems as if the override is not going through to the user interface.
overrides is a Theme setting, not a styling setting.
If you wish to set margins for ALL table rows to 30px (note. I would also suggest setting it to theme.padding(3.75) rather than explicitly defining it as 30px), then you should define it as an override in your Theme (see the documentation on globals).
If you only want to set the margins to 30px for a specific table then you can just use a regular CSS class.
I need to dynamically style the draftjs editor container (basically I need to dynamically apply font sizes to the container, as the font sizes are in percentages). Normally, dynamic styling in react is done by applying styles to the component, but for draftJS, styling the component itself doesn't work and you need to use css to style the .DraftEditor-editorContainerclass.
Is it possible to dynamically style the .DraftEditor-editorContainer while adhering to React principles? I could easily do the dynamic styling with jQuery, but from what I understand this is a horrible practice and should never be done. Is there no other way?
In React, Can somebody explain me, for CSS Pseudo classes (eg. hover,focus,active etc), why I have to go for state changes in react ? why not react developers
kept that style like we do in CSS?
The example which you are referring on https://jsfiddle.net/rz2t224t/2 shows handling specific events on the HTML element.
return React.createElement(
"button",
{onMouseOver: this.mouseOver, onMouseOut: this.mouseOut},
label
);
With above code when onMouseOver and onMouseOut event occur on the button then mouseOver and mouseOut function will be executed respectively.
We can use CSS with reactjs normally as we do.
For example of hover : https://jsfiddle.net/balaji_mitkari/69z2wepo/68520/
You have to use .css to achieve what you are after, you can't do it with inline styles:
from https://medium.com/#jviereck/modularise-css-the-react-way-1e817b317b04#.gwcfeppld
CSS pseudo classes and media queries are not supported: Using inline styles doesn’t give you the full expressiveness compared to writing normal CSS: In particular, there is no way to express CSS selectors for pseudo classes like .notification:hover or .notification:before. Also, it is not possible to use media queries to adapt the styling based on view medium (e.g. adjust the content to look different when viewed on mobile vs. on desktop). Libraries like Radium offer a way to work around these limitations but have to do a nasty tricks to get there.
Hi I am using cleditor in one of my projects.
I want to customize toolbar and change background of toolbar actions which is suitable to the theme of project. ( which i am not able to)
My findings are below
Height/width of action icon are hard coded to 24 value in jquery.cleditor.js.
Icons are taken from buttons.gif ( calculated from stripIndex of action in toolbar for background-position)
So i guess i will need to change both of these files ( button.gif/jquery.cleditor.js), which i believe is very tedious work.
Is there any easy way to set options to change icons in toolbar ?
I made a fork of cleditor where I changed the toolbar to use sprites so I could add
my own custom buttons easily might be able to use some of the work from that. I think
youd have to change the source code though.
https://github.com/billpull/cleditor
https://github.com/billpull/cleditor/commit/22dfe0b057360bdabab9ba184b8eef52f9de9ace