I'm trying to add some html markup to the WYSIWYG CLEditor from outside of the editor itself using jQuery.
So far I have...
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" />';
// Now What?
}
);
But I'm at a loss as to how to add the string in to the WYSIWYG and it's starting to drive me crazy!
This will overwrite:
$("#inputID").val(theimage);
$("#inputID").cleditor()[0].updateFrame();
This will append:
currentval = $("#inputID").val();
$("#inputID").val(theimage);
$("#inputID").val(currentval + theimage);
Or maybe try this:
$('#inputID').val('new text data').blur();
Where inputID is the ID of your CLEditor input.
Also, this has some discussion around this:
CLEditor dynamic adding text
Just made 2 small edits to CCCasons solution to make it work as intended.
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" /><br/>';
// Get the current value of the textarea otherwise it will be overwritten
currentval = $("textarea.wysiwyg").val();
$("textarea.wysiwyg").val(currentval + theimage);
$("textarea.wysiwyg").cleditor()[0].updateFrame();
}
);
1) Added a line break to the end of the inserted link. Otherwise when you try to type in the wysiwyg after adding the image it inputs inside the link.
2) Grabbed the current value of the textarea first to stop it being overwritten by the image.
Again, thanks a lot to CCCason!
Related
Really need your help, I have the below javascript code:
document.querySelector('#btnCrop').addEventListener('click', function(){
var img = cropper.getDataURL();
document.querySelector('.cropped').innerHTML += img;
})
The "img" has a value:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAgAElEQVR4Xuy9B6CdZZUuvE56771AQgqEGgKEkNCrgoAFRFQQHevM+Ht/nTsX5/7XmXFm1Jlx7HVGZSxIN0iXIqFLSEgIkALpvScnvZ/7rPaW7/v2PicQEPzdGs7eX3nLeldf611vAxE14d+b/rn2/DPos5ddSN26
so what is does in php is to display it via:
$img = (div class="cropped" style="float: left;margin-top:-653px;margin-left: 630px;border:1px solid violet")(/div)
What I need is to display it without div. Just the value of the "img".
Replace
document.querySelector('.cropped').innerHTML += img;
with something like this:
document.write("<img src=\"" + img + "\" style=\"\">");
That will just write it in document. But basically it's the same when extending it to something.
Something like this is more what you want I guess:
$('img#ID').attr('src', img);
(This wil set the src value (Base64) in the image. If you want you could hide it at first and then use $().show() to make the image visible again.
I have a function in which when the function is called I need to have text and an image pop up. My javascript is:
function Upload(){
if(value !- ''){
$("#divValue").html("Uploaded: " + //i need to add an image here );
}
So where it says //I need to add an image here, this is where my image, lets say its tire.gif, needs to be added so when the javascript is called it displays the text and image together.
you can use document.createElement method to create a img Object and simply set the source and optional height and width, then add it to your div using "append":
var img = document.createElement('img')
img.src = //URL to your image
$(img).css('width','50px'); //set the width (optional)
$(img).css('height','50px'); //set the height (optional)
//finally append the newly created image object to your "DivValue"
$("#divValue").append(img);
Can you try this,
function Upload(){
var value="some value";
if(value != ''){
$("#divValue").html("Uploaded: <img src='../images/tire.gif' />" );
}
}
It is actually pretty straight forward. You just need to pass the tag inside the string that will replace the html.
Check this jsFiddle
But you just need to do:
$("#divValue").html("Uploaded: <img src=' PATH_TO tire.gif ' /> ");
Watch the difference between " and ' to avoid syntax problems.
Cheers.
You mean like this?
$("#divValue").html('Uploaded: ' + '<img src="image.jpg" alt=""/>');
I want to add new anchor links to a page using Greasemonkey. Specifically, I want to add custom smileys so that I don't have to find the smiley image and copy-and-paste the link into an [img] tag every time.
The code I want to add is this
<a href="#" onclick="insert_text(':D', true); return false;">
<img src="./images/smilies/icon_e_biggrin.gif" alt=":D" title="Very Happy" height="17" width="15">
</a>
but I want to change the img src location and the onclick to something like
insert_text('[img]imagesourcelocation[/img]' ,true) return false;
The [img] source would be the same as the image URL.
I want to be able to add many smileys over time -- changing the alt and title attributes would be great too, but I need mainly the other two.
How would I do this?
So far all I have is this:
var para=document.createElement("a");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("smiley-box");
element.appendChild(para);
As you can see, I need to add this new smiley to the <div> with the id smiley-box.
If anyone can help me do this I would be so happy.
You can set the properties of DOM element objects by accessing their attributes, e.g. to set the href:
para.href = "#";
Setting the onclick is a bit different - instead of giving it a string of Javascript, you give it a function:
para.onclick = function() {
insert_text('[img]imagesourcelocation[/img]' ,true);
return false;
}
To achieve the image in a link, just create an img element instead of a text node, set it's attributes like above, and add it to the link:
// create the img and set it's src
var node=document.createElement("img");
node.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Smiley.png/50px-Smiley.png"
// add the img to the anchor
para.appendChild(node);
Working example here: http://jsfiddle.net/d2gGR/
References:
http://www.w3schools.com/jsref/dom_obj_anchor.asp
http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.w3schools.com/jsref/dom_obj_event.asp
Not sure if this is the greasemoney way but you could also just update the innerHTML of the smiley box directly
function add(url, alt, title)
{
var box=document.getElementById("smiley-box");
box.innerHTML += "<a href=\"#\" onclick=\"insert_text('[img]" + url +
"[/img]', true); return false;\"><img src=\"" + url +
"\" alt=\"" + alt + "\" title=\"" + title + "\" height=\"17\" width=\"15\"></a>";
}
You can then add smileys to the box like this (link, alt text and title text):
add("http://bit.ly/1a4xaTX",":D","Big grin");
add("http://bit.ly/HDGdlw",":(","Sad");
add("http://bit.ly/175LywW",":O","Surprised");
jingtao's solution is a nice one though.
Here's a complete script that adds custom smilies using the awesome power of jQuery. Note that it avoids 3 of the deadly sins of scripting:
It avoids "cut and paste (and cry)" coding.
It uses event handlers the robust web 2.0 way. (Never use onclick.)
It does not trash innerHTML of existing elements.
Additionally, this code is very easy to make AJAX-aware, if needed, using waitForKeyElements().
// ==UserScript==
// #name _Add custom smilies
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
/*- The #grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
$("#smiley-box").append ('<p>Custom smileys.</p>');
addNewSmiley ("http://sguwars.com/forum/images/smilies/icon_cool.gif");
function addNewSmiley (imageURL) {
$("#smiley-box").append (
'<a href="#" class="gmCustomSmilies">'
+ '<img src="' + imageURL + '"></a>'
);
}
//-- Activate click handlers for any and all of our custom smilies
$(document.body).on ("click", "a.gmCustomSmilies", insertSmilie);
function insertSmilie (evnt) {
var jThis = $(evnt.target);
var imgURL = jThis.find ("img").attr ("src");
unsafeWindow.insert_text ('[img]' + imgURL + '[/img]', true);
return false;
}
var para=document.createElement("p");
var node=document.createTextNode("custom smileys.");
para.appendChild(node);
links = document.createElement('a');
links.setAttribute('href','#');
links.setAttribute('onclick','insert_text(\'[img]http://sguwars.com/forum/images/smilies/icon_cool.gif[/img]\', true); return false;');
links.innerHTML ='<img src="http://sguwars.com/forum/images/smilies/icon_cool.gif" />';
var element=document.getElementById("smiley-box");
element.appendChild(para);
element.appendChild(links);
this is my solution so far thankyou
I am using elFinder for my project. Everything is working well, but I need one more function. I want, when I double click image, to insert img tag in textarea. How can I do this. I am using standard configuration for elFinder, nothing is changed there.
Add getFileCallback function to place img tag in your textarea:
$('#elfinder').elfinder({
// ...
onlyMimes: ["image"],
getFileCallback: function(file) {
var parent = (window != window.top) ? window.parent : window.opener;
var textarea = window.opener.document.querySelector('#id_textarea_to_insert_img_tag');
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, startPos)
+ '<img src=\"' + file.url + '\" title=\"\" alt=\"\" />'
+ textarea.value.substring(endPos, textarea.value.length);
},
}).elfinder('instance');
I have a large number of images of the same class "linkImg" and I would like them to behave as links without adding tags.
What I'm tryng is something like this:
<script type="text/javascript">
$(function()
{
$('.linkImg').click( function( event )
{
var fileSrc = $(this).attr('src');
fileSrc = fileSrc.slice(fileSrc.lastIndexOf('/')+1,-4); // gets the image file name
var linkPath = '_img/largeImg/' + fileSrc + '.jpg';
var linkRel = 'relValue';
var linkTarget ='targetValue';
gotothelinl(linkPath, linkRel, linkTarget)// this is just a made-up function - it the part I don't know how to make work
})
} );
</script>
When it works it should behave like the tag was there with all attribute intact. I tried using location.href but I can't ad rel or target attributes to that.
thx in advance
David
To change the location of the page you'd do
location.href = "/newLocation.html"
This simulates a hyperlink (although I'm an ajax enthusiast!)
I think your are taking the problem for another angle... try this:
<script type="text/javascript">
$(function()
{
$('.linkImg').each( function()
{
var fileSrc = $(this).attr('src');
fileSrc = fileSrc.slice(fileSrc.lastIndexOf('/')+1,-4); // gets the image file name
var linkPath = '_img/largeImg/' + fileSrc + '.jpg';
var linkRel = 'relValue';
var linkTarget ='targetValue';
$(this).wrap('<a href="'+ linkPath +'" target="' + linkTarget + '" rel="'+ linkRel + '" />')
})
} );
</script>