I'm playing around with MCE, I was wondering if there was the possibility of letting the user enter source code into a post, much like the 101010 button in this form.
You'll need to add plugins: "code" to the initialization code as follows:
tinymce.init({
plugins: "code"
});
https://www.tinymce.com/docs/plugins/code/
The option exists. One of the optional buttons has 'html' written on it and can be used to go into HTML editing mode. You can see it in this full featured example - 6 places left of the top-right corner.
Try 'code' plugin along with tinymce.min.js
e.g.
<script src="~/Scripts/tinymce/tinymce.min.js"></script>
<script src="~/Scripts/tinymce/plugins/code/plugin.min.js"></script>
<script>
tinymce.init({
selector: 'textarea',
plugins: "code",
toolbar: "code" });
</script>
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.
I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.
I'm hoping its just something extremely simple I've missed, but it's still doing my head in.
I really appreciate any help I can get!
Thanks :)
If you're using "ajax" content type, you need to make sure that you've got only one root node.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type
E.g., this is correct contents of ajax file:
<div>
html content
<script src="something.js"></script>
</div>
Incorrect:
<script src="something.js"></script>
<div>
html content
</div>
Incorrect:
<div>
html content
</div>
<div>Another content</div>
Also make sure that closeOnContentClick is set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick
If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).
I can't reply yet (too low rep..) so adding it like this:
seems that this also counts for type: 'inline'. Safe to always wrap content by a div..
$.magnificPopup.open({
items: {
src: '<div>'+ html +'</div>'
},
type: 'inline',
closeOnContentClick: false
}, 0);
I had the same error.
Turned out to be a dumb mistake from my side, i had the same class on my opener and my inline div.
Open
<div id="popup" class="dialog mfp-hide"></div>
Of course they needed to be different classes like so:
Open
<div id="popup" class="dialog-box mfp-hide"></div>
Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34
Add modal:true in the magnificPopup:
$('.your_class').magnificPopup({
type: 'ajax',
modal:true
});
I have got problem with TinyMCE when TinyMCE is in Pop-up. Look on my explanation of this problem.
This code is in my JSON pop-up
<!-- TinyMCE -->
<script type="text/javascript" src="../../Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 80%">
Pełny opis...
</textarea>
<br />
When pop-up show first time you can see this editor
When pop-up show second time you can see this editor
In my opinion problem is here (only once is working this JS)
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
In the second case you see the textarea html element. This is probably because of the fact that you didn't shut down tinymce correctly when closing the first pop-up.
What happened behind the curtain is that the html structures are gone, but tinymce still got the editor instance registred and won't open up a new one with the same id when you reopen the pop-up. Solution here is to shut down tinymce when closing the pop-up.
To shut down an editor instance use:
tinymce.execCommand('mceRemoveControl',true,'your_editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'your_editor_id');
Tinymce takes as editor id the id of the source html element (your textarea). In case there is none "content" is the default.
I am using jqueryui api's from google, but the items I am using are rendering improperly. Here is my referencing:
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
I literally just copy-pasted the code for the modal form dialogue, found here: http://jqueryui.com/demos/dialog/#modal-form
And my datepicker code is:
$(document).ready( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "MM d, yy"
}
);
});
However, these items rending without any discernible background, as shown in the screenshots. I have been desperately trying to figure out why. Thanks.
Are you using a jQuery theme CSS? The jQueryUI demo page is. It's located here: http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css
You need to reference the jquery UI CSS files, you can get them as a theme from the jquery UI website.
You should also look at this and this.
has anyone fire up lightbox on pageload using Joomla 1.5?
I want to build a plugin to fire Lightbox of an article when page load, but have no idea hw to do that
It is actually quite simple, when you know what you are doing.
Below is a sample code that is native to Joomla 1.5 using Mootools 1.1 and modal behavior.
If you want to use only SlimBox, then you will have to figure things out on your own. All the SlimBoxes are little different...
In order for us to open up a modal window we need to do 2 things.
Fist, include JavaScript libraries and stylesheets. In our case we will include modal.js
<?php
// You do know need to include mootools explicitly
// JHTML::_('behavior.modal') will include mootools library.
JHTML::_('behavior.modal');
?>
Second, include JavaScript to open the modal window. IF you are including JS from PHP, better use JFactory::getDocument()->addScriptDeclaration("// JavaScript Goes Here"); to include the script into the HEAD of the document.
<script type="text/javascript">
// Use either domready or load event to open the modalbox
window.addEvent('domready', function(){
var myAnchor = new Element('a', {
'href': 'http://www.google.com',
'class': 'myClass',
'rel' : "{handler: 'iframe', size: {x: 800, y: 550}}"
});
SqueezeBox.fromElement(myAnchor);
});
</script>
Another scenario is when you have an existing modal link on the page and you want to display the modal on page load. Use:
window.addEvent('domready', function(){
SqueezeBox.fromElement(document.getElementById('modalID'));
});
Where link exists:
<a class="modal" name="modalID" id="modalID" rel="{handler: 'iframe', size: {x: 400, y: 400}}" href="index.php?option=com_mycomponent&task=mytask&tmpl=component">Link Text</a>"
This display the modal onload and has link to reopen modal