Froala Editor doesn't work - javascript

I use froala editor first time and now I have problems. On the first page froala works very good, but on the second page - editor doesn't work. When I click on toolbar buttons I have noting. Text length always equals zero and placeholder doesn't hide. Please Help me to fix this problem.
<script src="/public/bower_components/froala-wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>
And.
$("#page_x2j1").froalaEditor();

I ended up using this reference to do the initialization on load and everything worked great.
$.getScript("js/froala_editor.pkgd.min.js", function () {

It looks like there might be a conflict with something else on the page. It would worth checking if there aren't other JS libraries which are preventing the editor editor toolbar to work correctly.

Related

jquery conflict with hoverIntent

I have a site that has been working fine however recently we added a form to a specific page. This form was built by someone else and uses javascript/jQuery to process.
Upon adding this form it has broken most of the other jquery on the page, namely the dropdown menu plugin.
This is only happening on the below page:
http://agovo.co.uk/crm-and-sales/crm-sales/bpmonline/
The console error is:
TypeError: $(...).hoverIntent is not a function
But I noticed it has broken the slide out box to the right of the site. and these errors do not happen on other pages.
I realise there is jquery loaded twice, one if by WP and the other is manually, if i remove the manually added one it breaks everything so im not sure what the jquery one is doing!
Any advice? Thanks
You're loading two different versions of jQuery on your page (1.11.1 first, and then 1.10.2).
Every script tag that contains a plugin that occurs after the first version, but before the second version, will be "overwritten" (and you'll see the error you are getting above).
Please only ever include one version of jQuery on your page.
I added no conflict to the form jQuery and it works fine now.

foundation section tabs not working properly

I am having an issue with foundation 4 section tabs. I copy pasted the example code to my local and tested it and it doesnt show up.
I also modified it and added some height elements to make it display properly but still I can only view on tab and clicking it doesnt actually open up the content.
I have included jquery foundation.css and foundation.min.js and also zepto.js without any luck.
If anyone could tell me what i might be doing wrong or if there is an issue with the framework that would be great.
Thanks.
Please close this.
I fixed the problem by adding a foundation at document load. :)
Cheers hope this helps someone in need.
$(document).foundation(); Thats the code I added right at the start of document.ready.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

How to disable TinyMCE confirm dialog

Does anyone know how to disable TinyMCE alerts, and confirms. The confirm in talking about says:
This page is asking you to confirm
that you want to leave - data you have
entered may not be saved Leave Page -
Stay on Page
I've written my own stuff that detects if the page data has been change so I don;t want TinyMCE to worry. I found the function in the TinyMCE source so I'm about to overwrite it but I want to know if anyone knows a better way to accomplish this.
Thanks.
To remove the message, just disable the autosave plugin, that's what adds the onunload prompt.
Simply don't load the plugin in your TinyMCE initialization script.
As per a request I'm adding this here to show my solution which has worked great:
My solution thanks to a link provided by Madmartigan, on the TinyMCE forum. Getting rid of the autosave plugin did not work, I ended up writing this:
window.onbeforeunload = function() {};
And it got rid of the popup. Looks like it could be a bug with TinyMCE, since the init code I have I copied off their demo.
I set it as a param when initializing (autosave_ask_before_unload):
tinymce.init({
mode: 'textareas',
menubar: false,
statusbar: false,
language: 'sv_SE',
autosave_ask_before_unload: false,
...
If the problem you're having is just that the content isn't actually dirty, maybe because you replaced it programmatically, you can explicitly mark the editor as not dirty like this:
tinyMCE.activeEditor.isNotDirty = true
Neither of the above answers worked for me with Joomla 3.3.2 and JCE 2.5.11. Although this did work:
Inside the file -
components/com_jce/editor/tiny_mce/plugins/autosave/editor_plugin.js,
I changed
editor.getParam("autosave_ask_before_unload",TRUE)
to
editor.getParam("autosave_ask_before_unload",FALSE)
Apparently on autosave unload, it prompts the confirm box. This disables the unload confirm completely. From what I tested, it worked in IE, Chrome, and FF.

Div not properly hiding in IE

I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.
You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..
Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.
Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.
Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.
try
$("#divToHide").css('display:none');

Categories