Froala VUE v3 not showing toolbar buttons - javascript

I have updated the Froala Vue plugin to the last version 3.0.0-rc.2-1 and there is something weird going on. I only see just few buttons on the toolbar when I should see them all.
See screenshot:
In addition there isn't even the quickInsertButtons when creating a new line.
I have a configuration with many things setup from the previous version, I tried to delete it and leave just the plain editor with everything on default but the result is the screenshot I have attached. So it is not my config (which worked perfectly fine on the previous version), but the new Vue version of it. I'm saying the Vue version because the regular Froala version (without VUE) is working properly.
HERE A SANDBOX THAT SHOWS THE PROBLEM:
https://codesandbox.io/s/vue-froala-s6lie
On the demo, in App.vue see the buttons enabled on the toolbar and the ones that are actually shown on the editor.

Related

TinyMCE paste plugin on IE 11 on paste, pasting %%MCEPASTEBIN%% instead of the actual text and getting stack overflown

I am using tinyMCE v5.5.1 with paste plugin v5.6.2. On pasting anything in the tinyMCE editor in IE11, it gets stack overflown and pastes %%MCEPASTEBIN%% until the browser stops responding. It works fine on Chrome, firefox etc.
There was already a github issue created for problem similar to this https://github.com/tinymce/tinymce/issues/4974 and the PR seems to have been merged but I'm still getting the same issue.
Without the paste plugin everything works fine, but I need the paste_postprocess functionality being provided by paste plugin.
Does anyone know how to fix it?
It is not supported to mix the core editor from one version (5.5.1) and a plugin from a different version (5.6.2). They are not tested in that fashion and there is no guarantee that they will ever work together in this fashion.
If you wish to use the paste plugin from 5.6.2 you need to update the entire editor to 5.6.2 not just one plugin.
If you test this on TinyMCE Fiddle using 5.6.2 in its entirety do you still get this issue?
I would also note TinyMCE is now at 5.7 so if you are doing an update it would make sense to move to the latest TinyMCE release.

Tooltip inconsistently loads

I'm working on fixing a bug on a web page created in .NET that integrates jQuery UI and uses it to replace the default tooltips generated by the browser.
These tooltips occasionally render in code, as you can see below. Sometimes the tooltip will not render (only when the mouse goes to the center of the button) and then the title attribute will not return to the link element.
This .gif should help illustrate my problem clearly:
I understand why the title element is being removed. It is mentioned by jQuery on their own web page stating that this behavior is expected so that browsers will not render their own versions of tooltips.
The behavior I am confused about is why occasionally the tooltip will not show, and as a result the title attribute is stripped off of my link element.
Even after exploring the jQuery-UI.js source code I still don't understand why the button.hover() doesn't always create the tooltip.
Thanks for your help.

Visual studio/asp.net ignoring my javascript changes and creating a [dynamic] js file

I'm trying to learn asp.net and javascript following this tutorial.
I have it working fine but wanted to experiment and try different things, I noticed that whenever I change quiz-controller.cs visual studio seems to ignore my changes and when I run the app it creates a new tab with 'quiz-controller.js [dynamic]' in the title.
This happens only when I change the quiz-controller.js file, the rest of the project and code is straight out of the tutorial, for example if I change line 16 to be '$scope.title = "testing"' and run the app with a breakpoint on the line visual studio creates a 'quiz-controller.js [dynamic]' tab and places the breakpoint there, with my changes reverted.

Uncaught TypeError: Cannot set property 'isNotDirty' of null WordPress error

I am having an issue with my WordPress installation. I am hoping some people familiar with WordPress can help me out.
I am trying to add custom CSS using the Visual Composer plugin but when I click save after entering the CSS it does not do anything.
If I delete everything and keep it as it was then it allows the save button to work. I have included the error in the console below.
After researching this a little bit I see that the isNotDirty property is part of tinyMCE. It detects if the CSS stored in the database has changed in the window.
To troubleshoot I have uninstalled all the plugins and reinstalled them. I have restored a previous known working database but am still getting the error. Any ideas on where to look next? I would have thought reinstalling visual composer would have corrected the issue but apparently not.
Here is some info
Here is another link with more info
Uncaught TypeError: Cannot set property 'isNotDirty' of null composer-view.js?ver=4.2.2:293
vc.post_custom_css_block_view.Backbone.View.extend.setAlertOnDataChange composer-view.js?ver=4.2.2:293
vc.post_custom_css_block_view.Backbone.View.extend.save composer-view.js?ver=4.2.2:277
n.event.dispatch load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2,farbtastic&ver=3.9.1:3
r.handle load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2,farbtastic&ver=3.9.1:3
UPDATE:
I have installed a fresh copy of the theme on a different virtual host and it seems to be working fine on there. I noticed that the working version has one extra line of HTML which is listed below. The non working version does not have this.
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none;"></ul>
I changed the themes on the non-working version and it still does not work.
UPDATE:
Something very strange happened. I am always using the backend editor, so I decided I would try out the frontend editor to see if I could add custom CSS. Sure enough it allows you to do it and I was able to save the custom CSS. So I went back into backend editor mode and now all of a sudden the custom CSS in the backend is working.
I experience this issue on one of my Wordpress projects. I managed to fix it by taking the following steps:
FTP to '/wp-content/plugins/js_composer/assets/js/backend'
Edit 'composer-view.js'
Locate the following lines of code and remove them:
(line 277 for me; may differ for you)
this.setAlertOnDataChange();
(line 291-295 for me; may differ for you)
setAlertOnDataChange: function() {
if(vc.saved_custom_css !== this.$editor.val() && window.tinymce) {
window.tinymce.get('content').isNotDirty = false;
}
}
Save your changes to 'composer-view.js' but keep the file open as you'll need to undo these changes in a moment...
Go back over to WordPress and refresh, making sure 'composer-view.js' in particular is refreshed and not cached in your browser, and try now to click the previously dead 'Save' button in the visual composer Custom CSS editor
It should now work so make some changes (when I did it the only change I made was to remove the last line of CSS I added before the thing became unresponsive in the first place but perhaps any change will be accepted I don't know?...)
Now, if everything is working as usual again, go back to 'composer-view.js' and undo the changes you made (i.e. put the above lines of code back in).
Everything should now work as it did before – or at least it did for me.

Fabric.js makes jQuery script fail on Chrome

I use Fabric.js to make a product customizer.
To get an interface with other interactions, I use jQuery. On Firefox everything works fine, but on Chrome, the jQuery part fails. No error is displayed.
I use other javascript scripts on this same page (Tinymce, jQuery Form Plugin). But I made a first debug and if I do not load Fabricjs on the page, the jQuery part executes well.
You will see other plugins loaded, it's from the CMS we use.
The jQuery* part is the one I have problems with. It is the one handling the three tabs on the right part of the page (on click content under them should change).
I try to make a JSFiddle but the problem doesn't appear, so here is the page :
page
You can login with:
Name: demo
Password: demo
Thank you :)
EDIT : I have found a way to avoid the problem : I comment the ""Click" event proxy" in Fabric.js file. This redefinition seems to be in conflict with jQuery.

Categories