i use Jodit as wysiwyg editor and have a beginner question.
At initialization of the editor, i want to hide the toolbar.
This works perfect:
var editor = new Jodit('#freitext_oben', {
fullsize: false,
toolbar: false,
editorCssClass: 'editor_freitext'
});
Now i want a custom button which calls a function that toggles the toolbar but i don't know how to set this option.
i need something like
function toggle_toolbar() {
editor.toggleToolbar();
}
But i don't know the exact syntax...
Please help ;-(
So here's a way that I've found to do this:
public ToggleToolbarVisibility()
{
if(!editor.editor.toolbar.container.style.display != "none")
{
editor.toolbar.container.style.display = "none";
}
else
{
editor.toolbar.container.style.display = "";
}
}
Related
My question is similar to leaflet-draw delete button remove "clear all" action but I want to remove save option instead of clear all.
Well, there are no customization provided by draw api to do that. So I have added a custom css to hide it.
Apart from that, we can also customized the plugin as follows :
To change the text :
L.drawLocal.edit.toolbar.actions.clearAll.text = t('Clear');
To overwrite the clear method :
L.EditToolbar.Delete.prototype._enableLayerDelete = function(t) {
me.drawToolbar = this;
(t.layer || t.target || t).on("click", me.clearAllCustom, this)
};
The additional CSS was a good solution for me. I add the code, as it was not provided in the previous answer:
ul.leaflet-draw-actions.leaflet-draw-actions-bottom li a[title="Save changes"],
ul.leaflet-draw-actions.leaflet-draw-actions-bottom li a[title="Cancel editing, discards all changes"] {
display: none;
}
You can retrieve the actions of the EditToolbar via L.EditToolbar.include function and return the actions while not including the save option:
L.EditToolbar.include({
getActions: function (handler) {
var actions = [
{
title: L.drawLocal.edit.toolbar.actions.cancel.title,
text: L.drawLocal.edit.toolbar.actions.cancel.text,
callback: this.disable,
context: this
}
];
if (handler.removeAllLayers) {
actions.push({
title: L.drawLocal.edit.toolbar.actions.clearAll.title,
text: L.drawLocal.edit.toolbar.actions.clearAll.text,
callback: this._clearAllLayers,
context: this
});
}
return actions;
}
});
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
In my Windows 8.1 app I used MessageBox.Show() to popup a message. That is gone in UWP. How can I show a message?
Yup, indeed something like that, the new method is to use the MessageDialog class. You have to create an object of that type. You can also add buttons. It's a bit more complex I think. But you can also use some shortcuts here. To just show a message, use this:
await new MessageDialog("Your message here", "Title of the message dialog").ShowAsync();
To show an simple Yes/No message, you can do it like this:
MessageDialog dialog = new MessageDialog("Yes or no?");
dialog.Commands.Add(new UICommand("Yes", null));
dialog.Commands.Add(new UICommand("No", null));
dialog.DefaultCommandIndex = 0;
dialog.CancelCommandIndex = 1;
var cmd = await dialog.ShowAsync();
if (cmd.Label == "Yes")
{
// do something
}
Take a look at the Windows.UI.Popups.MessageDialog class and try this:
// Create a MessageDialog
var dialog = new MessageDialog("This is my content", "Title");
// If you want to add custom buttons
dialog.Commands.Add(new UICommand("Click me!", delegate (IUICommand command)
{
// Your command action here
}));
// Show dialog and save result
var result = await dialog.ShowAsync();
It is better to put MessageDialog codes into a function that has a keyword async and returns type of Task For example:
public async Task displayMessageAsync(String title, String content,String dialogType)
{
var messageDialog = new MessageDialog(content, title);
if (dialogType == "notification")
{
//Do nothing here.Display normal notification MessageDialog
}
else
{
//Dipplay questions-Yes or No- MessageDialog
messageDialog.Commands.Add(new UICommand("Yes", null));
messageDialog.Commands.Add(new UICommand("No", null));
messageDialog.DefaultCommandIndex = 0;
}
messageDialog.CancelCommandIndex = 1;
var cmdResult = await messageDialog.ShowAsync();
if (cmdResult.Label == "Yes")
{
Debug.WriteLine("My Dialog answer label is:: " + cmdResult.Label);
}
else
{
Debug.WriteLine("My Dialog answer label is:: " + cmdResult.Label);
}
}
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.
A Webview will display links in the content HTML as having blue underlines. So if you have something in the HTML like
blah blah
... it is clearly visible as a link.
The Webview also allows you to click on phone numbers and addresses (even if those are just text in the HTML, not links) to launch the Dialer or Maps.
How can one get Webview to display those (Linkify, probably) links with underlines etc? It's easy enough in a TextView since one can get the spans from a TextView and style them, but Webview doesn't expose any way to retrieve that data... at least not that I can see looking through the docs.
Here is some JS code which can be injected to linkify phone numbers, emails and urls:
function linkify() {
linkifyTexts(linkifyPhoneNumbers);
linkifyTexts(linkifyEmails);
linkifyTexts(linkifyWebAddresses1);
linkifyTexts(linkifyWebAddresses2);
}
function linkifyPhoneNumbers(text) {
text = text.replace(/\b\+?[0-9\-]+\*?\b/g, '$&');
return text;
}
function linkifyEmails(text) {
text = text.replace(/(\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim, '$1');
return text;
}
function linkifyWebAddresses1(text) {
text = text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim, '$1');
return text;
}
function linkifyWebAddresses2(text) {
text = text.replace(/(^|[^\/])(www\.[\S]+(\b|$))/gim, '$1$2');
return text;
}
var linkifyTexts = function(replaceFunc)
{
var tNodes = [];
getTextNodes(document.body,false,tNodes,false);
var l = tNodes.length;
while(l--)
{
wrapNode(tNodes[l], replaceFunc);
}
}
function getTextNodes(node, includeWhitespaceNodes,textNodes,match) {
if (node.nodeType == 3) {
if (includeWhitespaceNodes || !/^\s*$/.test(node.nodeValue)) {
if(match){
if(match.test(node.nodeValue))
textNodes.push(node);
}
else {
textNodes.push(node);
}
}
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
var subnode = node.childNodes[i];
if (subnode.nodeName != "A") {
getTextNodes(subnode,includeWhitespaceNodes,textNodes,match);
}
}
}
}
function wrapNode(n, replaceFunc) {
var temp = document.createElement('div');
if(n.data)
temp.innerHTML = replaceFunc(n.data);
else{
//whatever
}
while (temp.firstChild) {
n.parentNode.insertBefore(temp.firstChild,n);
}
n.parentNode.removeChild(n);
}
Given this:
http://code.google.com/p/android/issues/detail?id=742
it still doesn't seem to be a way to do this from Java directly. One thing that might work is to write some JavaScript code and run it after page is loaded, e.g. as given here:
In Android Webview, am I able to modify a webpage's DOM?
Here's an example of a similar thing:
Disabling links in android WebView
where the idea is to disable links. You may be able to use a similar approach to add some CSS, including underlining. A couple of other SOqs / links that might help:
Android: Injecting Javascript into a Webview outside the onPageFinished Event
Android: Injecting Javascript into a Webview outside the onPageFinished Event
http://iphoneincubator.com/blog/windows-views/how-to-inject-javascript-functions-into-a-uiwebview
Injecting Javascript into a Webview outside the onPageFinished Event (Using DatePicker to set a date on an input of a WebView)
Hope this helps.