Always visible tinymce toolbar - javascript

I am working on a cms for a smaller company and they want inline editing, my only problem is that they want to have the tinymce toolbar visible at all times, disabled when not in use and active when focus on a field.
So my question is: How can i have a tinymce toolbar that is constantly visible, and disabled when not in use and active when it is?

Related

Trix-editor - how can I add a button to the toolbar to toggle going fullscreen?

I'm using the trix-editor as my wysiwyg editor for a Python Flask app.
It seems to be the easiest editor to use but I'd like to add the option to go full screen with the editor.
I do this currently by toggling fullscreen for the div containing the trix-editor. However, I have a few pages with multiple trix-editors on them, so I'd like to add a button to the trix toolbar to toggle fullscreen rather than having a button outside the editor.
This is purely for cosmetic reasons, the current set up of toggling div to fullscreen does the job.
Is this possible?

Angular material autocomplete does not auto close on document blur

Natural behaviour of an input field when you click on the 'body' of the document, is to blur the element. However with the autocomplete directive on desktop this works, but on mobile it never lets you close the menu unless you pick an item or refresh the page.
I thought this was just my setup, however if you run chrome and emulate an iphone 5 it does not close the autocomplete dropdown list when you click outside it.
Is this possible out of the box?
One option is set your css with rule under:
.md-scroll-mask{
display none
}

Changing Firefox extension icon programmatically

I am building a Firefox extension which communicates with a web service. In my extension, I am required to change the extension icon in the toolbar based on the login status of the user. Is there a way for me to programmatically access the toolbar icon and then change the image for the toolbar icon?
Here is what extensions usually do in such scenario
If it isn't already, style your toolbar button with CSS.
When the state changes, set or remove some attribute on your toolbar button via .setAttribute, e.g. .setAttribute("loggedin", "true"). I recently answered a question about dealing with modifying toolbar buttons no matter if it is visible.
Add new CSS rules defining the style of the button (e.g. a new icon) for when that attribute is set an has a specific value usung regular CSS selectors, e.g. #xulschoolhello-hello-world-button[loggedin="true"] { /* another icon */ }

Why is the focus event not firing inside the CKEditor?

I'm using CKEditor 3.6.5.
In my application there are two text boxes, Ckeditor and then two text boxes respectively. If I using tab stop to navigate the control. when it moves to CKEditor it focusing whole Ckeditor area, but I want it to focus inside the Ckeditor.
How to solve this problem?

Hover text at mouse created from firefox toolbar add-on

I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel

Categories