there is a label applied CKEditor on my page, HTML code as follows:
<textarea id="MyHtmlEditor" class="ckeditor" cols="80" rows="10" name="MyHtmlEditor"></textarea>
When I upload and then insert a picture, you can see the pictures in normal CKEditor, the viewing source will appear <img alt = "" src = File Name /> tag code.
Because it will put more than one picture, if I want to do in a certain period of time to execute javascript, you can get all the content in the editing area where CKEditor <img alt = "" src = filename /> src attribute values
That is made all the pictures of connecting position.
I found a CKEditor stall, it seems that only the editorial content replace () method can be used.
Some people know how to reach this level?
Related
I'm using JSF2.2, Tomcat 8 and MySQL DB to create a simple CMS. In my back pages I use Primefaces p:editor to create/edit my page content. I would like to insert an image somewhere into the text. It would be great if I could upload the image and insert it at the current cursor position. Ideally, the image should be saved as a blob, but if it's easier for the implementation it could instead be stored as a local file.
I can see that p:editor already has an option to insert a URL of an image, resulting in the <img> tag in the text. But I would really like the possibility to upload an image from my local drive. I haven't been able to Google anything useful so far.
this is how i did it:
.xhtml:
<p:editor id="editor"
widgetVar="editWidget"
value="#AnnouncementBean.text}" />
<p:fileUpload id="upload"
fileUploadListener="#{AnnouncementBean.uploadListener}"
label="Insert image"
mode="advanced"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
update="editor, growl">
</p:fileUpload>
An in my Backing Bean in the uploadListener after file upload:
String value = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("editor_input");
setText(value + "<img src=\"/uploads/" + result.getName()+"\" />");
RequestContext.getCurrentInstance().update("editor_input");
where "editor_input" referes to the actual form field submitted for the editor (PF adds the_input to the id of your editor)
Notice how I update the editor_input not the actual editor. Only problem now is that the image is appended to the end of the text. sou you must move it manually within the editor
You can use a string to receive the editor (or textEditor) value, then use regex to find all img elements.
This is my code.
String regex="<img src="data:image/(gif|jpe?g|png);base64,([^"]*")[^<>]*>";
Matcher m = Pattern.compile(regex).matcher(your_textEditor_value);
while(m.find()){
String imageFileType=m.group(1);
String imageDataString=m.group(2);
byte[] imageData=Base64.decodeBase64(imageDataString);
}
The imageFileType is your file type, and imageData is data of the file. You can use it to do other thing.
when inserting images using the WYSIWYG in a page in the back-end, the image file extension has %20 appended on to it (which i believe is a space), if you click the hide editor button to view the HTML it will look like this
<img src="{{media url="wysiwyg/example.png"}}%20" alt="" />
Clicking insert image from the html source view inserts the image fine, it's when i'm in the actual wysiwyg editor the problem occurs.
After I've selected my image and inserted it i'm taken back to the popup box with the "Image URL" field in the general tab. It's here that a space is getting added on to the end of the file.
http://example.com/index.php/admin/cms_wysiwyg/directive/___directive/rfe33fSB1cmw9Ind5c2l3eWcvQ3wfwfer43cifX0,/key/rufheufuh4uh42eaf7611b26e2e1x1786/
Above is an example url from the image url field and a space is getting added after the last forward slash resulting in the %20, therefore not displaying my images.
Where can i trim this value as that will probably fix it?
Thanks for any help.
Try to use this:
<img src="{{media url="wysiwyg/example.png" _query="%20"}}" alt="" />
Or maybe:
<img src="{{media url='wysiwyg/example.png'}}%20" alt="" />
When I click the AddThis Pinterest button, the box opens mid-screen, offereing a variety of images from my page. Cool. However, among those offered are grainy, enlarged portions of nav buttons, banner ads, and other images that are relevant. On the same, page the Favorites Bar PinIt button (from Pinterest itself) does it "correctly", meaning it only offeres meaningful images; no nav buttons included.
How can I exclude selected images from the AddThis Pinterest widget box?
Thanks in advance to anyone who can help.
The actual way to force an image is the "media" option, not the "url" option:
<a... pi:pinit:media='http://path/to/my/image.jpg'>...</a>
AddThis Pinterest has support for "at_include" and "at_exclude" classes for images.
Full post here: http://support.addthis.com/customer/portal/articles/1300322-pinterest-image-sharing#.UuAnmrvTm2x
Include Images
You can instruct the share preview to only grab specific images from
the page by using the “image_include” configuration option. First, set
image_include to your desired class name (id selectors are not
allowed, only class selectors), then add that same class name to each
of the images on the page that should be grabbed. For image_include,
don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
Once image_include has been defined with a class, add that class to
the desired images on the page. In this example, the only images on
the page that will be grabbed, will be the images with the at_include
class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
Exclude Images
You can instruct the share preview to ignore specific images from the
page by using the image_exclude configuration option. First, set
image_exclude to your desired class name (id selectors are not
allowed, only class selectors), then add that same class name to each
of the images on the page that should be ignored. For image_exclude,
don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_exclude: "at_exclude"
}
Once image_exclude has been defined with a class, add that class to
the desired images on the page. In this example, the only image on the
page that will be grabbed, will be the image that doesn't have the
at_exclude class (img2.jpg).
<img src="http://www.example.com/img1.jpg" class="at_exclude" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_exclude" />
Image Container
You can also instruct the share preview to grab images from a specific
container, such as all the images contained within the class or id
that has a Pinterest share button. This can be really helpful if there
are multiple Pinterest share buttons on the page. Remember, the
Pinterest share button must be within the same container that the
images are located in. Also, notice that image_container needs to have
the ‘.’ or ‘#’ selector. Here's an example:
<script type="text/javascript">
var addthis_config = {
image_container: ".shared_content"
}
Once image_container has been defined with a class, add that class to
the desired on the page. In this example, the only images on the
page that will be grabbed, will be the images contained within the
shared_content .
<div class="shared_content">
Here's some example text. Images in this div will be grabbed.
<img src="http://www.example.com/img1.jpg" />
<img src="http://www.example.com/img2.jpg" />
<a class="addthis_button_pinterest_share"></a>
</div>
<div class="another_div">
Here's some more example text. Images in this div will not be grabbed.
<img src="http://www.example.com/img3.jpg" />
<img src="http://www.example.com/img4.jpg" />
</div>
If you want to specify a single image for Pinterest to use, you must specify the path to that image as the value of the pi:pinit:url property.
<a... pi:pinit:url='http://path/to/my/image.jpg'>...</a>
I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />
the image is displayed, but the input type doesn't show the image. what do i do wrong ?
<input type="image" src="img/beer.png" /> is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.
<input type="image" src="img/beer.png" onsubmit="submit();" />
But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:
<button type="submit" name="beer" value="beer_btn_was_clicked">
Here's some optional text,
<p>which you can even put in a paragraph!</p>
And you don't even need JavaScript!
<img src="img/beer.png" />
</button>
Edit (2016-02-12)
As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.
According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:
Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.
Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
A few other elements belong to this category, but only if a specific condition is fulfilled:
<a>, if it contains only phrasing content
<area>, if it is a descendant of a element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present
*today was that I read about it, not when the change was introduced
http://jsfiddle.net/cyB7B/
This works for me...have you got any other code that could be interfering? CSS maybe?
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx