I come around to setup an background-image for summernote wysiwyg editor, let me know is there any control I need to set or any wysiwyg editor supports this thanks.
Summernote does not explicitly support setting background images in the editor. You should, however, be able to do so by setting the background in css on the .note-editable class, just make sure to do so after Summernotes declaration, i.e. include your style after the Summernote stylesheet. Keep in mind using backgrounds could make the visual appearance of elements inside the editing area harder to visualise.
Related
How do I change the background color of the Settings page, not the Editor, but the Settings page? I know it probably involves changing a workbench.colorCustomization token, but I don't know which one it is or if it even exists. Also, is there some sort of extension that allows you to inspect the UI elements/icons of VS Code?
I have already tried changing the editor.background token, which applied to not just the Editor, but also the Welcome and Settings pages. I was able to change the background color for the Welcome page using the welcomePage.background token, but I don't know how to change it for Settings.
I want the Settings background color to change so I can see it better.
It doesn't look like you can. If under workbench.colorCustomizations you type settings you will get the list of available settings page items of which you can change the color.
Perhaps one or more of the foreground colors to change the text color will help you.
The Custom CSS and JS Loader may allow you to change the color of the settings page. You can inspect vscode's elements by Help/Toggle Developer Tools to find out what element you need to target with that extension.
<div class="settings-editor " or a child of that. Set its background-color to what you want using that extension.
I know I can link a style sheet to TinyMCE and this will be used when I am editing. It also seems to apply the styling to the Heading options available in the format dropdown list which is great. I also know I can add custom formats menu using custom_formats (here) but is there a way for the Formats to be populated using my CSS automatically? I have various classes in my CSS for the P tag and would like to allow my users to utilise them.
No, this is not possible (at least not out of the box).
How could a piece of code guess what style or class to use from the pure CSS?
I have a problem, and I haven't been able to solve it or find an answer for a few days now.
My theme (BusinessLite) for some reason has set table width in css to 100px!important.
This forces the TinyMCE made Tables to shrink as much as possible, thus making them useless.
TinyMCE by default converts the set width to inline style tag, but it is ignored since !important is present on the theme CSS. I have tried doing it manually, and i can confirm it fixes the issue, but i don't know of a way to make it automatic?
Does anyone know of a way to set TinyMCE to always add !important to the table width?
You could use the content_css setting to load custom css and overwrite theme css.
You would need to issue the !important too to make it work.
I am having some trouble styling filepicker.io widgets for web, specifically filepicker-dragdrop.
Is there any way to disable the inline styling and replace them with classes?
Something like data-fp-disable-styles or perhaps when using data-fp-dropzone-class="..." the inline styling is automatically disabled.
Although you can add classes to the button with the attribute data-fp-button-class, I cannot get rid of the inline styling on the on the dropzone and container div.
You can set the data-fp-drag-class and data-fp-class options to set the styling of the dropzone and container div and use the !important flag for any styles that you want to use to override the inline styles.
If you're looking for a more fully customizable solution, we'd recommend using the raw javascript api's to create your own drag pane (https://developers.filepicker.io/docs/web/#widgets-droppane) and/or pick button
Use presentation solution can only change the look&feel of Views and Editors,
Can I change the look&feel of swt widgets, such as Tree, Table , TextInput ...and the background-color of all the gray panels
You can use the e4's CSS engine to render the elements. It works well with 3.x as well.