I am facing problems trying to embed a hyperlink in an image. The code from the documentation (https://github.com/dolanmiu/docx/blob/master/demo/35-hyperlinks.ts) beginning at line 84 is not working for me:
new Paragraph({
children: [
new ExternalHyperlink({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
link: "http://www.google.com",
}),
],
})
When I copy this very snippet into my code, the image is rendered as expected but there is no link being integrated. It seems like the ExternalHyperLink element is not working specifically with images, as it works flawlessly when trying to add the link to a TextRun element. I tested also if it was a problem related to the code being positioned within the header section but the behaviour is the same when shifting the code to the body of the document.
I am using the latest version of docx. Can anyone give me an advice what is going wrong here?
Related
I have been using mentions in CKEditor 5 to tag certain system variables. A typical tag looks like as:
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
#ApprovedCosts
</span>
When I try to render the following (the idea is to show the variable value when the user clicks preview, while he continues editing):
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
<p>Nice rendered <b>html</b></p>
</span>
CKEditor goes bonkers.
My requirement is to show a nicely formatted variable name inside the tag. I know I can control via CSS, but there could be a situation where I might end-up rendering a small table (if variable points to a data set), etc.
Help will be appreciated.
Cheers.
Generally speaking, CKEditor 5 documentations refrain from going with your basic plain HTML approach, as seen in the comments:
This plugin customizes the way mentions are handled in the editor model and data.
Instead of a classic <span class="mention"></span>,
Within their mentions documentation (by the way, highly suggested to take a look at - it's very well documented with lots of useful examples in case you're stuck!), they're defining a ClassicEditor (to be precise, they want to mimic a chat platform in which you can tag a user and will receive a list of users in return).
ClassicEditor
.create( document.querySelector( '.chat__editor' ), {
extraPlugins: [ Essentials, Paragraph, Mention, MentionLinks, Bold, Italic, Underline, Strikethrough, Link ],
toolbar: {
items: [
'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
]
},
mention: {
feeds: [
{
marker: '#',
feed: [
{ id: '#cflores', avatar: 'm_1', name: 'Charles Flores' },
[...]
],
itemRenderer: customItemRenderer
[...]
After the mention object is created, they're calling the customItemRenderer function. This infrastructure could nearly identical be copied. For your part the function MentionLinks is important, as you can customize how mentions are handled, i.e. let's take a look at their example:
function MentionLinks( editor ) {
editor.conversion.for( 'upcast' ).elementToAttribute( {
view: {
name: 'a',
key: 'data-mention',
classes: 'mention',
attributes: {
href: true
}
},
model: {
key: 'mention',
value: viewItem => editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem )
},
converterPriority: 'high'
} );
Basically, you can customize all the properties within the MentionLinks function. CKEditor 5 did a good job documenting the mention plugin very hierarchically:
The documentation can be found here.
On a slight off-topic note I noticed your code passage <p>Nice rendered <b>html</b><p> contains little formality issues, i.e. you need to close the <p> tag by assigning a close tag </p>:
<p>Nice rendered <b>html</b></p>
Though I'm pretty sure that's not the error as you're talking about HTML in general and not only this code passage.
I think your main issue is your tags. Your paragraph tags (<p>) don't have a closing tag, only two opening tags. It should be <p>***your text here***</p>. If this doesn't fix the issue, please leave a comment.
I'm trying to display an image with a URI location instead of a static image and it's not working. I'm getting the red screen with the message:
You are trying to render the global Image variable as a React element.
You probably forgot to require Image.
I simply took the default project (react-native init awesomeProject) and added this inside the View after the two Text elements:
<Image
style = {styles.base}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
and I enhanced the styles with an additional property:
base: {
height: 400,
width: 400
},
I can't figure out why this wouldn't work as this is the simple example in the React Native docs. Any advice?
Make sure to actually require the Image component:
var React = require("react-native");
var Image = React.Image;
I think upgrading from Firefox 37.0.1 to 37.0.2 in Win7 64 has revealed a bug either in my code or the OL3 code. Two of my layers are no longer displayed in the correct position. The two layers that are incorrect are both using a URL that indicates ArcGIS REST services and ends with mapserver. No other layers are using sources similar to these 2 that are the problems:
http://gis.ncdc.noaa.gov/arcgis/rest/services/nidis/usdroughtoutlook/MapServer
http://apps.fs.fed.us/arcx/rest/services/EDW/EDW_Watersheds_01/MapServer
Details:
I am displaying multiple layers from multiple sources in a OpenLayers3 map. Everything was displaying properly using Firefox 37.0.1 running in Windows 7, 64 bit. Without any change to the javascript code, two of the layers no longer display properly. They are offset to the south and east relative to where they used to display correctly. For example, the southern tip of Florida in those two layers now is on top of Cuba. The only difference that I know was made is that Firefox was updated to 37.0.2.
Testing results
I tested with prior versions of my code that I am certain were correct in 37.0.1, but those now display incorrectly on 37.0.2.
I tested on another Windows 7, 64 machine with 37.0.1 and the current code displays the correct results.
I tested on both Windows 7 machines using Chrome and layers displayed correctly.
I tested using Internet Explorer 11.0.9600.17691 with product update version 11.0.17 and the layers do not display correctly.
I conclude that the Firefox update is responsible for the display errors. However, I cannot tell if this is a problem with Firefox or the OL3 code.
Code excerpts:
I have included the code that creates the layers that are not working. I have skipped most of the code since it works for the other layers and for Chrome. I have added some additional parameters (layerCaption, layerCode, showMenu) to facilitate other processing. Each layer is pushed onto an array (myLayers) that is used to define the map.
The OL library is referenced as:
http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript
javascript
var huc = new ol.layer.Tile({
title: 'Watersheds',
layerCaption: 'Watersheds',
layerCode: 'huc',
showMenu: true,
source: new ol.source.TileArcGISRest({
url: 'http://apps.fs.fed.us/arcx/rest/services/EDW/EDW_Watersheds_01/MapServer',
params: {
'layers': 0, // 0 is HUC-2... 5 is HUC-12
'bbox': '-126.0 24.5 -65.0 51.0',
'transparent': 'false',
'f': 'image'
},
attributions: [new ol.Attribution({
html: 'Hydrologic Unit Boundaries, US Forest Service Enterprise Map Services Program'
})]
}),
visible: false,
opacity: 0.70
});
The second layer is:
var ncdcDrought = new ol.layer.Tile({
title: 'NOAA National Climatic Data Cecnter Drought Forecast',
layerCaption: 'Drought Forecast',
layerCode: 'ncdcDrought',
showMenu: true,
source: new ol.source.TileArcGISRest({
url: 'http://gis.ncdc.noaa.gov/arcgis/rest/services/nidis/usdroughtoutlook/MapServer',
params: {
'LAYERS': '0',
'bbox': '-126.0 24.5 -65.0 51.0',
'bboxSR': '4326',
'imageSR': '4019',
'transparent': 'false',
'f': 'image'
}
}),
visible: false,
opacity: 0.70
});
myLayers.push(ncdcDrought);
Code for map creation:
var view = new ol.View({
//center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
projection: 'EPSG:4326',
center: [-90, 40],
zoom: 4
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: 'us'
})
]),
target: 'map',
layers: myLayers,
view: view
});
I have tried to provide the relevant details. I can supply more information if this is not sufficient.
Thank you.
Jeff
I'm trying to rig up a Knockout binding for Fancybox (although I don't think that's too much involved here). I'm calling Fancybox based on the code from the sample here: http://jsfiddle.net/STgGM/
$.fancybox.open([{
href: value.image(),
title: value.title()
}], {
padding: 0
});
The object passed in looks like:
{href: "http://example.com/imageurl", title: "Image Title"}
Stepping through the fancybox code, it bails out of trying to show the image around line 855 of the script:
if (!type) {
F.coming = null;
//If we can not determine content type then drop silently or display next/prev item if looping through gallery
if (F.current && F.router && F.router !== 'jumpto') {
F.current.index = index;
return F[ F.router ]( F.direction );
}
return false;
}
I'm not entirely sure what it's looking for at this point. F.current is null and F.router doesn't exist on the object.
So, in short, I'm trying to trigger Fancybox from a link click, without modifying my markup that much, or calling .fancybox() on a particular element. This appears to be possible, but it doesn't appear to be working for me.
After digging through the code more, I eventually found the solution. Fancybox was trying to figure out what sort of content I was telling it to display by inspecting the URL I was giving it. As my URL had no extension, since it was coming from an external service that uses and ID to access an image, and not a full file name, Fancybox had no clue what I was telling it to display, and gave up.
The solution, since I know what the content is, is this:
$.fancybox.open({
href: value.image(),
title: value.title(),
type: 'image'
},//other stuff (not relevant to this)
This makes FancyBox work as expected.
I want to show notification on my website using Pines Notify jQuery plugin
but i dont know how to use it. Could someone please provide some example code?
This is the only link I have found for documentation:
http://sourceforge.net/apps/mediawiki/pines/index.php?title=Pines_Notify
This is pretty simple to find out.
Go to the pines notify website: http://pines.sourceforge.net/pnotify/
Click around on the buttons until you find the kind of effect you want to do yourself.
In either Chrome or Firefox w/Firebug, just right click on the button for the effect you want. You'll see an input tag, and you want the code inside the onclick="":
onclick="$.pnotify({
pnotify_title: 'Regular Notice',
pnotify_text: 'Check me out! I\'m a notice.'
});"
So if you want to call this at the end of your html doc after you've loaded jquery, you just do something like this:
// call your jquery and pines notify plugin scripts first
$.pnotify({
pnotify_title: 'Whatever the Title Is',
pnotify_text: 'This is the text of the notice!'
});
Obviously there are more options, and you can find them by either inspecting the source of the demo page, or by looking at the pines jquery plugin and finding where they define the options.
It looks like the documentation for Pines Notify is rather lacking. My advice is to look through the HTML source of the demo website. All the JavaScript is on that page (with tons of inline event handlers, yuck).
Make sure to include the appropriate files in your HTML. Then, here is some example javascript code.
function gaserror(){
var distance = Number(document.cars.distance.value);
switch( $('#listofcars :selected').text())
{
case 'Volvo':
if (distance>500)
{
$.pnotify({
title: 'Error',
text: 'You have run out of gas!',
addclass: 'custom',
type: 'error',
opacity: 0.8,
nonblock: true,
nonblock_opacity: 0.2,
sticker: false,
stack: false,
mouse_reset: false,
history:false, //prevents the yellow error history tab from appearing after error triggered
before_open: function(pnotify) {
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
}
});
}
break;}}