Disable ckeditor context menu in version 4.4.6 - javascript

I am using ckeditor in a Rails4 project. I have tried both the ckeditor gem and the ckeditor_rails gem to provide the ckeditor libraries.
There are multiple posts here by people wanting to remove the ckeditor context menu so that the native browser context menu can be displayed.
This is usually to enable the browser spellchecker to be used rather than the ckeditor paid / advertised spellchecker.
how-to-remove-contextmenu-in-ckeditor-4-3
ckeditor-3-6-3-enable-browser-spellcheck-and-disable-context-menu
how-to-disable-ckeditor-context-menu/20229730#20229730
The third link has the most replies but none of them are universally accepted.
Generally the reply is to remove the contextmenu plugin by placing the following in the ckeditor config.js
config.removePlugins = 'contextmenu';
There is also the suggestion that contextmenu is a dependency on other plugins and different people add a multitude of other plugins to be removed as well.
One helpful post suggests running the following code in the console to establish the dependencies.
$.each(CKEDITOR.plugins, function(k, v){
v.requires && console.log("Plugin '" + k + "' requires: " + v.requires)
})
This seems to work well and suggests that tabletools and liststyle plugin is dependent on contextmenu. So we end up with
config.removePlugins = 'liststyle,tabletools,contextmenu';
Unfortunately this does not disable the context menu in the version of ckeditor that I am using (4.4.6 established by adding alert(CKEDITOR.version) in the config.js)
Finally there is a suggestion to use the following code in config.js
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.editable().addClass('cke_enable_context_menu')
});
There is no suggestion as to how this is meant to disable the context menu but in any case it makes no difference for me.
For me this is a showstopper as the ckeditor context menu hides the browser spelling suggestions and the cut and paste options it contains do not actually work but just bring up the browser dialog.
Your browser security settings don't permit the editor to
automatically execute copying operations. Please use the keyboard for
that (Ctrl/Cmd+C).
In all other aspects ckeditor does seem to be the best functioning editor out there.

In my Drupal 7 environment, loading ckeditor from the CDN, current version is 4.11.4.
The only thing that worked for me after many failed alternatives:
config.removePlugins = 'liststyle,tableselection,tabletools,tableresize,contextmenu';
For convenience, I put this in the module configuration settings -> Advanced -> Custom JavaScript configuration, but in my experience the same result can be achieved in the ckeditor.config.js file in the module folder.
(It's just more likely to get accidentally overwritten there, when updating the module. ... you could also do it by checking the option to use the config.js file in your theme and then adding the line above to that file.)

As simple as that:
CKEDITOR.replace( 'textarea', {
removePlugins: 'contextmenu,tabletools'
} );
If it does not help you, you must include a valid sample to reproduce the issue because something exotic is going on in your setup.

If anyone is looking on how to disable the context menu and have access to the native browser spellchecker in CKEditor:
CKEDITOR.replace( 'editor1', {
removePlugins: 'contextmenu,liststyle,tabletools,tableselection',
disableNativeSpellChecker: false
} );
(tested on CKEditor 4.7.0, standard package)

Related

How to Suppress Image Description Dialog in TinyMCE 3?

We are using Tiny MCE 3 for a tool that is to be used for internal projects only so mandatory alt attribute on image tags is overkill.
When using the Insert/Edit Image dialogue, there is confirm dialogue (see below) that asks if you want to continue without an Image Description.
How do I suppress this dialogue so we can add images quicker (and dirtier)? I have had no luck with Google or the TinyMCE docs on this one.
Note this is for Tiny MCE 3.x, although we may migrate in the near future to 4.0.
You can do one of two things to change this...
Configuration Setting accessibility_warnings:
There is a setting you can put in the configuration that will turn off all accessibility warnings:
tinyMCE.init({
...
accessibility_warnings : false
});
Modify source code of image.js in the advimage plugin
This file has code to check for the alt attribute. In TinyMCE 3.5.10 I see this on line 104:
if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
if (!f.alt.value) {
tinyMCEPopup.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'),
function(s) {
if (s)
t.insertAndClose();
});
return;
}
}
If you comment that out it won't check for the alt attribute anymore. Of course you now have to re-do this change if you install an update to TinyMCE.
As a side note TinyMCE 3 is no longer getting any updates (I work for the company that owns TinyMCE). It would be a really good idea to move to TinyMCE 4 (currently at 4.5.3) as that is the codebase that is getting enhancements at this point.

Code Syntax Highlighting in KeystoneJS TinyMCE Editor

I'm attempting to install a the "codesample" TinyMCE plugin to enable code syntax highlighting in Keystone.js. I added the following line to the keystone.init section of the keystone.js file per the documentation. However, no extra button to enable syntax highlighting appears.
'wysiwyg additional plugins': 'codesample',
'wysiwyg additional options': {
external_plugins: {
'codesample':'/js/tinymce/plugin.min.js'
}
The plugin documentation says that a code highlight button is included as part of the plugin. Since the button did not show up I attempted to force it by adding the following line.
'wysiwyg additional buttons': 'codesample',
No errors are showing up on the console. I'd appreciate any help in getting this or some other form of code syntax highlighting working with KeystoneJS.
You can get the plugin included with TinyMCE working by putting this in your keystone.init function:
'wysiwyg additional plugins': 'codesample',
'wysiwyg additional buttons': 'codesample',
But when I did this, although it got it working, it seemed like you can create code samples, but not edit them, unless you delete & remake them. I tried replacing the TinyMCE version included with keystone (majorVersion:"4",minorVersion:"4.3") with a newer one, as 5.2 and beyond claims to have fixed this issue, but it didn't do me any good.
Perhaps you'd have better luck installing the plugin this way, treating it as an external plugin:
'wysiwyg additional options': {
skin : 'lightgray',
menubar : 'file edit format view insert',
relative_urls: false,
content_css: '/assets/css/styles.min.css',
visualblocks_default_state: true,
external_plugins: {
'tinyvision':'/assets/plugins/tinyvision/build/plugin.min.js'
},
tinyvision: {
source: '/api/images'
}
}
Reference: https://github.com/keystonejs/keystone/issues/1549
Slightly less useful reference: http://keystonejs.com/docs/configuration/#options-ui

TinyMCE stripping javascript from link on visual tab

TinyMCE is removing the javascript from the following link when I use the Visual tab.
Home
The onclick="trackOutboundLink('/home/', 'Home Page', 'link 1'); return false;" code disappears when I go to the Visual tab of TinyMCE. I'm using TinyMCE in the context of Wordpress.
Is possible to use the visual tab of the TinyMCE editor without erasing my javascript code?
TinyMCE editor strips out elements that are not specified as valid. These valid elements are specified during setup of the editor.
I am not familiar with WordPress, but it sounds like you need to install this WordPress plugin to allow advanced configuration of the TinyMCE editor. This would allow you to specify onlick as a valid attribute for the a tag.
Also, take a look at this article I found on wordpress.org. This person seemed to be having a similar issue.
It turns out that I had the wrong editor plugin installed.
I had installed Advanced Editor Tools (previously TinyMCE Advanced) and Advanced TinyMCE Configuration. These are the correct ones.
I also had the Classic Editor plugin installed and this caused the extended_valid_elements settings to be ignored. No doubt any other third-party editor plugin will cause the same problem.
As soon as I deactivated Classic Editor, it worked! :)

primefaces jquery ui tabs

Context: Trying to use jquery ui plugins (tabs and dialog) in a primefaces application directly from javascript (due to a certain requirement).
Problem: Getting 'length undefined' and 'undefined not a function' errors on the calls. More specifically, $("#id").tabs() is throwing the error.
What I did: search in stackoverflow; checked $.fn.* and $.ui.* in the console; surprisingly a lot of ui plugins are available (datepicker, droppable, selectable) but dialog and tabs seem to be missing. $.ui.version is 1.11.3. I tried using outputScript and directly <script> tags to include jquery ui, but none seemed to include these plugins; tried noConflict.
Additional info: It worked at some point intermittently.. not sure what caused it to work and what is preventing it from working now. Spent a lot of time troubleshooting this.
Advance thanks for your time and shall drop additional info if required.
PrimeFaces contains a customized (subset) of the jQuery-UI components. The others have to be added by you. And make sure you use them from a compatible version. Compatible with the jQuery version that PrimeFaces uses.
Including them should be done like you normally would include separate jquery-ui components or jquery-ui compatible ones by normally loading them via a javascript tag

CKEDITOR add plugin to source view

When using the find/replace plugin for ckeditor it is greyed out on the source view. To enable this I have found that you need to add:
modes: { wysiwyg:1, source:1 }
However, i wont lie, im pretty unsure where this should be placed.
It hopefully can be found in this link http://jsfiddle.net/SBmKz/ as it is 384 lines long.
I have tried researching this and have found a few examples of it in other plugins and also how it is done in the ckeditor.js (n.modes={wysiwyg:1,source:1}) but cant seem to get it to work within this plugin.
Many thanks
Find/replace option is created to work on DOM, not on a plain text. That's why it is disabled in source mode. Actually, it would be a completely new feature the find/replace in source mode - especially if it had to omit tags.

Categories