TInyMCE Preview Plugin : Link is not clickable - tinymce

I am uses TinyMCE 4 where I have inserted source content as link
Sample Link
After inserting above content in the TinyMCE, if I click on the preview button of TinyMCE then anchor tag is coming in the form of link but it's not clickable.
Can anyone guide how anchor we can make it as clickable?
I have followed below links(by adding default_link_target: "_blank"):
https://community.tinymce.com/communityQuestion?id=90661000000MrWjAAK
&
How to open hyperlink in new window under tinymce text editor?
but none seems to be worked.
but none seems to be worked.

The preview plugin has code that specifically stops links from being clickable. If you look at the JavaScript code for the plugin you will see something like this:
var preventClicksOnLinksScript = (
'<script>' +
'document.addEventListener && document.addEventListener("click", function(e) {' +
'for (var elm = e.target; elm; elm = elm.parentNode) {' +
'if (elm.nodeName === "A") {' +
'e.preventDefault();' +
'}' +
'}' +
'}, false);' +
'</script> '
);
This code is there specifically to address an issue that could cause a link in preview to unintentionally remove the editor instance.
If you click a link in the preview pane that has a target=_top you will end up blowing away the editor and replacing it with the content of that link - likely not what you want.

I know it's an old thread but maybe it will help someone out there. If you want the links to open in a new window in tinymce prevew plugin remove this script:
<script>document.addEventListener && document.addEventListener("click", function(e) {for (var elm = e.target; elm; elm = elm.parentNode) {if (elm.nodeName === "A") {e.preventDefault();}}}, false);</script>
and place this one instead:
<script>function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a]; b.getAttribute("href") && b.href.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();<\/script>
Enjoy!

Related

Is it possible to display the source of MathJax-rendered TeX inline?

I am reading this book where there are MathJax formulas. I am taking notes in an Ipython notebook. It is not convenient to take note from passages with Math formula. Is there an easy way to copy text with equations as a Tex command (which is render-able on Ipython)?
Update
TL;DR
Right click on a formula > Math Settings > Math Renderer > MathML
Create a bookmarklet from: javascript:(function() { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '<span>$</span>' + math.innerHTML + '<span>$</span>'; } })()
Run the bookmarklet on a page by pressing it
Enjoy easier copy & pasting!
Long version
This Github issue has a fix for the problem. It didn't work well for this page so I changed it a bit as above. It is not a general solution, but you can tweak it depending on the specifics of a page. If you are more eager, you can elaborate on it and make a browser extension for everyone to appreciate it :).
Old Answer
I tried couple of methods on this example:
Method 1:
Change the settings to render as MathML by: Right click on the formula > Math Settings > Math Renderer > MathML
Open the page source e.g. Ctrl + U on Chrome or Right click and press 'View Source'.
Find the piece of text you are looking for. It should be displayed in the right format:
bla bla $a \ne 0$ bla bla \(ax^2 + bx + c = 0\) bla bla
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Method 2:
Do step 1 from previous method. The example page will be rendered with formulas but without the formula-enclosing characters.
Add single or double dollar signs around TeX commands to get the format as in step 3 of the previous method.
The best would be to combine the two method; i.e. getting the right format directly in the page. Let us know if you found a way to do it.
And thanks to #nam and #PeterKrautzberger for their hints :)
Here is my extension to #Thoran's answer with bookmarklet that can auto change renderer to MathML and display MathJax formulas source inline:
javascript: (function() { MathJax.Hub.setRenderer("NativeMML"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_MathML"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()
And here is PlainSource version:
javascript: (function() { MathJax.Hub.setRenderer("PlainSource"); MathJax.Hub.Queue(["Rerender", MathJax.Hub]); MathJax.Hub.Queue(function () { var inline = document.getElementsByClassName("MathJax_PlainSource"); for (var i = 0; i < inline.length; i++) { var math = inline[i]; math.innerHTML = '$' + math.innerHTML + '$'; } }); })()

How to Download Facebook Look back Video?

What should Do, If I want to download Facebook Lookback Video
Reference
Simple JS Script to get Video URL from Facebook's Look Back
Copy paste this whole code into Chrome Console and press enter.
You can execure this script on any page on Facebook.
It will give you the video URL, open it, view it, download it, do whatever you want to. :P
The video URL will popup in front of you, press Ctrl + C to copy it.
To do so, open Chrome Console, Ctrl + Shift + J, "Console" tab.
Copy paste the whole thing there.
To share it, just open the link and download it by pressing Ctrl + S.
Upload it to YouTube or wherever you want to. Share, enjoy! :)
Keep Sharing this with everyone! :)
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
ss = xmlhttp.responseText.split('[["params","')[1].split('"],["width","960"]')[0];
var x = ss;
var r = /\\u([\d\w]{4})/gi;
x = x.replace(r, function (match, grp) {return String.fromCharCode(parseInt(grp, 16)); });
x = unescape(x);
console.log(JSON.parse(x).video_data[0].hd_src);
prompt("Here's your video URL (HD)! Press Ctrl + C to copy it!", JSON.parse(x).video_data[0].hd_src)
}
}
xmlhttp.open("GET", "/lookback", true);
xmlhttp.send();
You can also get the SD and HD sources directly from the flashvars of the embed used to display the video. In Google Chrome inspect the page for the "content" div you'll find a div with class "swfObject".
Decoding the flasvar, you'll get something similar to:
params={
"autoplay":true,
"autorewind":true,
"default_hd":false,
"dtsg":"AQAAJp6S",
"inline_player":false,
"lsd":null,
"min_progress_update":300,
"pixel_ratio":1,
"preload":false,
"source":"lookback",
"start_index":0,
"start_muted":false,
"use_spotlight":false,
"video_data":[
{
"hd_src":"https:\/\/lookbackvideo7-a.akamaihd.net\/hvideo-ak-ash2\/v\/t55\/1774977_10104243234253383320144_17978_n.mp4?oh=7d70ce01b4c6dff2345d48e6e938a9df65f&oe=52F59B08&__gda__=1391855368_9ae234b1cce92effd53d05cdfb6e884f323",
"is_hds":false,"index":0,"rotation":0,
"sd_src":"https:\/\/lookbackvideo7-a.akamaihd.net\/hvideo-ak-ash2\/v\/t54\/1785524_101045234234383320144_19170_n.mp4?oh=1116ee0f06e59c4180648234bac62a148ea&oe=52F5A983&__gda__=1391848771_03b13324ffa3791cc64e0d070465107c7c8",
"thumbnail_src":"https:\/\/fbcdn-vthumb-a.akamaihd.net\/hvthumb-ak-prn1\/t15\/1542287_101045533833922349984_10104553383320144_60544_503_b.jpg",
"thumbnail_height":540,"thumbnail_width":960,
"video_duration":62,
"video_id":"101045523423383320144"
}]}
The two important values here are hd_src and sd_src (i've garbled mine for security purposes):
"hd_src":"https:\/\/lookbackvideo7-a.akamaihd.net\/hvideo-ak-ash2\/v\/t55\/1774977_10104553382342320144_17978_n.mp4?oh=7d70ce01b4c6dff5d48e6e938234a9df65f&oe=52F59B08&__gda__=1391855368234_9aeb1cce92effd53d05cdfb6e884f323",
"sd_src":"https:\/\/lookbackvideo7-a.akamaihd.net\/hvideo-ak-ash2\/v\/t54\/1785524_101045532342343320144_19170_n.mp4?oh=1116ee0f06e59c4180623424448bac62a148ea&oe=52F5A983&__gda__=139184232428771_03b13ffa3791cc64e0d070465107c7c8",
Load your desired quality (High Definition or Standard Definition) URL into a new browser window, right click on the video and "Save Video As."
www.fundawn.com is the best web place where people can download and watch public videos and photos of top facebook celebrities and others, all in one place.
Just check it.

Prevent TinyMCE from removing span elements

Here is the problem demonstration
You can try it here: http://fiddle.tinymce.com/SLcaab
This is TinyMCE default configuration
less all the plugins
with extended_valid_elements: "span"
1 - Open the Html Source Editor
2 - Paste this html into the Html Source Editor:
<p><span>Hello</span></p>
<p>Google 1</p>
<p>Google 2</p>
3 - Click update in the Html Source Editor to paste the html in the editor
4 - Remember there is a span around 'Hello'.
5 - Place your cursor just before Google 2 and press backspace (the two links should merge inside the same paragraph element).
6 - Look at the resulting html using the Html Source Editor.
Result (problem): No more span in the html document even though we added 'span' to the extended_valid_elements in the TinyMCE settings.
Note: I removed all the plugins to make sure the problem is at the core of TinyMCE.
Edit 1 - I also tried: valid_children : "+p[span]" - still does not work
Edit 2: Only reproduced on WebKit (OK on Firefox and IE)
Insert extended_valid_elements : 'span' into tinymce.init:
tinymce.init({
selector: 'textarea.tinymce',
extended_valid_elements: 'span',
//other options
});
I have the same problem and I find solutions. Tiny MCE deleted SPAN tag without any attribute. Try us span with class or another attribute for example:
<h3><span class="emptyClass">text</span></h3>
In TinyMCE 4+ this method good work.
Tinymce remove span tag without any attribute. We can use span with any attribute so that it is not removed.
e.g <span class="my-class">Mahen</span>
Try this for 3.5.8:
Replace cleanupStylesWhenDeleting in tiny_mce_src.js (line 1121) with this::
function cleanupStylesWhenDeleting() {
function removeMergedFormatSpans(isDelete) {
var rng, blockElm, wrapperElm, bookmark, container, offset, elm;
function isAtStartOrEndOfElm() {
if (container.nodeType == 3) {
if (isDelete && offset == container.length) {
return true;
}
if (!isDelete && offset === 0) {
return true;
}
}
}
rng = selection.getRng();
var tmpRng = [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset];
if (!rng.collapsed) {
isDelete = true;
}
container = rng[(isDelete ? 'start' : 'end') + 'Container'];
offset = rng[(isDelete ? 'start' : 'end') + 'Offset'];
if (container.nodeType == 3) {
blockElm = dom.getParent(rng.startContainer, dom.isBlock);
// On delete clone the root span of the next block element
if (isDelete) {
blockElm = dom.getNext(blockElm, dom.isBlock);
}
if (blockElm && (isAtStartOrEndOfElm() || !rng.collapsed)) {
// Wrap children of block in a EM and let WebKit stick is
// runtime styles junk into that EM
wrapperElm = dom.create('em', {'id': '__mceDel'});
each(tinymce.grep(blockElm.childNodes), function(node) {
wrapperElm.appendChild(node);
});
blockElm.appendChild(wrapperElm);
}
}
// Do the backspace/delete action
rng = dom.createRng();
rng.setStart(tmpRng[0], tmpRng[1]);
rng.setEnd(tmpRng[2], tmpRng[3]);
selection.setRng(rng);
editor.getDoc().execCommand(isDelete ? 'ForwardDelete' : 'Delete', false, null);
// Remove temp wrapper element
if (wrapperElm) {
bookmark = selection.getBookmark();
while (elm = dom.get('__mceDel')) {
dom.remove(elm, true);
}
selection.moveToBookmark(bookmark);
}
}
editor.onKeyDown.add(function(editor, e) {
var isDelete;
isDelete = e.keyCode == DELETE;
if (!isDefaultPrevented(e) && (isDelete || e.keyCode == BACKSPACE) && !VK.modifierPressed(e)) {
e.preventDefault();
removeMergedFormatSpans(isDelete);
}
});
editor.addCommand('Delete', function() {removeMergedFormatSpans();});
};
put an external link to tiny_mce_src.js in your html below the tiny_mce.js
It's possible to use the work around by writing it as a JavaScript script which prevents WYSIWIG from stripping empty tags. Here my issue was with including Font Awesome icons which use empty <i> or <span> tags.
<script>document.write('<i class="fa fa-facebook"></i>');</script>
In the Tinymce plugin parameters enable:
Use Joomla Text Filter.
Be sure your user group have set "No filtered" Option in global config > text filters.
Came across this question and was not happy with all the provided answers.
We do need to update wordpress at some point so changing core files is not an option. Adding attributes to elements just to fix a tinyMCE behaviour also doesn't seem to be the right thing.
With the following hook in the functions.php file tinyMCE will no longer remove empty <span></span> tags.
function tinyMCEoptions($options) {
// $options is the existing array of options for TinyMCE
// We simply add a new array element where the name is the name
// of the TinyMCE configuration setting. The value of the array
// object is the value to be used in the TinyMCE config.
$options['extended_valid_elements'] = 'span';
return $options;
}
add_filter('tiny_mce_before_init', 'tinyMCEoptions');
I was having same issue. empty SPAN tags are being removed. The solution i found is
verify_html: false,
Are you running the newest version of TinyMCE? I had the opposite problem - new versions of TinyMCE would add in unwanted span elements. Downgrading to v3.2.7 fixed the issue for me, that might also work for you if you are willing to use an old version.
Similar bugs have been reported, see the following link for bugs filtered on "span" element:
http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open,verified&type=bug

forced_root_block option in TinyMCE

I am trying to implement a custom WYSIWYG editor using a contenteditable <div>.
One of the major issues I am facing is the inconsistent way browsers handle ENTER keystroke (linebreaks). Chrome inserts <div>, Firefox inserts <br> and IE inserts <p>. I was taking a look at TinyMCE and it has a configuration option called forced_root_block. Setting forced_root_block to div actually works across all major browser. Does someone know how forced_root_block option in TinyMCE is able to achieve it across browsers ?
In the tinymce source (/tiny_mce/classs/dom/DomParser.js) you will find the following:
rootBlockName = "forced_root_block" in args ? args.forced_root_block : settings.forced_root_block;
whiteSpaceElements = schema.getWhiteSpaceElements();
startWhiteSpaceRegExp = /^[ \t\r\n]+/;
endWhiteSpaceRegExp = /[ \t\r\n]+$/;
allWhiteSpaceRegExp = /[ \t\r\n]+/g;
function addRootBlocks() {
var node = rootNode.firstChild, next, rootBlockNode;
while (node) {
next = node.next;
if (node.type == 3 || (node.type == 1 && node.name !== 'p' && !blockElements[node.name] && !node.attr('data-mce-type'))) {
if (!rootBlockNode) {
// Create a new root block element
rootBlockNode = createNode(rootBlockName, 1);
rootNode.insert(rootBlockNode, node);
rootBlockNode.append(node);
} else
rootBlockNode.append(node);
} else {
rootBlockNode = null;
}
node = next;
};
};
This obviously takes care of creating root block elements.
I am 99% sure that tinymce handles the 'ENTER' keystroke itself and stops the propagation/ default browser command.

Does a PageDown plugin exist for Jeditable?

I am using the jQuery inline editing plugin Jeditable. Thankfully, Jeditable provides a plugin capability for extending the out of the box inline editing it provides.
I am hoping to not reinvent the wheel-- as such does a PageDown plugin already exist for Jeditable? If one does my Google-fu is not turning up any results.
I never found a ready to go Jeditable PageDown plugin so I wrote my own. The below example is too specific to be used without modification, but should provide a decent enough outline for anyone endeavoring to accomplish a similar task.
Code to add a "markdown" input type to Jeditable:
var converter = Markdown.getSanitizingConverter();
$.editable.addInputType('markdown', {
element: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var input = $('<textarea />');
input.attr('id', 'wmd-input' + editorId);
var panel = $('<div class="wmd-panel" />');
panel.append('<div id="wmd-button-bar' + editorId + '" />');
panel.append(input);
panel.append('<div id="wmd-preview' + editorId + '" />');
$(this).append(panel);
return (input);
},
plugin: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var editor = new Markdown.Editor(converter, editorId);
editor.run();
}
});
The above code goes through a bunch of gyrations concerning the elements id, because in my case I can have several editors on a single page. See the PageDown documentation about Markdown.Editor for more details.
Once I've added the "markdown" input type to Jeditable it's just a matter of utilizing it with this code:
$('.editable-element-area').editable('http://jsfiddle.net/echo/jsonp/', {
onblur: 'submit',
type: 'markdown',
indicator: 'Saving...',
loadurl: 'http://jsfiddle.net/echo/jsonp/', // retrieve existing markdown
callback: function(value, settings) {
$(this).html(converter.makeHtml(value)); // render updated markdown
}
});​
I want my users to see the markdown as HTML when they aren't editing it so I have to make use of the callback and loadurl Jeditable parameters. The load url retrieves the text to edit in markdown format, while the callback converts the new text back to html.