I have integrated CKEditor into my website CMS. The Preview button works but I cannot get it to use stylesheets (CSS). I have edited the preview.html located in:
Website/ckeditor/plugins/preview/
But it doesn't seem to listen to any of the html I wrap around the code that pulls the content from the WYSIWYG editor.
As I understand this bit of code:
<script>
var doc = document;
doc.open();
doc.write( window.opener._cke_htmlToLoad );
doc.close();
delete window.opener._cke_htmlToLoad;
</script>
Pulls in whatever is in the editor, so I should be able to wrap around that html to include elements that will be available for every page? And links to stylesheets?
Anyone ever done this? Is it possible?
The "window.opener._cke_htmlToLoad" seems to be a string (containing a complete html document).
To get the innerHtml of the <body></body>, you can use this regex:
var doc = window.opener._cke_htmlToLoad; // is string
var innerBody = ( doc.replace(/((?:.(?!<\s*body[^>]*>))+.<\s*body[^>]*>)|(<\s*\/\s*body\s*\>.+)/g,'') );
document.getElementById('insertIntoMe').innerHTML = innerBody;
From my testing this seems only to work in Firefox. But Chrome and Internet Explorer directly display the window document without allowing any changes. So maybe somebody else can provide a better solution?
Related
I am trying to use Trademark & Registered/Copyright symbols smaller in a WordPress site, but doing some of the standard methods for CSS were not working, and using what I have below maybe somebody has an idea on how I could expand.
Traditional/Normal way I would have done this:
Awesomesauce <sup>®</sup> would look like Awesomesauce® (the R is smaller than other text).
In the theme I am using, it was not doing that with that tag
I then tried <span style="font-size:6px;"> just see if it would do anything different. No luck.
So, I then approached it from a JavaScript side of things.
I started with my H1 tag
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
Since that works, how would I make the same work for body text because I cannot get it to work using the following code
jQuery(function($){
var $el = $(".wpb_text_column .wpb_wrapper p");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
jQuery(function($){
var $el = $(".section_header .post_title");
var t = $el.text();
t = t.replace('®','<sup>®</sup>');
$el.html(t);
});
What the HTML section looks like:
It's very normal that WP themes overwrite default browser style.
Try adding this to your custom.css file:
sup {
vertical-align: super;
font-size: smaller;
}
If you don't use custom style or child theme (Why use a Child Theme)
Then, add that code at the very bottom of your theme style css file.
I don't think that your issue is WordPress not recognizing the "sup" element. I support a few WordPress sites and "sup" works just fine whenever I use it. In your case, it appears that you are trying to use javascript (jQuery in particular within your WordPress site. WordPress does not process javascript reliably when found within a page. The documentation that I have read states that it is unsupported to use your own javascript on WordPress pages. However, I have succeeded in using Javascript in some pages within my WordPress site but with rather inconsistent results overall. I recommend that you format your text directly within the WordPress WYSIWYG editor as follows:
AWESOMESAUCE<sup>®</sup>
I've turned a simple text box into one with editing features using the wysihtml5 editor. The project necessitates that the text box inject its html into an iframe. Previous to installing the editor, things were working great. Now, the jQuery for the iframe injection no longer works, since the editor has converted the textarea to an iframe. Any ideas on how I might convert the following jQuery to work with the editor?
(function() {
var frame = $('iframe#preview'),
contents = frame.contents(),
body = contents.find('body'),
styleTag = contents
.find('head')
.append('<style>*{font-family:arial}h2{color:#CC6600}</style>')
.children('style');
$('textarea').focus(function() {
var $this = $(this);
$this.keyup(function() {
body.html( $this.val() );
});
});
})();
I know that something needs to change in the $('textarea').focus call, I just don't know what. I'm new to the javascript/jQuery world and have tried a few possibilities, but so far haven't been able to figure this one out.
Many thanks for any insight.
As i know (probably i know what im talking), you cannot apply css styling to iframes outside of iframe (from parent document). You should TRY to embed styling inside iframe. Its because browser styling works with document, but iframe its another document and must ship with own css styling. Hope this helps
I want to use the editor feature of XUL to save changes in a document and read from it on load (I am developing an extension)
//NotePad.xul
<editor id="edit" type="content" editortype="html" src="about:blank" flex="1"/>
//NotePad.js
function initEditor(){
var editor = document.getElementById("myEditor");
editor.contentDocument.designMode = 'on';
}
I tried Changing the src attribute to an html doc i have locally but it didnt work.
So what i actually wanna do is :
Get the text written in the editor (something like .getAttribute('value'), but i didnt find a way to do so)
Write to it from javascript (something like setAttribute('value'))
Thanks in advance, i am really stuck in here.
After Complicating things myself using a lot of code i finally found it, and it is really dumb to be honest, well here is how it gets done :
to set text :
var editor = content.document.getElementById("myEditor");
editor.contentDocument.documentElement.innerHTML += "Whatever your text is";
and get text it is obvious :
editor.contentDocument.documentElement.innerHTML
to think that i spent a loooot of time in this is ...
well the innerHTML varies, it depends on what you gave to editortype either html or text, so in case the editortype is set to text in that case we should use innerText.
can anyone explain what happens when you use javascript to insert a javascript based widget?
here's my js code:
var para = document.getElementsByTagName("p");
var cg = document.createElement("div");
cg.setAttribute("class", "twt");
cg.innerHTML='<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-via="xah_lee">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>';
document.body.insertBefore(cg, para[1]);
it inserts the twitter widget, before the first paragraph. As you can see above, the twitter widget calls for a javascript that shows how many time the page has been tweeted.
doesn't work in Firefox, Chrome, but semi-works in IE8. What should be the expected behavior when this happens? Does the newly inserted js code supposed to execute? If so, how's it differ from if the code is on the page itself?
In order to execute the JS code you insert into a DIV via innerHTML, you need to do something like the following (courtesy of Yuriy Fuksenko at http://www.coderanch.com/t/117983/HTML-JavaScript/Execute-JavaScript-function-present-HTML )
function setAndExecute(divId, innerHTML) {
var div = document.getElementById(divId);
div.innerHTML = innerHTML;
var x = div.getElementsByTagName("script");
for (var i=0;i<x.length;i++) {
eval(x[i].text);
}
}
A slightly more advanced approach is here: http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/ - look for <script> tags, take their content and create a new element into the <head>.
innerHTML does not work to insert script tags (because the linked script, in most browsers, will fail to execute). Really, you should insert the script tag once on the server side and insert only the link at the location of each post (that is, if you are adding this to a blog home page that shows multiple posts, each with their own URLs).
If, for some reason, you decide that you must use one snippet of JavaScript to do it all, at least import the tweet button script in a way that will work, for example, the Google Analytics way or the MediaWiki way (look for the importScriptURI function). (Note that I do not know the specifics of the tweet button, so it might not even work.)
I was thinking of using Fiddler for the following purpose...
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
line will be included in the HTML <head> section.
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
Thanks!
----Update----
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
If someone is interested I could upload the BHO code here.
-Thanks!
Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
This is where your code goes. Here you can change the server response before the browser sees it.
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = 'Unanswered jQuery';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('Unanswered jQuery');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
I think you should now able to hackyourself together a piece of code which fits your problem.
Example
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery
$.getScript('someScript.js',function(){
//Do something here after your script loads
});
Haven't tried it, but how about GreaseMonkey for IE?