I am new to summernote. I hope to add a "italic" button next to the bold and underline buttons because it is such a common edit operation. I am unable to find examples of how to do it.
Thanks for any help!
I think that's by default. But you can of course customize your own toolbar.
$('.summernote').summernote({
toolbar: [
//[groupname, [button list]]
['style', ['bold', 'italic', 'underline', 'clear']]
]
});
You can read more about custom toolbar here.
By Design:
As stated here you can just configure summernote's toolbar by passing in a custom structure like this:
$('#summernote').summernote({
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
NB: When overriding the toolbar structure you need to pass the whole toolbar and you cannot just override a single group (e.g. by initializing the array with just ['style', ['bold', 'italic', 'underline', 'clear']]) as it would remove all the other actions
Quick n dirty:
look for ['bold', 'underline' .... in summernote.js
add 'italic' between them
NB: it will be gone when you update. Surely it's better to copy the whole toolbar setting and replicate in your init options, adding whatever you see fit. But technically, it's there and it's gonna work. Line 9789 in my version. (Don't trust line numbers, look for the string.)
Related
I'm using a VScode extension called "Surround"
In the docs for this extension it shows how to define a custom snippet. What I want is really simple. I would like to add the ability to surround selected text with tags, ie <> </> while placing the cursors in the middle where I define what type of tag that is (html, img, button, etc)
The docs show this example:
{
"surround.custom": {
// command name must be unique
"yourCommandName": {
// label must be unique
"label": "Your Snippet Label",
"description": "Your Snippet Description",
"snippet": "burrito { $TM_SELECTED_TEXT }$0", // <-- snippet goes here.
"languageIds": ["html", "javascript", "typescript", "markdown"]
},
// You can add more ...
}
}
I can almost parse it, except I don't know what the placeholders are representing. I assume { $TM_SELECTED_TEXT } is the text I've selected but what is the trailing $0 used for? Also, how can I place 2 cursors in between the opening and closing tags?
Thanks in advance.
I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text.
Right now it's doing this:
"Summary One Summary Two"
I want it to do this:
"Summary One
Summary Two"
So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do?
Thanks,
James
You can use cellRenderer to achieve this.
Have a look at below colDef.
{
headerName: "Custom column",
cellRenderer: function(param){
return param.data.col1 + '<br/>' + param.data.col2;
}
}
You might need to set rowHeight in gridOptions as well.
Live example: Plunk
I have an even simpler solution without cell renderer. By the way I am using the ag-theme-balham theme. Simply set the cellStyle to white-space pre and you are able to use \n to insert a new line.
columnDefs()
...
valueGetter: ({ data }) => 'first value\nsecond value',
cellStyle: { 'white-space': 'pre' }
Let's say you have a tab-panel like so :
editor: layout [
below
t: tab-panel 350x350 [
"tab 1" [
below
b: button 75x25 "Interpret" on-click [do a/text ]
a: area 320x250
]
]
]
view editor
How could I dynamically add a new tab to it so that has the contents of the current tab?
They are several ways to add a new tab dynamically, but in all cases, it boils down to adding:
A tab label as a string! to t/data block.
A corresponding panel face object! to t/pane block.
Here is a fully working example code:
tab1: [
below
button 75x25 "Interpret" on-click [do face/parent/pane/2/text ]
area 320x250
]
editor: layout compose/deep/only [
below
button "add tab" [
append t/data "tab 2"
append t/pane make face! [type: 'panel pane: layout/only tab1]
]
t: tab-panel 350x350 ["tab 1" (tab1)]
]
view editor
Some remarks:
tab1 definition has been externalized, so its definition can be reused for another tab content (as per your request).
a: word has been removed as it cannot be duplicated, access to the current area face in current tab panel is now done by walking up the face tree. b: definition has been dropped for same reason (and it's not used anyway).
Examples of dynamic behaviors and dynamic face construction (without VID dialect) are available here. tab-panel face type is described there.
I want to introduce a new Control to TinyMce that I can use in the toolbar. In my case I want to add an icon control that can be placed at the start of the toolbar to differentiate between editors.
However there is almost no information about how to properly do this.
Finally I managed to come up with a way to properly do this.
First I introduce a new plugin icon (in icon/plugin.js) that registers a new control Icon. It uses a setting iconClass.
tinymce.PluginManager.add('icon', function() {
tinymce.ui.Icon = tinymce.ui.Widget.extend({
renderHtml: function () {
return '<span class="icon icon-' + this.settings.iconClass + '"> </span>';
}
});
});
Next I add a button facebook to the toolbar in the following way:
editor.addButton('facebook', {
type: 'icon',
iconClass: 'facebook-share'
});
Now I can add it to the toolbar specification:
tinymce.init({
toolbar: "facebook"
})
That's it! The new custom control should not render. The plugin code is only ran once; even if used multiple times.
I add a button to HBox, with expand equal to False, but I want the button to have more spacing between its label and border. I assume it is "inner-border" property, but it is read-only. How can I set it to e.g. 4px?
gtk.Label is a subclass of gtk.Misc which has the method set_padding. If you get the label out of the gtk.Button then you can just call set_padding on it.
You could do something like:
label = gtk.Label("Hello World")
button = gtk.Button()
/* Add 10 pixels border around the label */
label.set_padding(10, 10)
/* Add the label to the button */
button.add(label)
/* Show the label as the button will assume it is already shown */
label.show()
Wrong answer:
What you're looking for is called "padding". When you add your button to the container, for example by calling gtk.Box.pack_start, just set the padding parameter to a positive integer.
Update:
Seems I misread the question. In that case, my guess is that you're supposed to use gtk_widget_modify_style, as inner-border is a style property. You'll first get the style modifier you need by calling gtk_widget_get_modifier_style. You'll then be able to modify the style only for that button using the ressource styles matching rules.
you can use "inner-border" style property of gtk button.
here, small code snippets
In gtkrc file:
style "button_style"
{
GtkButton::inner-border = {10,10,10,10}
}
class "GtkButton" style "button_style"
In .py file:
gtk.rc_parse(rc_file_path + rc_file)
[Edit]
In gtkrc file:
style "button_style"
{
GtkButton::inner-border = {10,10,10,10}
}
widget "*.StyleButton" style "button_style" # apply style for specific name of widget
In .py file:
gtk.rc_parse(rc_file_path + rc_file)
#set name of button
self.style_button.set_name('StyleButton')
hope, it would be helpful.
I sometimes just add spaces in the label !
gtk.Button(" Label ")
to get some spacing.
Hope this could help you.