I am using Tinymce as an email editor. When inserting an embedded image as attachment, the images are inserted as:
<img src="cid:mycid#sth" />
This works for the email sending part - but of course not for the editor. The image is not displayed...
Question: Is there a "content" and "display" layer in Tinymce where I can hook into?
My goal is to save the content as
<img src="cid:mycid#sth" />
and transform it in the editor window as
<img src="/mypreview/image/2000" />
I am using Tinymce 4.
The editor relies on the browser for the rendering of HTML so anything like your <img src="cid:mycid#sth" /> won't render in the editor - its simply not valid HTML.
What you can do is rely on data-xxx attributes in HTML to store the data you really want and transform the HTML when you go to load it into TinyMCE.
For example...
When someone inserts the image you could create the following HTML
<img data-src="cid:mycid#sth" src="/mypreview/image/2000" />
...this would allow the editor to actually render an image while you still keep the data you need. When you save the content you can strip out the existing src data and copy the data-src content back into the src if that is what your app needs for its server side processing.
If someone edits the content you can just reverse the process and change the src back to HTML that TinyMCE can render.
When github.com renders an image in a readme.md, it automatically links the image in an a tag.
Using either
![][http://example.com/path/image]
or
<img src="http://example.com/path/image" />
The actual rendered content will appear as
<img src="https://camo.githubusercontent.com/8a545f12e16ff12f..." alt="" data-canonical-src="http://example.com/path/image" style="max-width:100%;">
I understand the github image caching (on camo.githubusercontent.com), and that's fine, but I don't want the a tag to wrap my image.
I'm not sure if this is part of the github flavored automatic URL linking, or something specific images.
I am able to provide my own link (using my own a tag), but what I really want is no link, no a tag.
Is this possible?
thanks!
You can wrap the image in a link that points to #:
[](#)
<img src="http://example.com/path/image" />
It will still be clickable, but won't open a new page, at least.
You can use the <picture> tag to prevent GitHub from auto linking to the image.
<picture>
<img alt="Image Alt Text" src="http://example.com/path/image">
</picture>
Pass linkImagesToOriginal: false to gatsby-remark-images should be able to resolve this issue.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
If you click on your badge, you think to see an image, but it is usually a html page with html-tags. That's why badges links to a different page by default.
#Tamás Sengel answer isn't bad, but looks like there were side effects like visual glitches #Igor mentioned.
I solved this problem by simply referring to my github page:
[](https://github.com/Ismoh/NoitaMP)
It's a static badge build with shields.io and shouldn't link to source.
The snippet below is exactly what you need to "remove" the a tag for images. Markdown will render all the img's tags around the a. For me (using Gatsby) the option "linkImagesToOriginal: false" removed perfectly and now all the images are NOT clickable.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
This method works the best for me: linking the image to itself
<a id="image1" href="#image1"><img alt="alt text" src="http://example.com/path/image.png" /></a>
I'd like to ask you which img tag is right:
<img src="http://i.imgur.com/r5wwImhb.jpg">
or
<img src="http://i.imgur.com/r5wwImhb.jpg"/>
Thank you.
It depends on if you are using HTML or XHTML. The first one is correct in HTML and the second one in XHTML.
According to the first search result for <img> tag on w3schools:
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
I'm using Struts2. By default, when using the struts form, the label and the choices are displayed in the same line. How can I do to make the label in a line, and every radio choice in its own line? Is there a way by CSS? I need your help guys. Here it is how my form looks like. Thank you!
<s:form action="resultAction" namespace="/">
<s:radio label="Gender" name="yourGender" list="genders" value="defaultGenderValue" />
<s:submit value="submit" name="submit" />
</s:form>
Which theme are you using as by default struts2 use xHtml theme and which generate certain set of Tables to render the view.
Struts2 use free-marker template to render the HTML for tags and you can customize theme as per your choice or can create you rown theme.
Try with simple theme which will not generate any table or div and will render plain HTML for you are you have all way to apply your custom CSS to change/customize the view.
You can set the theme per page basis on for the whole application for per page basis add the following line in the head section
<s:set name="theme" value="'simple'" scope="page" />
for whole application you can either set in struts.properties file or in struts.xml file though the second one is more preferable.
<constant name="struts.ui.theme" value="simple" />
If you want to play with theme here is the link for same
struts-2-themes
I have a custom tag like this:
<content name="Home" />
When I click the Html button of the TinyMCE it was replaced with
<content name="Home"></content>
Currently my settings are: valid_elements: "content[name]"
What should I put in the valid_elements variable so that the tag will will be:
<content name="Home" />?
I am not perfectly sure, but i think this issue is not to be solved easily.
I do not think that you can configure this behavior because it is browser related and not tinies fault. Looks like the browser treats your custom html element like an html element with an opening and a closing part on default, even though you want to have a single part html element like a br-tag. The only way - i see - is to get the browser to accept your custom thlm elment as one part html element, which i do not know how to do.