I'm implementing tinymce editor, it creates an iframe with head and body. To insert my site's css I just use the content_css : "path/to/css/mysite.css" in the init() for the tinymce, but that for some reason isn't working, it's not being reflected on the iframe, is there any possibility to make it work?
The editor is working but without my site's css styles.
Btw I'm using the latest TinyMCE version (4.0.12)
Thanks in advance.
Related
I have a Wordpress where I want to use the tree counter widget from this site: https://kb.tree-nation.com/knowledge/tree-and-co2-counters (the top one).
How do I override the CSS style of that widget? Custom CSS in Wordpress doesn't work.
I actually just need to show the number value (the count of trees).
If you embedded an iframe that is hosted in another website, you will not be able to edit the style of the elements inside the iframe by adding CSS to your website.
We are using the Summernote wysiwyg editor to review/preview html content of which some contain external stylesheet references. Some of this css changes not only Summernote itself but the parent page within which Summernote resides.
To demonstrate, just go to the summernote.org page and drop this css reference into the online editor (selecting "< / >" for code view first). You should see the toolbar (and contents on some pages) becoming centered and other undesired changes because of the css that's within the editor :-
<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />
We have tried to put summernote within an iframe tag but this doesnt help so is there a way of isolating summernote thus preventing this css "leakage" to the surrounding page?
For reference, we are using asp.net Razor pages.
Thanks.
James
After much research it seems because Summernote does not reside within it's own iFrame, any CSS included within will naturally propogate to the surrounding page. Others have commented on this although I don't have that information source to hand.
We had no choice but to change to ckeditor, which is working really well for our needs.
If look the example of tinyMCE on official website with Firefox you can see the blinking of editor. Only in firefox.
I think it is bacause css files of editor are external and I want to put all css rules in the html file of iframe.
Please help me to find place where I can add inline styles!
I think you need to set the content css, see here for details:
http://www.tinymce.com/wiki.php/Configuration:content_css
eg:
content_css : "css/custom_content.css"
Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!
As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.
I wrote a plugin for FCKeditor that inserts <div> tags into HTML for later replacement with dynamic data.
I use the fake image approach to insert an image placeholder into the visual part of the FCKeditor window. That image is connected to the <div> as it appears in the source. This approach is also used by the native page break functionality native to FCKeditor.
I want to apply some styles to that image. Specifically, I want to add a icon image to the background. I have been adding the CSS to my custom editorarea CSS file that I specified in my config file. But I'd like to move that code into the plugin directory somehow.
Is there a way to add custom CSS to the editoarea using Javascript in a plugin?
I have written exactly this kind of plug-in myself in the past. Looking at my code, it seems I concluded that it wasn't possible (or at least straightforward) to add custom CSS to the edit document, so I specify everything on the style object of the image placeholder in the plugin script, including a background image that lives in the plugin directory.