I can get mode/javascript working with:
JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js
Theme
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js
Mode
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js
Worker
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js
HTML
<script src="/static/js/ace/ace.js"></script>
<div class="my_ace_editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
CSS
#my_ace_editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
jQuery
$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
});
But am not having any luck when attempting to display HTML with:
HTML
<div id="my_ace_editor"><p>test</p></div>
jQuery
$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/html");
});
and have added:
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/mode-html.js
If I type in the HTML editor, the tags and content have syntax highlighting applied.
But it is not showing the actual HTML when it loads - all it shows is test.
There are no Firebug errors and I can see the actual HTML that should be highlighted in Firebug.
Is another file or setting required?
Edit: I can get the HTML content within Ace editor showing correctly if I use:
editor.setValue("<html>test</html>",-1);
But I need to be able to set the value from the HTML itself and not in the jQuery.
The content is being loaded from a database (ie it is 'dynamic content'), i'm not sure if that makes a difference?
You need to escape html, that is instead of
<div id="my_ace_editor"><p>html&test</p></div>
it should be
<div id="my_ace_editor"><p>html&test</p></div>
This is true for all modes not just html
If you do not want to escape the HTML code just use the script tag with the following type and style set
<script type="text/plain" style="display: block;" id="ace-1">
hello world
test test
</script>
Related
please help me with this.
I am using ck editor 4.
The data is required in a particular font style, font size, and font color.
The user will get the data from an external source and the user has to paste the data in the CKeditor.
so whenever the user will paste the data, he will have to apply style, size, and color. I want to automate this so that whenever some data is pasted in the CKeditor these styles are auto-applied.
is there any way to automate this? If yes, how?
I looked into the API docs and searched on google but couldn't find the answers.
Look at CKEditor's Clipboard Integration.
You can customize the pasting of data on the paste event.
Here's a simple example of pasting text with bold and italic properties:
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor: Customized Pasting</title>
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor" rows="10" cols="80">
</textarea>
<script>
CKEDITOR.replace('editor', {
}).on('paste', function (evt) {
evt.data.dataValue = '<span><b><i>' + evt.data.dataValue + '</i></b></span>';
});
</script>
</body>
</html>
Demo:
You can work on it further according to your own use case and customize it according to some existing styles or maybe write a custom plugin only to custom-paste your particular data to avoid overriding the default pasting behavior.
you can customize the content when on paste event is occurred, use this code
CKEDITOR.replace('my_editor', {
}).on('paste', function (event) {
event.data.dataValue = '<b><i>' + event.data.dataValue + '</i></b>';
});
I have the following div
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
from which I would like to extract the itemid -> 3600542198158
I was using the following Xpath which does however not return any value:
//div[#data-dmid='product-detail-page']/#itemid
Could please someone advise how to built the Xpath correctly for it
#
Unfortunately I have to renew my question.
I was looking for the code with Firefox inspection tool.
Looking at the html source code which is different to the output with the inspection tool I have the following part which will be interesting:
<div class="onCanvas content-with-footer">
<div id="container-main" class="content-main">
<div data-dmid="uvp-banner-container" style="height: 54px; width: 100%"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var props = {};
ReactInit.initReactComponent("contentViewService", "UvpBannerContainer", props, document.querySelector("[data-dmid='uvp-banner-container']"));
});
</script>
<div id="react-product-detail-page"></div>
<script>
var props = {
gtin: 3600542198158,
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "ProductDetailPage", props, document.getElementById("react-product-detail-page"));
$(document).ready(function () {
var props = {
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "PriceLegend", props, document.getElementById("react-price-legend"));
});
</script>
I would need to get the gtin (plain number) of the second script.
I would like to use the xpath in a scraping tool why only plain xpath code will work for me.
Thank you again and please excuse my previous not fully correct question.
I am assuming that you don't mind JavaScript and jQuery since you didn't specify:
var itemId = $("div[data-dmid]").attr("itemid");
console.log(itemId);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
I got the answer with help of another post on Stackoverflow.
Reading a javascript variable's value
The correct code for my updated question is
substring-before(substring-after(//div[#class='onCanvas content-with-footer']//script[2][contains(.,'gtin')]/text(), "gtin: "), ",")
Thank you for any help.
apologies but I am an absolute noob on this. I have implemented a CKeditor on my website using the below HTML:
<!doctype html>
<html>
<head>
<!--Define the character set for the HTML element -->
<meta charset="utf-8">
<!--Call the external script to use the CDN CKEditor in your page-->
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script type="text/javascript">
//Define an init function that sends the rich text editor contents to the page code
function init() {
//onMessage runs when the HTML element receives a message from the page code
window.onmessage = (event) => {
if (event.data == "x") {
CKEDITOR.instances.CK1.setData( '<p></p>' );
console.log(event.data,"ok");
} else {
//postMessage sends the contents of the CKEDITOR back to the page code
window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*");
console.log(event.data,"okd");
}
}
}
</script>
</head>
<body onload="init();">
<!--Define the HTML element as a textarea-->
<textarea name="editor1" id="CK1"></textarea>
<script>
//Use the CKEditor replace() function to turn our textarea into a CKEditor rich text editor
CKEDITOR.replace("editor1");
</script>
</body>
</html>
It works great but I have a line spacing issue where it looks like there is a line in between the paragraphs, but when it displays later on it is on top of each other. Is there anyway to reduce the spacing so the user realises they need to press enter again?
Image attached, first test is 1 press of enter after text (which looks like it has a line between but doesn't), second is 2 enters.
My issue is also that I am using Wix, so I can't host the config or whatever files to change. So it all needs to be from the html link.....
Thanks!
enter image description here
These lines of code will remove extra space
:host ::ng-deep .ck-editor__editable_inline p {
margin: 0;
}
Do you need to force the user to press Enter twice for a new paragraph? If so, try this:
CKEDITOR.addCss('.cke_editable p { margin: 0 !important; }');
CKEDITOR.replace('editor1');
I've read the documentation on tabs examples of the firefox add-on SDK. I may be wrong, but doesn't the tabs API apply to new tabs?
There doesn't seem like there is a simple way to click a button on a panel and simply change the url of the current (main) window.
I assume I need a content script to accomplish this?
// panel.html
<!DOCTYPE>
<html>
<head>
<script>
function goToHome() {
window.location.replace(http://domain.com/home)
}
</script>
</head>
<body>
<form id="frm1" action="" method="post">
<div><input type="button" onClick="goToHome()" name="Submit" value="home"></div>
</form>
</body>
</html>
The tabs API applies to all open tabs. You can refer to individual tabs by index–var tab = tabs[x]–or the current tab with var tab = tabs.activeTab. Then you can set the url with tab.url = someUrl. Put this code inside the onclick property of a widget and you're good to go. All code goes in main.js, no content scripts needed.
If by "on a panel" you mean inside a panel, then yes, you'll need a content script for the panel, but not a page script as your code shows. See scripting panel content. Example:
main.js
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var panel = require("sdk/panel").Panel({
contentURL: data.url("panel.html"),
contentScript: "function goToHome() {self.port.emit('goToHome', homeUrl);}"
//OR
contentScriptFile: data.url("panel.js")
});
panel.port.on("goToHome", function(homeUrl) {
tabs.activeTab.url = homeUrl;
}
If you use contentScriptFile, then include panel.js in your data folder. This will get injected into panel.html.
panel.js
var homeUrl = "http://www.google.com/";
function goToHome() {
self.port.emit('goToHome', homeUrl);
}
I am using colorbox to AJAX some external HTML onto a page.
My client wants to print this content direct from the page, therefore i used a print CSS loaded into the head of the document with colorbox's onComplete event hook.
The content that is loaded is a raft of legacy tables with inline styles which i can't seem to overwrite with the print CSS and when i view by media type the layout looks broken.
I put this down to only retrieving a chunk of the HTML with jQuery .find() rather than the whole page.
Would it be best to use an iframe with colorbox and load the whole HTML document including header. I assume this would preserve the layout better rather than retrieving a chunk.
I am not sure how to print the iframe's content. When i tried it printed an extremely small snapshot of the whole page with the iframe in the middle.
Am a bit lost on this one.
The jQuery i am using is as follows:
$('table.pricing > tbody > tr > th > p.price_report > a').colorbox({
title: "Price report",
transition: "elastic",
innerWidth: "733px",
innerHeight: "699px",
opacity: "0.5",
onComplete:function(){
// Ajax call to content
// insert Print CSS into head of document
}
});
The print CSS that is loaded merely hides the body content and then displays everything under #colorbox.
Apologies all the proper code is at work.
1) I would suggest switching to the "inline" colorbox option (but you don't have to):
<script type="text/javascript">
$(document).ready(function(){
$(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true, href:"#price_report"});
});
</script>
2) Now add your html including the javascript and code to write your printable area:
<div style='display: none'>
<div id='price_report' class='pricing'>
<script type="text/javascript">
//<!--
function ClickHereToPrint(){
try{
var oIframe = document.getElementById('ifrmPrint');
var oContent = document.getElementById('pricingPrintArea').innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write("<html><head><title>My Printable Pricing Report!</title>");
oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />");
oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>");
oDoc.write("<h3>My Pricing Report</h3>");
oDoc.write(oContent + "</body></html>");
oDoc.close();
}
catch(e){
self.print();
}
}
//-->
</script>
<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe>
<div id="pricingPrintArea">
<div class="myreport">
<p>Hello, I am a pricing report!</p>
</div>
</div>
</div>
</div>
3) Now add the print button wherever you wish:
<div id="print_btn">
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;">
<span class="print_btn">
Click Here To Print This Report!
</span>
</a>
</div>
Note, the blank iframe included is where the javascript will write your printable area. You will also notice in the javascript that you can add a stylesheet, inline styles, a page title and more!
Keep in mind, this process will work similar for the ajax version of the colorbox, but if you go the route of the ajax method, you will have to write the printable div and print iframe and print javascript directly to that external file.
Theoretically, anything inside the printable region div (in this example: pricingPrintArea) will print, so as-long-as you wrap that around whatever you want to print, it will do so.
Important tip: Printers all read a Web page differently so try not to rely too much on inline styles and pixel dimensions for your printable version. That is why it is a good idea to create a stylesheet specifically for the printable page.
Hopefully that answers your question. (btw, you should be able to get this method to work with the ajax method of colorbox, but I haven't tested it).