CKEditor Plugin Causes Editor to be Hidden - javascript

I'm attempting to use CKeditor on a website, and I need to be able to click to go to links within the editor itself. As this is not possible with the stock editor, I attempted to install the plugin at the following link: https://github.com/mlewand/ckeditor-plugin-openlink
Having downloaded the plugin and tried to install it, when I activate the plugin in config.js the editor on the site page now has the attribute style="visibility:hidden", and when I manually change this to visible via the browser debugger, it shows a default texture rather than the CKeditor editor. It's possible my method of installation of the plugin is to blame, as I'm finding no other instances of people having this issue. The download of the plugin contains a folder "icons" and a folder "lang", as well as plugin.js (the plugin file itself) and a readme.
To install, I simply pasted the relevant contents of the lang files into their respective counterparts in the main CKeditor fileset, and for the time being I ignored the icons folder, as it simply contains the image file for the tool icon; I also commented out the code which calls for this image so as not to have conflict. I then moved plugin.js into the plugins folder within the CKeditor fileset, within its own subfolder plugin as with the stock plugins already present. I then added the lines in the config called for by the readme. I finally added to the config
config.extraPlugins = 'plugin'; to enable the plugin. Once I updated all files on the server, it became clear that activating the plugin caused the editor to disappear as I mentioned. If anyone knows why this might be or what I may have done to interfere with the files incorrectly, I'd greatly appreciate it. Currently I'm unsure as to what I could have done better during installation. I can elaborate further if I've been at all unclear. Thank you.
I'll add that here(plugin activation in ckeditor) appears to be a similar issue, although the answer given and the specific issue don't quite seem to apply. If they do, feel free to mark this as a duplicate and I apologize for the redundancy.
EDIT: It appears that the reference added in config.js and the plugin folder name needed to correspond to the name in plugin.js, as I've now discovered.

Important to note that plugin name in plugin.js, name of plugin folder, and reference in config.js must all correspond.

Related

Drupal - Where is located config.js of CKEditor?

I am trying to find the configuration file of CKEditor (v8.5.3) so I can remove automatical stripping of classes from div element using config.extraAllowedContent = 'div(*)';
I have found some threads where are people referencing the config.js in the root file of CKEditor but I cant find it in there. Any idea where I can found this configuration file?
Thank you for response.
I'm not a Drupal guy but from what I have checked, in D8 you can set the configuration using hook_editor_js_settings_alter. Please see:
https://api.drupal.org/api/drupal/core%21modules%21editor%21editor.api.php/function/hook_editor_js_settings_alter/8.5.x
https://drupal.stackexchange.com/questions/186102/drupal-8-ckeditor-behaves-ltr-in-an-rtl-site/186303#186303
When it comes to filtering HTML however you should, in your Drupal Admin Panel, go to Configuration -> Content Authoring (Text formats and editors). There you can either configure "Allowed HTML tags" or simply uncheck "Limit allowed HTML tags and correct faulty HTML" checkbox what will allow everything.
If you wish to configure your HTML here is IMO a nice link showing the filter syntax: https://www.drupal.org/node/2571349
I've ran a file search from the command line, and can confirm that nowhere does the file config.js exist (using v8.6.x).
I found another case of an admin losing classes on DIVs in CKEditor (though in version 8.2.x), and the only way she found to remedy that, was to create a new text format at /admin/config/content/formats. Then, including in allowed HTML tags:
<div class>
Her full solution can be found here. It includes some pointers as to which options to select when creating the new text format.

Remove specific Javascript code that causes high CPU usage from Tumblr theme

recently I decided to create a Tumblr using this theme
I'm a Firefox user, and I noticed that this theme slows down the browser a lot. After some investingation and asking, the culprit seems to be the possibility to add an animated particle background that, even when disable, causes high cpu usage.
This particle function is inside a script called "s.js", that contains other part of the theme.
Is there any way to clean up the code from everything related to this particle background, and still leave the theme functional?
Thanks
OK
Option 1:
Search for all of the libraries that are being called from the js file you linked to s.js apart from ParticleJS.
Images Loaded: https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js
Isotope: https://unpkg.com/isotope-layout#3.0.4/dist/isotope.pkgd.min.js
Infinite Scroll: https://unpkg.com/infinite-scroll#3.0.2/dist/infinite-scroll.pkgd.min.js
Fitvid: https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
Photoset grid: https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js
Magnific Popup: https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
Caveat, these are specific versions of each file and you could run into compatibility issues, if you need to link to a specific version.
Combine all the code from these files into a single file, then you could run it through a minifier: https://javascript-minifier.com/
For this solution to work you also need somewhere to host the file somewhere.
Option 2:
Link to all of the above files individually in your template. For example before the closing <body> tag you would need to add
<script type="text/javascript" src="https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js"></script>
... then add each of the other scripts. There may be a dependency order to these also, hopefully they are the same as in the header of the s.js file.
The drawback with this is instead of making a single http request to return a single js file, the template will request 6 separate js files (so this might be slower than the current system you have now).
Option 3:
If you can't host the file somewhere, you would have to actually copy the code from each js file into your template.

jquery ui theme creating custom jqueryui.js file

When I download a jquery ui theme via themeroller I get a jquery-ui-1.10.4.custom.js file instead of the standard jquery-ui-1.10.4.js file that comes with a regular jquery ui download.
I am trying to understand what is changing in jqueryui.js file from theme download to download. I was under the impression that nothing should change the .js file and that themes were just .css. Is this not the case?
I did not apply any customizations to the theme I downloaded (starter theme) and then added just the .css to a page with the regular jqueryui linked up and the page didn't work. When I tried with other themes though such as the hot-sneaks I did not have this problem.
I am asking this question because I would like to link to the jqueryui on a cdn and I just want to use the vanilla version. Is this possible?
Thank you for your help.
I don't think there is anything different other than the name. You could try running them though a compare tool to see if there are any differences.
Here is an online Comparer http://www.diffnow.com/

javascript in Joomla custom module

I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos
I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps

Trigger TinyMce File uload

I am using TinYMce WYSIWYG editor, It is working fine. I am using OpenSource product without MCFileManager, instead files/images are uploaded via TinyBrowser which is included.
Now I need to trigger this pop-up window where I can browse files to upload from element.
Is there any way to do that via upload files?
P.S Maybe there is a way to get that MCFileManager for free or some kind of license?
You can find the available licences and prices here, you won't get it for free (at least not leagaly).
I never used TinyBrowser, but i am sure you could write your own Tinymce plugin and include your own button to trigger the TinyBrowser.

Categories