I've been trying to force TinyMCE to not delete my a tags with every setting that is available and have had no luck (also looked at 20+ posts here - most being over a decade old and no working solutions). I'm just going to post what I try to put into the editor and what it removes (along with every setting I've tried).
What the markup should look like:
<a href="#" class="hearmorelink" onclick="window.open('/Mini-Lots-audio.html', 'Voice Over', 'width=320,height=1,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');return false;">
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
</a>
what tinyMCE does to it:
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
Maybe not the prettiest HTML ever, but why does it disallow wrapping anything inside an A tag when it's perfectly acceptable HTML5 as per the RFC?
apply_source_formatting: false,
verify_html: false,
trim_span_elements: false,
cleanup: false,
convert_urls: false,
cleanup_on_startup: false,
force_br_newlines: true,
force_p_newlines: false,
allow_script_urls: true,
forced_root_block: false,
valid_elements: '+*[*]',
plugins: [
"advlist autolink autoresize directionality lists link image charmap preview anchor",
"searchreplace visualblocks code fullscreen textcolor",
"insertdatetime media table contextmenu paste"
],
All the settings seem to be working, but this problem still persists. Because this is needed for 50 or so pages and the HTML is stored and retrieved from a database, I can't hard-code anything in (also - non-HTML people/admins need to use this too).
I am not sure how I can make this work (and, yes, it MUST be a popup so the audio can play while people visit from page to page). Would a plugin help here?
okay - after doing a few more tweaks, I've found that TinyMCE is stuck in HTML4 (which does not allow block elements inside A tags). HTML5 supports DIV tags inside A tags.
I'll just change the markup and tweak the span tag to display like a block with CSS.
Related
I have a bunch of inputs on my HTML page, plus a textarea which is replaced by a TinyMCE editor. There are various scenarios where this page is loaded and every time one of the inputs must get the focus. But when the TinyMCE is initialized, it just steals the focus. I narrowed down the problem to an execCommand call which sets the default font size in TinyMCE.
The issue can be reproduced in this simplified code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
});
}
});
</script>
</head>
<body>
<input id="inp" />
<textarea>Hello, World!</textarea>
<script>
document.getElementById("inp").focus();
</script>
</body>
</html>
I have tested this in Firefox, Chrome, and Edge, and the same issue happened in all of them. Any idea how I can prevent this? I do not want to set the focus again once the TinyMCE is done initializing, since at that point the page has scrolled to the wrong spot.
I know I said I did not want to set the focus "again" once the TinyMCE is done initialization, but I ended up doing something similar to that. Instead of setting the focus at the bottom of the page, I moved the code inside the tinymce.init and also called $(document).scrollTop(0);. Here is the code:
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
// Scroll to the top of the page.
$(document).scrollTop(0);
// Now set the focus.
document.getElementById("inp").focus();
});
}
});
I believe there is a bug in TinyMCE and I hope it gets fixed in one of the future revs. I also hope this workaround helps someone down the road.
While you are issuing the command to change the font size, you aren't actually setting a default font in the TinyMCE editor. You are firing those commands, but if there is any content to be loaded into the editor, it won't have this font information applied.
To set default font information in TinyMCE use CSS, either via the content_css or content_style configuration options:
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
Here are examples that show the differences between the two approaches.
In this example: https://fiddle.tiny.cloud/oAhaab
...commands to set the default font family and size are issued, but they aren't applied to the content that is then loaded into the editor. They are fired, but don't end up applying to content loaded into the editor.
Whereas,in this example: https://fiddle.tiny.cloud/nAhaab
...the default font information is applied to loaded content via CSS as expected.
Is there any way to turn off all auto replacements in TINYMCE ?
Its replacing my <b> tags to <strong> and a
full url such as <a href="http://example.com" is getting turned into <a href="../example.com"
and so on.
I tried to use those 3:
extended_valid_elements : '*[*]',
cleanup : false,
verify_html : false
No luck so far.
If you want <b> and <i> tags instead of <strong> and <em> you can use this setting in your TinyMCE configuration:
extended_valid_elements: "b/strong,i/em", //force strong-->b and em-->i
TinyMCE also has a variety of options for managing URLs:
https://www.tiny.cloud/docs/configure/url-handling/
You should look at those options to see how they can help address your URL issue.
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'm using TinyMCE with the jbimages plugin for uploading images. I also have the autoresize plugin active so the editor automatically expands and shrinks when content is being added/removed.
This all works fine except when I upload images that are larger than the editor viewport. The editor will not expand in that case.
My code to init tinyMCE is as follows:
tinyMCE.init({
menubar: false,
statusbar: false,
selector: "textarea",
plugins: [
"advlist autolink autoresize lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages textcolor"
],
toolbar: "jbimages",
relative_urls: false
});
My markup looks like:
<div class="control-group" id="cgroup-order[message]">
<label class="control-label required" id="label-order[message]" for="order[message]">Message to send:</label>
<div class="controls" id="controls-order[message]">
<textarea name="order[message]" class="pull-left span3 message" id="order[message]"></textarea>
</div>
It seems like the mceAutoResize command isn't being executed when an image is inserted by jbimages. I've already tried adding something like this to the init parameters:
setup: function(editor) {
editor.on('SetContent', function(e) {
editor.execCommand('mceAutoResize');
});
}
But it doesn't help much. Any ideas how to make this work properly?
Edit:
When I press a key after inserting an image or press a mouse button the editor will be resized, but it doesn't happen automatically.
Edit 2:
Okay, so I know the reason for this behavior now at least. What happens is that the autoresize plugin responds to the editor's SetContent event. At that point when a large image is inserted the browser may or may not be done rendering the image. If it's not done rendering the image the new height that autoresize calculates is still the old height for obvious reasons.
I've tried many different things like catching the load event of mce's iframe, but that only triggers when the page loads initially.
I ended up solving it in a really dirty way, using a 1 second timeout to give the browser more time to render the image. Of course this is a duct tape solution at best, because it may not work on slower clients. If anyone has a better solution please let me know.
My code now looks like this:
tinyMCE.init({
menubar: false,
statusbar: false,
selector: "textarea",
plugins: [
"advlist autolink autoresize lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages textcolor"
],
//toolbar: "insertfile undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | link | jbimages",
toolbar: "jbimages",
relative_urls: false,
autoresize_min_height: 200,
//autoresize_max_height: 800,
setup: function(editor) {
editor.on('SetContent', function(e) {
if (e.content.indexOf('<img ') == 0)
{
setTimeout(function(){ tinymce.activeEditor.execCommand('mceAutoResize'); }, 1000);
}
})
}
});
I have an idea but My problem didn't have this, but it has already solved many image problem.
ini_set("memory_limit","120M");
It has to be placed in jbimages\ci\system\libraries\Upload.php file
Above this line:
#copy($this->file_temp, $this->upload_path.$this->file_name);
It may solve your problem.
How to include iframe coding in joomla
Joomla has TinyMCE as default Editor. It don't allow iframe tag.
You can enable iframe tag in Editor.
Go to > Extensions > Plugins > TinyMCE
Paste iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]
in Extended Valid Elements
Now go back to your editor, open html view and paste your iframe code. It will save it.
Edit HTML in the editor and add the <iframe> tag there.
I needed to paste an image in a frame, so after i understood that i can't use frames i paste this code, cause i needed scroller.
<p style="overflow:scroll;width:700px;"><img style="border: 1px solid #000000;" src="/images/img.png" alt="img"></p>
If you need to paste a video from youtube it is better to hide the video under a image (screensho for example) giving the link to video. not iframe nor embed doesn't work in joomla.
hope that help)