I have included a plugin here, to include code snippets on my site using CKEditor. With this, I found that people have problems with CKEditor dialog boxes and Bootstrap's modal window. Any dialog box opened isn't focused on, and text can't be entered.
A solution was found here. This fixes my issues with other dialog boxes, but not the one that opens with this pre tag plugin. Does anyone have any advice to get code snippets to work properly in CKEditor and Bootstrap?
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
The solution was adding the condition
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
now it works! Hopefully that helps anybody with this same issue.
Related
I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this
As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.
I'm trying to open the dialog box to a custom plugin via a doubleclick on a placeholder.
editor.on('doubleclick',
function (event) {
var element = event.data.element;
if (element.is('div')) {
event.data.dialog = 'sharedcontent';
}
console.log('clicked!');
});
Here is the doubleclick function I'm using, and it is currently registering.
So I feel there is a referencing issue with the actual dialog box.
Has anyone else run into this issue and know a way around it ?
Thanks in advance.
Error was a reference issue, renamed the reference and now the dialog box appears
I have the following form:
Whenever the user clicks on 'Don't have a Paypal account?', I want to display another form within the modal.
However, after displaying the hidden DIV and scrolling the modal, the background fade will scroll as well.
My jQuery code:
var cardForm = $('#card-form');
cardForm.hide();
$("#display-card-form").click(function (e) {
cardForm.show();
e.preventDefault();
});
If possible, upgrade from v3.3.2 to v3.3.4. This issue will be resolved.
I attempted an example first in 3.3.4, as that is what I am on. Once you specified you were on 3.3.2, I downgraded and saw your issue. This was a bug they fixed in the latest release (#15881).
Hope this helps.
UPDATE #2: I've implemented a button and UI Bootstrap and got the menu functioning without Angular Routing taking over, however, I can't get the menu to collapse after selecting a menu item and rerouting.
UPDATE: As per the suggestion, I've updated the above listener to this (to no effect):
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});
All of the Angular code for this app seems to be in js/compiled.min.js - if something is wrong, surely it'd start here, right?
I have inherited some work from a previous developer that has some funky code which is causing me a bit of a headache. If you visit http://www.executionists.com/#/ in Chrome and change the viewport to a mobile device, you'll see that the menu doesn't work as it does when it's in a larger viewport.
When you click the menu button Angular tries to route the page which of course results in a 404. I cannot for the life of me figure out why it's trying to route and how to prevent it. Things that I've tried.
Using UI Bootstrap in the manner listed here (under Collapse section): http://angular-ui.github.io/bootstrap/
One thing to note is that I had to put the following fix in place to fix another bug where angular routing was not allowing for browser history to function. A common problem, I have discovered. When I put the fix in place, routing and history function as desired for the entire site, however, I am suspicious of this being the cause of my mobile-friendly collapsible menu bug. The fix:
// This is required for links to work properly with the browser history
$('[ng-app]').on('click', 'a', function() {
window.location.href = $(this).attr('href');
});
I don't know what to do about this or even how to best diagnose the issue.
You are targeting all links with that listener, perhaps be more specific:
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});
Update: After posting on the TinyMCE forum (something I should have done before offering the bounty) the primary issue may be solved, but I'm still very much open to anything regarding the other issues of how to disable the resizable behavior (number 2 and 3 at the end of the post).
I am having trouble saving content with TinyMCE in IE8 (not other versions). In IE, certain elements in the editor have handles in each corner and draggable "borders", and when you focus in to start editing, a striped border may appear:
Problem:
If I submit the form while the thick border is still visible (state 3 in the image), the form will not save the content. I have to click into another area of the editor to make all the borders disappear, and then submit the form.
I'm Using the TinyMCE 3.4.6 jQuery package, I don't get this behavior in other browsers.
Update:
I've narrowed down the cause of the issue quite a bit and found a few things:
The problem occurs with or without the jQuery build, and does not depend on which tinymce plugins are in use.
The thicker "border" only seems to appear when there is a (min-)height/width applied to the element, either declared inline or from external CSS.
Using IETester, I was getting errors that claim 'length' is null or not an object when focus from the active element is lost; i.e. when you click anywhere outside the TinyMCE editor.
I did not see this error in a true IE8 install (something I currently can not access), however: this makes sense somewhat, considering the problem and workaround stated above. I had to hit submit twice and dismiss the warnings to get the form to post in IETester.
These borders and handles will actually extend outside of the editor/iframe:
I created a live bare-bones demo, here is the content of it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('textarea.tinymce').tinymce({
script_url : 'tiny_mce/tiny_mce.js',
content_css : 'test.css'
});
});
</script>
<form action="" method="post">
<textarea class="tinymce" name="content"><p>Testing</p></textarea>
<button type="submit">Submit</button>
</form>
/* Content of test.css */
p {
min-height: 24px; /* this line makes the handles appear */
background-color: #f00;
color: #fff;
}
How to reproduce:
Open the demo in IE8
Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.
Click on the element again, now the thick border appears and text can be edited.
Type a few characters, then click the submit button. The update will not be sent with the $_POST data. If you were to click another area inside the editor, removing the thick border, the data would be sent normally.
Questions/Issues:
Important: How can I get the form to post the edited text without requiring a workaround from the user?
Update: This seems to be resolved in a recent commit from the TinyMCE lead developer. I still have been unable to test on a real IE8 install, but this worked and silenced the errors in IETester.
Less important: Is there any way to prevent or remove the handles and draggable edges completely? I'm guessing this is a concern with IE's implementation of contentEditable and not so much TinyMCE, and may not even be the cause of the problem.
Extra: How can I prevent these handles from extending outside the editor?
Question 2 is due to the IE implementation of contentEditable, This is a ticket at their connect site requesting to fix it https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable (login required)
I don't know of any solution for Question 3, except to wait for a new IE. In the latest IE10 under windows8 they claim that it's fixed https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element (login required), but their solution is to hide the resizing handles always. Well, there's a solution and it's to avoid using any style while you're editing that forces the internal hasLayout flag for IE
alright this is a weird IE8 bug. I've found a workaround but still the tinymce team should fix this.
I've found out that before submitting the form you could set the content of the textarea to the content of the textarea... Sounds weird but calling the .html() triggers a tinymce event that returns the correct html.
$("button").click(function() {
$("textarea").html($("textarea").html());
});
There is apparently no way you can fix the second issue.
Here is an articles that explains it quite well: You can't remove those unless you remove the property that made them appear.
http://www.satzansatz.de/cssd/onhavinglayout.html
(search for the word "remove")
You can still improve a bit by using this on the container (the element with contenteditable):
function fixIE( editableContainer ) {
editableContainer.onmousedown = function ( e ) {
e = e || event;
( e.target || e.srcElement ).focus( );
};
editableContainer.onresizestart = function ( e ) {
e = e || event;
if ( e.stopPropagation ) {
e.stopPropagation( );
}
e.cancelBubble = true;
if ( e.preventDefault ) {
e.preventDefault( );
}
e.returnValue = false;
return false;
};
}
(Your element doesn't have to be a div)
The onmousedown will allow you to click only once to get to the state where you can write.
The onresizestart will prevent resizing.
if you give it hasLayout, it should work. try zoom:1;