I've been stuck on this for hours and would love some help. I'm using tinyMCE with the syntaxhl plugin using syntaxhighlighter 2.1.382.
Everything works great with non-highlighted code. However, when using setContent with highlighted code, I get no joy. I'm hoping there is something obvious here I'm not seeing.
$(window).load(function() {
tinyMCE.activeEditor.setContent('<p>here is some code:</p>
<pre class="brush: jscript;fontsize: 100; first-line: 1; ">var fs = require("fs");
module.exports = function(app, service){
fs.readdir(__dirname + "/controllers", function(err, files){
if (err) throw err;
files.forEach(function(file){
var name = file.replace(".js", "");
require("./controllers/" + name)(app, service);
});
});
};</pre>');
});
However, this doesn't work. I've tried to debug the javascript, but I'm having trouble there to (at least with the chrome dev tools).
There is no error message, just no populated content. I've tried using {format: 'raw'} as suggested in the tinyMCE docs, but no luck there.
I'm hoping somebody else has tried to do this and succeeded.
I do not know the highlight plugin, but i guess it inserts a special stylesheet into the editor iframes head. This leads to the styling (highlighting) of special html tags a.s.o..
In this case the content is not affected/changed.
You won't be able to get your highlighted content as it looks with this plugin.
Unfortunately, I never got the above code to work. I think that the <pre> tag must take over in the browser and mess things up. Also, I'm a bit dubious still of the line breaks causing harm. #Thariama was some help which was great, however, after reading all the documentation on extended_valid_elements, valid_elements, and valid_children, and configuring the tinyMCE init many ways, I couldn't get this to work.
However, I did find a solution for me. It turns out if I set the <textarea> directly with encoded html (so <pre> tag becomes <pre class="brush: bash;fontsize: 100; first-line: 1; ">) then it works properly. Since this is working and it cuts out having to do a setContent after tinyMCE is initialized, this will work for me.
The syntax highlighting is working nicely. I came across this link while searching around if anyone else wants to do the same.
Related
Appending HTML ...
This does what I want it to. (See how John's lines are appended to each other?)
http://jsfiddle.net/j9qwzyzq/
But this doesn't. (nothing is happening)
https://jsfiddle.net/5L1mzrxp/5/
I'm guessing the fault is in this line
$p = $t.prevAll('.performer_line_performed_prefix'),
I cannot for the life of me, figure out how to select the variable properly.
Please help.
Relevant Link
the iTop fourms are pretty inactive and I am pretty stuck so I thought I'd ask here if that is ok. I am attempting to add my own piece of javascript to work onchange of the iTop organization select bar.
Here is a link to iTop if needed: http://www.combodo.com/spip.php?page=rubrique&id_rubrique=8
Extra info on my iTop forum question, no answers yet: https://sourceforge.net/p/itop/discussion/922360/thread/dd1da92f/
So iTop is a piece of software made using php, html, js and css but I am new to php so I have ran into a little bit of a problem. I am trying to implement a piece of javascript which will change the top-bar of the css to a different colour based on organization, I made a small prototype independent of iTop and it works perfectly. However I am unable to add the onchange() method along with the javascript as the main user interface is generated dynamically using php. I have tried numerous ways to implement the javascript but none have worked. Here are some pictures of iTop and code to help:
This is a picture showing the inspect element of iTop and how I came to believe jquery-1.7.1.min.js may be the correct location to place the code.
So I have tried going into this file and copy and pasting in my Java Script code but in some locations it has no affect and within function(a){....} it results in iTop only displaying a blank page, I could be going about this totally wrong but from what I have seen this file seems to be the one I am to edit to get what I want.
here is the javascript i am trying to implement:
var changeStyle = function(){
//HTML
var selectedValue = document.getElementById("org_id").value;
//CSS
var trimColor = document.querySelector("#top-bar");
//BT
if(selectedValue=="3"){
//change banner colour
trimColor.style.backgroundColor= "#3498db";
}
//Bell Aliant
else if(selectedValue=="27"){
//change banner colour
trimColor.style.backgroundColor= "#f1c40f";
}
//Bell Canada
else if(selectedValue=="26"){
trimColor.style.backgroundColor= "#e74c3c";
}
else
trimColor.style.backgroundColor="#ecf0f1";
}
Here are some pictures of it working in my non iTop version of just HTML, JS and CSS:
This is an old question but I'll answer it anyway as the answer is still ok for the last versions of iTop.
To inject some JS in the page, you have to use the iPageUIExtension::GetNorthPaneHtml(iTopWebPage $oPage) API which gives you acces to the iTopWebPage object. Then you can use the various public methods such as "iTopWebPage::add_ready_script($sScript)" to inject $sScript into all of the backoffice pages. Moreover, the script will be executed once the DOM is ready.
You can find an example here.
class PageUIExtension implements iPageUIExtension
{
/**
* #inheritdoc
*/
public function GetNorthPaneHtml(iTopWebPage $oPage)
{
...
$oPage->add_linked_script(utils::GetAbsoluteUrlModulesRoot() . 'molkobain-handy-framework/common/js/handy-framework.js');
}
}
Note: You will need to make your own iTop extension, check here for how to do it.
Although I do not believe it is the best solution I have entered the following code into jquery-1.1.1.min.js as shown
And I have achieved the desired result, the trim now changes with the organization change, this however is not the perfect solution I was looking for and is a bit slow but not in the sense that you'd get annoyed, at least in my opinion. Mission Accomplished for the moment!
I have a link with an inline attribute of style="color: #FF0000;". I recently upgraded to latest CKEditor, after years of neglect. Now when I call CKEDITOR.inline, it strips all the links.
I found http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable, which doesn't have an a in there.
I did CKEDITOR.dtd.$editable.a = 1; and it still strips links. What am I missing here? I literally followed the flow from the API inline call to that, but it seems that I'm doing something wrong.
EDIT
I also find that is removing the class attribute from elements. Everything else seems okay.
Check out the guide about content filtering (ACF) in CKEditor. See also the working sample in CKEditor SDK which shows how ACF works in the default automatic mode and how to adjust it (which is what you need to do in your case).
try this:
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['a'] = false;
CKEDITOR.config.extraAllowedContent = 'a[!href];' + '#';
CKEDITOR.config.protectedSource.push(/<a[^>]*><\/a>/g);
CKEDITOR.config.protectedSource.push(/<span*?[\s\S]*?\/span>/g);
I have some Javascript that finds all of the hyperlinks in a page that contain 'google' for example and changes the beginning of the url to another url.
I am trying to add a class to this affected link, however I am getting a lot of 'undefined' errors in the JS console. I have tried alert($(this).innerHTML)) which showed the contents of the hyperlink - clases and whatnot. But for some reason I cannot append a class. I have also tried using this.className += " socks". That also causes an undefined error. I think I am missing something simple!
Also is there a way of using a regex in the search, I am newish to Javascript.
Here is my code:
$("a[href*='google']").each(function(){
this.href = this.href.replace('http://www.google.co.uk','http://www.ask.com');
this.href = this.href.replace('http://www.google.com','http://www.ask.com');
$(this).addClass("socks");
});
Thanks very much for any help!
There is no error with this code that i can see:
http://jsfiddle.net/p7Sgj/
See this.
try
$("a[href*='google']").each(function(){
var href = $(this).attr('href');
href.replace('http://www.google.co.uk','http://www.ask.com');
href.replace('http://www.google.com','http://www.ask.com');
$(this).attr('href', href);
$(this).addClass("socks");
});
instead of using this.href. I guess your code doesn't reach the addClass part...
Also, use firebug (in case of firefox) or chrome developer tools (in case of chrome) for debugging. You can simply set a breakpoint, add watches, etc...
(In that case, make sure you use a so-called non-minified version of jQuery for easier debugging)
If your HTML code is
Hello
World
And your CSS is
.socks {
color:#f00;
}
Then your code should be working fine.
http://jsfiddle.net/k93TZ/2/
Working here.
It might be your html or css code.
I'm working on a Javascript-based replacement for a Flash applet. The site is having rendering problems only in IE, where it exhibits a behavior that has me at wit's end.
http://janetalasher.com/new/content/portfolio/artcloth/ (This is the page)
What does IE do that's so strange (in this case only)? If you look in Firefox, you'll see a table of images on the right which has the thumbnails. IE6 and IE7 don't show this... unless you are in print preview. It's not a CSS glitch - I've disabled all stylesheets and the error still occurs. I'd provide more relevant source code, but I don't even know where the problem is. The .js files that I suspect (if it's any help) are:
/common/gallery/display.js
/common/gallery/loader.js
Okay - update: It is definitely rendering properly in print preview mode only. Can someone please explain to me in what world this happens? The div is present in the normal mode, but the table won't render. Using the IE developer toolbar confirms it and all the cells are present.
Try adding semi-colons here:
function loadGallery(xml)
{
thumbpath = $(xml).find("thumbpath").attr('dir') // add here
imagepath = $(xml).find("imagepath").attr('dir') // here
detailpath = $(xml).find("detailpath").attr('dir') // and here
cSheet = contactSheet(xml);
$('.contactSheet')[0].appendChild(cSheet);
display($(cSheet).find('img')[0]);
}
Also, on this line:
jQuery.get('/new/content/portfolio/artcloth/gallery.xml' , 'xml' , function(data) { loadGallery(data); } ) // missing one here too
Actually, your Javascript files are missing semi-colons on the end too. Make sure you go through each file and add one to the end of each line.
Javascript does not actually require them, but for the sake of sanity and knowing exactly what your code is going it is a good idea to put them in. For example:
return
1
Can become:
return;
1;
Which returns nothing at all, not exactly the desired effect.
According to Microsoft Script Editor, there's an error inside jQuery caused by this line:
$('#lower').css('padding-left' , paddingLeft - (lowerRightProtrusion < 0 ? 0 : lowerRightProtrusion) + "px");
Since lowerRightProtrusion is NaN, and NaN < 0 calculates to false, you're actually setting padding-left to "NaNpx". Does not compute ;)
See my previous answer for info about MS Script Editor:
Using the IE8 'Developer Tools' to debug earlier IE versions
It would seem that IE is not picking up the styles. If I open the page in chrome, the "float:left" style appears on the description div. however, in IE this is not the case.
You currently have your includes in a div in the body of the document. If it is possible try moving these into the head. I'm talking about the link and script tags directly descendant of div id="pageHead".
(I am using IE6 and the developer toolbar to get this information)
In /common/css/generic.css:
div#information
{
margin-left:188px;
m\argin-left:94px; <------ not sure if that would cause this, but thought i would point it out
}