How to Suppress Image Description Dialog in TinyMCE 3? - javascript

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.

Related

Content losing and Full version CKEditor 5

Please share your experience about using CKEditor 5.
Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
https://ckeditor.com/ckeditor-4/download/
Thanks for you time!
Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
CKEditor 5, unlike CKEditor 4, implements a custom data model. This means that every piece of content that you load into the editor needs to be converted to the model and then rendered back to the view.
Since conversion is done by plugins and is explicit (i.e. a feature tells exactly what HTML elements and/or attributes it converts to what model nodes) a piece of HTML which isn't covered by any of the loaded converters is simply dropped.
This means that if you want all of HTML5 to be supported, you need to write plugins to support them. Once you do that, CKEditor 5 won't filter anything out.
You can read more in the CKEditor 5 Framework documentation.
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
Short note about CKEditor 4 – "full" is not "all". The "full" preset has a misleading name unfortunately. There are far more CKEditor 4 plugins than in "full" and you can browse them in the Addons repo.
As for CKEditor 5, existing builds come with a predefined set of features which reflect the use cases described by Editor Recommendations.
There are not many more plugins available right now because the project is in the early alpha version. However, you can check the official list of features and browse npm to find more.
If you want to add or remove plugins from your editor, please read the Creating custom builds guide.

Disable ckeditor context menu in version 4.4.6

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)

Selenium RC (Python) only sends text to one tinymce control on page

I'm writing some automated test scripts using Python (2.7) with Selenium RC (2.42.1) for a page that contains multiple tinymce controls (2 to be precise). The code that I've been using up to date looks like the following:
sel.focus( field_values[ id_value ] + "_ifr" )
sel.get_eval( "window.parent.tinyMCE.activeEditor.setContent('<p>" +
field_values[ test_data ] + "</p>');" )
To date, this code has worked fine for me, but after a recent build, I have been having issues when there are multiple copies of the tinymce control on the page. The setContent() function seems to always want to send the text to the second tinymce control, regardless of which ID I set the focus() to. And as a wonderful caveat, if I shrink my window frame so only the first tinymce control is visible on the screen, then only the first tinymce control gets sent any text.
My going theory right now is that the .activeEditor is not pointing to the right tinymce control when I set my content. It seems to always point to the last visible tinymce that it sees on the screen so I'm trying to find a way to force the focus to the appropriate tinymce control.
My question is, is there a better way to force the focus to the correct tinymce control using Python Selenium? I've tried using sel.click("tinymce") and sel.type_keys("tinymce","") after setting the focus(), but they don't seem to work.
I confirmed with the development team that no changes were made to the tinymce control, and I'm using the same Selenium RC version as always.
And I don't know if this will help, but there has been a push to move our automated testing over to a C# framework. We had the same issue as with the Python code, but we came up with a solution for that:
driver.SwitchTo().Frame(iWeb);
// This was added to ensure the tinymce control edit area has focus. This is necessary for pages that have multiple tinymce controls.
IWebElement body = driver.FindElement( By.TagName( "body" ) );
body.SendKeys( "" );
driver.Execute("window.parent.tinyMCE.activeEditor.setContent('" + Test_Data + "');");
driver.SwitchTo().DefaultContent();
I want to be able to do the same thing, but with the Python code.
I finally found the reason why I could no longer handle multiple instances of TinyMCE controls on the same page. I recently had to rebuild my machine due to hardware problems, and in the process, I updated my Firefox browser to the latest ESR release (24.7.0). I rolled back to v24.2.0 with no issues. It seems there must have been a security update that was causing the unusual behaviour with my automated code. I'm still researching what updates were made and if it's actually possible to write to multiple TinyMCE's with the latest ESR version of Firefox.

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.

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

Categories