I am using TinyMCE editor and I found that text inside a Heading <H1> tag which includes an anchor tag (<A>) is removed - the anchor link and its contents are getting removed.
What can I do so that the anchor link does not get removed?
You can use the following source code to test result. When we paste below lines in source code.
<div style="text-align: center;">
<h1>
<a href="http://example.com" target="_blank">
<font color="blue">This is a New Link.</font>
</a>
</h1>
</div>
and when we switch to Editor View then the below output we got:
<div style="text-align: center;">
<h1>This is a New Link</h1>
</div>
output as below:
Here is a screenshot of what I get in TinyMCE
regard
vik
Related
I want to center align an image in a README.adoc file in GitHub.
I know that for Markdown files, adding HTML like the following works:
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
However, I want to write the file in AsciiDoc, not Markdown.
What I have tried but has not worked
Suppose there is a map.png image in the same dir as the README.
image::map.png[A map, 350, align=center]
This displays the correct image, but aligned to the left.
GitHub is using Asciidoctor but strips away CSS classes and inline CSS styles. As a workaround you can use a passthrough (which is not ideal):
++++
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
++++
You can also comment/vote for this issue: https://github.com/github/markup/issues/984
I recommend using a conditional block to use this passthrough only when the README is rendered on GitHub:
ifdef::env-github[]
++++
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
++++
endif::[]
ifndef::env-github[]
image::map.png[A map, 350, align=center]
endif::[]
I'm using template plugin for inserting html snippets. For example:
<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>
Everything goes fine until editor tries to change button's text and exit its html to add some more text after. The caret doesn't leave the A tag and stops within spans or before closing A tag. So in the end we get something like this:
...Button Text</span> some more </span> text here </a>
It breaks the layout completely.
Is there a way to mark the link as single solid block or spans as non-enterable with some attributes to prevent inserting text within unexpected places?
You use the contenteditable="false" attribute to make a portion of your HTML non-editable. Here is an example:
http://fiddle.tinymce.com/Zxgaab
I changed your link HTML to this:
<a contenteditable="false" class="button" href="#">
<span class="button-inner">
<span class="button-label">
Button Text
</span>
</span>
</a>
It will act like a single character in the editor...
I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.
I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.
I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.