I've just upgraded my TinyMCE to version 4, which seems to have a tooltip by default.
How can I disable/hide the tooltip that appears on mouse-over on any tool-bar item?
I've been searching for any possible solution, but so far, I have found nothing in the official documentation. What I found in the development tinymce.js file (uncompressed version) is that tooltip is hardcoded and set to be included every time.
I tried different things to disable the tooltip, by so far, the easiest and safest way I came up with is by using CSS, include this bit of code in the main css file to hide the tooltip forever:
.mce-widget.mce-tooltip {
display: none !important;
}
This solution avoids using Javascript/jQuery, and also avoids modifying the source file tinymce.js.
I fiddled around and found a dynamic solution using JQuery and tinyMCE 4.x. This solution allows you to enable/disable tooltips inside tinyMCE:
tinymce.init({
...
init_instance_callback : function() {
$("head").append("<style> .mce-tooltip{ display: none; } </style>");
},
...
It does change the class mce-tooltip after tinyMCE is initialised (init_instance_callback). Set 'display: block;' if you want to display the tooltips again. Its not the nicest solution, I know, but it works.
You can access the button instance and set its rendered state to false:
var controlIds = editor.theme.panel.rootControl.controlIdLookup;
for (let i in controlIds) {
if (controlIds[i].tooltip) {
controlIds[i].tooltip().state.set('rendered', false);
}
}
Related
I'm using Confluence 5.1 and I'd like to hide the sidebar - but only on a few pages. I only found a JQuery based solution which does not seem to work right in all browsers. It seems to hide the sidebar completely regardless of the default settings.
I found a CSS based solution for this after searching around the web for a long time.
Basically, all you need to do is add a CSS macro to the page which shouldn't have a sidebar containing the code below.
CSS Stylesheet macro
#splitter-content {
width: 100% !important;
left: 0px !important;
}
.vsplitbar{
visibility: hidden;
}
This CSS block spans the page content over the whole page width and removes the left margin normally reserved for the sidebar. It also hides the split bar which is normally used to change the sidebar size.
The nice thing is that you don't have to mess with cookies this way or make sure the sidebar is turned back on on the following pages.
There was a Confluence bug filed for this and it was rejected* due to a desire to have a more simplified configuration system. In that bug, a workaround is proposed.
Add this to a <script> stanza at the bottom of the <head> tag in your custom HTML:
AJS.toInit(function(){
if (AJS.$("div.ia-fixed-sidebar").width() > 55){
AJS.Confluence.Sidebar.toggle();
}
});
Since I don't have that level of control, I opted for a Greasemonkey script instead. This only affects me, but it does solve my problem (I just have to make sure I don't take too much advantage of the extra width this affords me). Here is a sample userscript for this, also posted to Github [install]
// ==UserScript==
// #name Confluence - Hide sidebar
// #namespace https://github.com/adamhotep
// #description Collapse the sidebar upon page load
// #include https://confluence.*
// #include http://confluence.*
// #version 1
// #grant none
// #license GPL
// ==/UserScript==
// from https://confluence.atlassian.com/confkb/how-do-i-remove-the-side-bar-in-confluence-5-330796984.html
if (typeof AJS === 'function') {
AJS.toInit(function(){
if (AJS.$("div.ia-fixed-sidebar").width() > 55){
AJS.Confluence.Sidebar.toggle();
}
});
}
This is theme-specific. The above code assumes the default theme and is not guaranteed to work in later versions of Confluence. See the "workaround" link for the code needed for the documentation theme.
* There's also another bug related to a cookie that is supposed to preserve whether or not to show or hide the sidebar. Supposedly, the bug is fixed, but this directly contradicts the first bug linked in this answer, so I can't make sense of it.
I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:
inline: true
to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:
<br data-mce-bogus="1">
but I can't edit that text, or add new text, or do anything at all really with the editor.
I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?
Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:
br[data-mce-bogus="1"] {
display:none;
}
And then strip them out if they make it to the server when the user tries to save.
I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.
Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.
<script>
$(document).ready(function () {
$("#comment").ready(function () {
$("#comment").val("")
})
})
</script>
I add this jquery script in html to solve this bug.
Add this snippet to your CSS file. That would prevent video bogus.
[data-mce-bogus="all"] {
display:none;
}
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/
How do you change the default font type and font size in TinyMCE?
I'm using the advanced skin and I've changed the body, td, pre style in default/content.css but it still doesn't change.
Well, there are several content.css and only one is used to style your editor depending on your configuration settings.
You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like
content_css: "http://localhost/css/my_tiny_styles.css",
and in my_tiny_styles.css or whatever file you choose you use
font-family: myfont1, myfont2, sans-serif;
Here's another way to resolve this problem.
By adding your own custom styles into our CSS file by defining tinymce id.
#tinymce .mceContentBody p {
font-family: your_font_name !important;
}
If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
EDIT:
this is the setup option of the init function as explained here:
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:
setup : function(ed) {
ed.on('init', function(){
$(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
});
}
Note I used jQuery, but can of course be done without it as well.
Here's how to do it without touching CSS or any other codes.
Use the plugin 'TinyMCE Advanced'
Activate it in settings.
More detailed instructions here.