inherit
218778
0
Mar 26, 2021 23:09:44 GMT -8
rektangle
23
February 2015
rektangle
|
Post by rektangle on Nov 22, 2019 5:17:18 GMT -8
Basically, and I'm going straight to the point here, I did a very basic plugin that affects CSS, specifically images, however it does not affect images in the preview editor. Here's the full plugin (No, really.)
.posts .post .content img { max-height: 480px; max-width: 640px; } While I'm fine and dandy with just having the final post look the part, I want the Preview Editor to reflect the changes that I made.
Help is appreciated.
|
|
inherit
Official Code Helper
65613
0
1
Sept 28, 2022 13:12:14 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,835
December 2005
horace
|
Post by Chris on Nov 22, 2019 6:11:08 GMT -8
Basically, and I'm going straight to the point here, I did a very basic plugin that affects CSS, specifically images, however it does not affect images in the preview editor. Here's the full plugin (No, really.) .posts .post .content img { max-height: 480px; max-width: 640px; } While I'm fine and dandy with just having the final post look the part, I want the Preview Editor to reflect the changes that I made. Help is appreciated. The preview editor is contained within a same origin iframe so is insulated from any CSS you may add to your forum. Being same origin however means it can still be accessed through javascript and there are ways to add styling using javascript [see custom plugin for an example] (function(){ /* grab css component from this plugin so we can insert into preview iframe */ var pluginfont = $('link').last(); /* wait for event indicating that the WYSIWYG build has been completed */ $(document).on('wysiwygcreate', function(ev){ /* grab document of the preview iframe so we can add our stylesheet */ var doc = $(ev.target).data('wysiwyg').container.find('iframe').contents(); $('<link rel="stylesheet" href="'+pluginfont.attr('href')+'" type="text/css">',doc).appendTo(doc.find('head')); }) })();
|
|
inherit
218778
0
Mar 26, 2021 23:09:44 GMT -8
rektangle
23
February 2015
rektangle
|
Post by rektangle on Nov 22, 2019 19:30:49 GMT -8
The preview editor is contained within a same origin iframe so is insulated from any CSS you may add to your forum. Being same origin however means it can still be accessed through javascript and there are ways to add styling using javascript [see custom plugin for an example] (function(){ /* grab css component from this plugin so we can insert into preview iframe */ var pluginfont = $('link').last(); /* wait for event indicating that the WYSIWYG build has been completed */ $(document).on('wysiwygcreate', function(ev){ /* grab document of the preview iframe so we can add our stylesheet */ var doc = $(ev.target).data('wysiwyg').container.find('iframe').contents(); $('<link rel="stylesheet" href="'+pluginfont.attr('href')+'" type="text/css">',doc).appendTo(doc.find('head')); }) })();
As a total newbie to JS and JQuery, (I literally just began learning those two like a month ago) should I change + pluginfont.attr for something referencing images? if I understand correctly, it should be something along the lines of "img.height"? Sorry for the noob question
|
|
inherit
Official Code Helper
65613
0
1
Sept 28, 2022 13:12:14 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,835
December 2005
horace
|
Post by Chris on Nov 23, 2019 10:19:23 GMT -8
The pluginfont is the name of the variable used in the plugin I had linked as an example which in this case inserted a custom hosted font into the preview iframe (the variable can be any name, does not matter). The variable holds a reference to the <link> element in the source code of the page which correlates to the CSS component in your plugin. Whatever you have placed in that CSS component when you created that plugin is irrelevant, be it CSS for fonts, image styling, etc.. All the javascript code does it take that CSS component and insert it also in the preview iframe so it can also affect whatever is in that iframe.
If you want img.height as a selector then you add it to your CSS component in the plugin, the javascript code (that you place into the JS Component of your plugin) does not care what is in the CSS component since all it does it take that CSS component and inserts it into the preview iframe so it can affect what is in that iframe.
|
|
inherit
218778
0
Mar 26, 2021 23:09:44 GMT -8
rektangle
23
February 2015
rektangle
|
Post by rektangle on Nov 23, 2019 12:05:49 GMT -8
The pluginfont is the name of the variable used in the plugin I had linked as an example which in this case inserted a custom hosted font into the preview iframe (the variable can be any name, does not matter). The variable holds a reference to the <link> element in the source code of the page which correlates to the CSS component in your plugin. Whatever you have placed in that CSS component when you created that plugin is irrelevant, be it CSS for fonts, image styling, etc.. All the javascript code does it take that CSS component and insert it also in the preview iframe so it can also affect whatever is in that iframe. If you want img.height as a selector then you add it to your CSS component in the plugin, the javascript code (that you place into the JS Component of your plugin) does not care what is in the CSS component since all it does it take that CSS component and inserts it into the preview iframe so it can affect what is in that iframe. Basically, the JS code just grabs the CSS and adds it to the Iframe... like the comment in the code says. Alright. It's working. Thank you very much for patiently answering this total noob's questions.
|
|