TinyMCE Replace Parent Node - javascript

I'm developping a WordPress plugin which adds a button to the TinyMCE editor. When that button is clicked the desired behaviour should be:
1. If the selected text is not part of a short (or is the short) then the shortcode should be inserted into the DOM.
2 If not, the shortcode should be replaced with the new one.
The first requirement is fufilled, but the second not. When inserted, it show up in the visual editor but it not saved or displayed when saving or switching to text. This leads me to believe that im not directly editting the object underneath the editor, only that which is displayed. What is the correct way to go about it. Please see the following function:
...
insertContent: function(){
var atts = '';
var node = tinyMCE.activeEditor.selection.getNode();
var edit = $(node).is('div.wp-arv-faq');
jQuery('./$p/-sc-input').each(function() {
atts = atts + jQuery(this).attr('name') + '=\"' + $(this).val() + "\" ";
});
var caption = 'F.A.Q. ' + $('./$p/-sc-input[name="tax"] option:selected').text();
var style = $('./$p/-sc-input[name="style"] option:selected').text();
atts += ' caption="' + caption + ' (' + style + ')"';
if (edit){
$(node).empty();
tinyMCE.activeEditor.selection.setContent('[arv-faq ' + atts + '][/arv-faq]');
/$p/faqMCE.closeModal();
},
...
Please note, that the '/$p/' is unique to my build process and should be ignored. Thanks in advance

From your question it is not perfectly clear what you are trying to do, but i guess you are trying to insert html code into the editor.
Be sure to have the selection set right after calling $(node).empty();
Note: All your tags and attributes need to be configured as allowed tags and attributes using valid_elements and valid_children configuration paramters.

Related

How do I make Drive API WebViewLink URL clickable?

appendPre(file.name + ' (' + file.viewedByMeTime + ')'+ ' (' + file.webViewLink + ')' +' (' + file.quotaBytesUsed + ' bytes)');
When it displays: Its shows this
How can I make the URL clickable?
Also, how can I bold file.name and change the color of the text?
Edit
#Pig correctly pointed out that you are allowed to put content into a <pre> tag, it's just a real pain for no real benefit. If your goal is to make a list of items with clickable links, I think a <ul> and adding <li>'s with Javascript is better. Maybe even a <table> and adding rows! Delicious.
What's up #Pig! It's your bro #jdbiochem. Here's the appendPre() function I think you're talking about (you should post the functions you're using in a question like this :) ).
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
This adds to a <pre> tag, which renders preformatted text. You can't shouldn't really put anything in a <pre> tag besides text itself. So, you might think about making a different function to make a link, maybe something like this:
function appendLink(url) {
// create a DOM node, an <a> tag.
var link = document.createElement('a');
// a "text node" is what lives inside the tag <a>text node</a>
var _text = document.createTextNode("click me");
// add that text node to the link, so now we have: <a> click me </a>
link.appendChild(_text);
// set the actual link in the href attribute
link.href = url;
// add a CSS class so we can control the style of text easily
link.classList.add('drive-link');
// add this link somewhere in your document
doucment.getElementById('links').appendChild(link);
}
Keep in mind this function takes only the URL, so using it in all the places you have appendPre() will not work.
If you want the link bold and a different color, your CSS class might look like:
.drive-link {font-weight: bold; color: peachpuff;}
(BTW, you should mark answer to your earlier question correct!)

Child window innerHTML displaying as text if sent via string variable

I am trying to create a web page that will enable a child window to display some additional text when a gridview row is double clicked.
I am grabbing the HTML text from a hidden column of the gridview and sending it through as follows :
Dim outputText As String = (e.Row.Cells(12).Text)
e.Row.Attributes.Add("ondblclick", "var openWindow = window.open('Child.htm','Ratting','width=550,height=170,0,status=0,');openWindow.document.getElementById('content2').innerHTML = '" + outputText + "';") 'openWindow.init();")
When the window pops up, the HTML is displayed as text - tags and all.
If I use the following and paste the same text within the code - rather than via the string, the HTML displays correctly.
e.Row.Attributes.Add("ondblclick", "var openWindow = window.open('Child.htm','Ratting','width=550,height=170,0,status=0,');openWindow.document.getElementById('content2').innerHTML = " + chr(34) + "<img src='http://www.test.com/images/image%201.jpg'/><br/><br/>Some more text"+ chr(34) + ";") 'openWindow.init();")
Could anyone point me in the right direction please? I can't figure out what's wrong and it's been driving me mad.
Thanks.
So I figured this out.
It seems when the text is posted via a variable, the tags < and > get replaced by '&lt' and '&gt'
So to fix it, I appended this after I set the innerHTML :
openWindow.document.body.innerHTML=openWindow.document.body.innerHTML.split('<').join('<').split('>').join('>');
And it's done the trick!

upgrading javascript that adds a link to a field

I am trying to change the Sales Stage field label to a hyperlink to pop up a new browser window.
Currently I have a form with a Sales Stage field that has a drop down::
The underlying HTML:
<td title="Select the sales process stage for the opportunity to indicate the probability of closing the opportunity." class="ms-crm-ReadField-Normal ms-crm-FieldLabel-LeftAlign" id="salesstagecode_c"><span class="ms-crm-InlineEditLabel"><span class="ms-crm-InlineEditLabelText" style="text-align: left; max-width: 115px;">Sales Stage</span><div class="ms-crm-Inline-GradientMask" style="display: none;">
</div></span></td>
or perhaps better formatted:
The function that I used previously worked on an older version of the form:
function csjs_AddHyperlinkToLabel(sFieldId, sURL, sWindowOptions) {
    var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
    $("label[for='" + sFieldId + "']").html("" + sCurrentLabel + "");
}
the function above worked on a form with the following html::
What changes would be required to the javascript to change the Sales Stage field label to a hyperlink to pop up a new browser window?
Though I'd be very grateful for a solution, I'm looking for guidance on how to accomplish this. Thank you for your attention and time.
Unfortunately, the solutions below did not work. I ran this through the debugger and here's what I got http://screencast.com/t/fT6tHvXZzvc
The issue here is that we are passing “salesstagecode” to this function:
csjs_AddHyperlinkToLabel("salesstagecode", sPageURL, sWindowFeatures);
and this turns out to be NULL:
var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
*
The issue is that Microsoft changed the way the forms are rendered and
the HTML of the rendered page will no longer work with the way the
function was written. The label is now in a span tag instead of a
label tag. I don't know if there is a way to identify that span and
change the contents to have new HTML to make the text link.
*
How do you update a span tag?
You need to add target="_blank" attribute in your hyperlink markup.
Simple:
change
.... onclick=\"window.open('" + sURL + "', null, '" ....
to
.... onclick=\"window.open('" + sURL + "', '_blank', '" ....

Append "tweet this" button to blockquotes with jquery

Updated:
I'd like to append a self made "tweet this" button after blockquotes with jQuery. I figured out the following three steps are necesarry (some are already resolved thanks to the stackoverflow community):
[resolved] appending anything to the blockquote
[resolved] appending a working twitter share link to the blockquote
making sure it works with multiple blockquotes
The code I'm using at the moment is:
<script type="text/javascript">
var completeurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
completeurl = encodeURIComponent(completeurl);
var twshare = "https://twitter.com/share?url=" + completeurl;
var bq = $( "blockquote" ).text()
$("blockquote").append("<a href='" + twshare + "&text=" + bq + "'>Click to tweet</a>");
</script>
So the current state is: I'm stuck at #3, making it work with multiple blockquotes per page. Ideally it wouldn't be necesarry to manually assign IDs or something similar. So fully automated one #tweet this" button per blockquote. Is that possible?
Thanks!
Without seeing adequate markup, it is difficult to point where the problem is.
However, it works just fine.
See this fiddle: http://jsfiddle.net/JvT7h/2/
$("blockquote").append("<a href='http://twitter.com'>Click to tweet</a>");
Aside: append doesn't add an element after, but as a child inside.
Update:
As per your comments you need to customize the anchor link to be appended to multiple blockquotes depending upon the text of each blockquote.
See this updated demo fiddle: http://jsfiddle.net/abhitalks/JvT7h/3/
JQuery:
$("blockquote").each(function(){
var $link = $("<a />"),
linkText = "Click to tweet",
url = twshare + "&text=" + $(this).text();
$link.attr("href", url);
$link.text(linkText);
$(this).append($link);
});
You need to iterate over all blockquotes and then use $(this) to append the customized anchor.

How to bind events to dynamically created JQuery DOM elements

I'm having trouble referencing an object from within the plugin I'm attempting to make.
The plugin is assosciated with a div container.
When the dom is ready it loads in startup defaults - creates its own div with id's it knows and an un ordered list. I can add list items and they work correctly using $this.append(..). However I want to add a feature where a click on an individual list item does something.. for now alert will suffice.
Normally I would be able to do:
$("#myId").click(function(){...
How would i add such functionality to a plugin?
I want that action set by the plugin itself, so clicking on list items created by the plugin are already attached to some functionality which I have written into the jquery plugin.
Based on your comment, you could store the new tab in a variable:
var newTab = $("<li id='tab#" + o.tabCount + "' myTabPane='" +
o.tabId + o.tabCount + "' class='tab'><h3>Tab " + o.tabCount
+ "</h3></li>");
$('#' + o.tabListId).append(newTab);
newTab.click(function() {
var paneId = '#' + $(this).attr('myTabPane');
$(paneId).siblings().hide();
$(paneId).show();
});
Link to working example at jsfiddle.
By the way, your original script had the second ' in the wrong place:
$("<li id='tab#'" + o.tabCount + " class='tab'><h3>Tab "
^^^
You would want to reference them after doing the append by tag name not by ID.
$(this).find("li").click(function(){ /* do work */});
If you absolutely have to reference it by ID you can do:
$(this).find("li").each(function(){
var id = $(this).attr("id");
/* do work */
});

Categories