I am currently using the Jodit editor and have enabled the "brush" button as follows:
data() {
return {
editor: null,
buttons: [
"bold",
"strikethrough",
"underline",
"italic",
"|",
"ul",
"ol",
"|",
// "outdent",
// "indent",
"|",
// "fontsize",
"brush",
"|",
"link",
"align"
],
overlay: null,
container: null,
toolbar: null,
}
},
When I use this button I only have the ability to use predefined colors. On the Jodit playground page https://xdsoft.net/jodit/play.html when I click the button I am given an option to use a Hex or RGB color I enter. I have searched the documentation but see no reference to adding this ability.
How do I enable the ability to set my own color?
Related
I have custom icon for zoom.
import zoomIcon from "common/assets/icons/zoom.svg";
feature: {
dataZoom: {
yAxisIndex: "none",
icon: {
zoom: `${urlImgBase}${zoomIcon}`,
back: `${urlImgBase}${resetIcon}`,
},
iconStyle: {
color: "#91cc75", // doesn't work
},
},
},
Inside svg I did -> stroke="currentColor". And it doesn't work. I have all time default black color.
How to change color my svg icon when I chosed "zoom"?
I have a very simple table that is set up like this.
{
"tabulator": {
"rowSelected": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowSelected','row':row.getData(), 'position':row.getPosition()}}); }",
"rowAdded": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowAdded','row':row.getData(), 'position':row.getPosition()}}); }",
"rowDeleted": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowDeleted','row':row.getData(), 'position':row.getPosition()}}); }",
"rowMoved": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowMoved','row':row.getData(), 'position':row.getPosition()}}); }",
"rowUpdated": "function(row){ this.send({topic:this.config.topic,ui_control:{'callback':'rowUpdated','row':row.getData(), 'position':row.getPosition()}}); }",
"dataLoaded": "function(data) {var newData=[];data.forEach(function (datum) {var command = [datum.id, datum.torque, datum.duration];newData.push(command);});this.send({topic:this.config.topic,ui_control:{callback:'dataLoaded',data: newData}});}",
"dataEdited": "function(data) {var newData=[];data.forEach(function (datum) {var command = [datum.id, datum.torque, datum.duration];newData.push(command);});this.send({topic:this.config.topic,ui_control:{callback:'dataEdited',data: newData}});}",
"layout": "fitColumns",
"selectable": true,
"columns": [{
"field": "id",
"visible": false
}, {
"title": "Torque",
"field": "torque",
"editor": "number",
"editorParams": {
"step": 0.1
}
}, {
"title": "Duration",
"field": "duration",
"editor": "number"
}]
},
"customHeight": 12
}
I want to be able to select a row or rows with the standard click mechanism. However the rows only contain fields that have a numeric editor. The editor grabs all the single clicks on the row. I have implemented a really bad way of overcoming by introducing a column that has a title set to "Click me" and nothing else. This looks terrible. Does anyone has any suggestions on how I this can be done? I want to avoid using the the rowSelection formatter.
Thanks,
Roger
yes, in the Event, there is a target (or Source ... I forget). I use it on my custom headerFilters that have dropdowns, to distinguish between the user interacting with my dropdown, and Tabulator thinking the user has clicked in the header to move the column or change the sortOrder. If the target/source is my dropdown, I stopPropagation. If not, I let it through. In your case, you prolly want to stopPropagation if they are interacting with your editor.
I use the same font(Consolas) in VScode and sublime. But it looks different in the same place:
Here are my sublime settings:
{
"auto_complete_selector": "source,text",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"font_face": "Consolas",
"font_size": 12,
"ignored_packages":
[
],
"theme": "Default.sublime-theme"
}
Here are my vscode settings:
"materialTheme.accent": "Blue",
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.fontWeight": 520,
"editor.codeLensFontSize": 11,
"editor.fontSize": 15,
"editor.formatOnType": true,
"debug.console.fontFamily": "Cascadia Mono",
"python.showStartPage": false,
"workbench.editorAssociations": [
{
"viewType": "jupyter.notebook.ipynb",
"filenamePattern": "*.ipynb"
}
],
"explorer.confirmDelete": false,
"todo-tree.tree.showScanModeButton": true,
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"comments": "#7ea9eb"
My question is: How to make my vscode font slant like sublime?
According to the VS Code documentation, you can customize your theme color by using the editor.tokenColorCustomizations rule in your user settings:
Open your settings.json and add the following rule first (replace YOUR THEME NAME HERE with the name of your color theme):
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": []
}
}
Open a Python file of your choice. Then, open Command Palette with Ctrl+Shift+P and run "Developer: Inspect Editor Tokens and Scopes"
Click on the keyword you wish make it italic. For example, we click on the class keyword to view its TextMate scopes. Copy the first TextMate scope ID as highlighted:
Go back to your settings.json. Inside the textMateRules array, insert a new object with the scope property being the TextMate scope ID you just copied.
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
}
Save your settings.json and you should see the class keyboard in italics
Note
You can append more objects in the textMateRules array to make the font italic for more keywords. For example:
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "variable.parameter.function.language.special.self.python",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
},
I just installed Sublime Text 3 on my Windows system and like how it works and all the plugins that come with it, I added some customization to my main context menu, so that I can call the commands directly.
I added a caption with a whole bunch of empty spaces in it to look like it is on the second row, but when you hover it shows highlighting which looks clunky and shows on just one line when you maximize the window.
Is there a way to customize it where the added items on the menubar are stored on a separate row from the File,Edit,Selection,Find... menus without having to add a caption? The overall goal is to make it similar to Notepad++ toolbar.
Notepad ++ Toolbar:
Menu Code:
[
{
"id": "help"
},
{
"id": "folders", "caption":
" "
},
{
"id": "folders", "caption":
"Shortcuts:"
},
{
"command": "prompt_open_folder",
"caption": "📁 Open Folder"},
{
"command": "new_file",
"caption": "🗋 New File"},
{
"command": "save",
"caption": "💾 Save"},
{
"command": "show_panel",
"args": {
"panel": "find", "reverse": false
},
"caption": "🔎 Find"
},
{
"command": "show_panel",
"args": {
"panel": "replace", "reverse": false
},
"caption": "🔍 Replace"
},
{
"command": "build",
"caption": "▶ Build"},
{
"command": "expand_selection",
"args": {
"to": "scope"
},
"caption": "♒ Expand"
},
{
"command": "fold_by_level",
"args": {
"level": 1},
"caption": "⮝ Fold"
},
{
"command": "unfold_all",
"caption": "⮟ Un-Fold"
},
{
"command": "open_terminal",
"caption": "🗔 Terminal"
}
]
Desired result:
Menus are displayed in Sublime by native OS methods (or in the case of Linux, via GTK3). As far as I'm aware there is no direct way to break the main menu into lines like you want other than by using the mechanism you're already using.
That said since the menus are displayed natively, it's theoretically possible that if there is a special character you can add to a menu caption for your OS that would make it break the menu, that would work.
On Linux for example your menu from above doesn't wrap and just makes the window large enough to fit the menu without a wrap. Similarly adding \r or \n to get a line break breaks the caption, but within the layout of it's own item and not in the menu as a whole.
Generally the UI of Sublime is intended to be as unobtrusive as possible to make as much room as possible for text, which is why the find and replace actions are small panels and not floating windows and why the toolbar that used to exist was removed in 2009.
It's quite easy to show/hide tabs or minimap in distruction free mode using View menu (Alt+V) or Ctr+Shift+P. Is it possible to do the same for line numbers and bookmark arrows?
Or maybe center whole text in a fullscreen mode? It would have the same effect.
It is not default behavior (keybinding). You can get line numbers, centering etc. only by modifying user config (Preferences -> Settings-More -> Distraction Free-User).
Add for example this:
{
"gutter": true,
"line_numbers": true
}
to get line numbers.
P.S. I was also looking for some shortcut for this. No luck. This is the only way I found for now.
Following the comment on the question by Keith Hall, you can do it by creating a custom keybinding. Open Key Bindings from the Preferences menu and add the following to your user keymap.
[
{
"keys": [ "ctrl+k", "ctrl+l" ],
"command": "toggle_setting",
"args": { "setting": "line_numbers" }
}
]
I chose ctrl-k, ctrl+l as the binding to match with the existing binding that hides the sidebar (ctrl-k, ctrl+b), but obviously it can be whatever you like. Search through the list of existing bindings to avoid a clash.
for line and column number open the setting file: (Preferences -> Settings-More -> Distraction Free-User)
{
"line_numbers": true,
"gutter": true,
"column_number": true,
}
OK, here is a solution ( ~/.config/sublime-text-3/Packages/User/Preferences.sublime-settings ):
{
"always_show_minimap_viewport": true,
"draw_centered": true,
"word_wrap": true,
"wrap_width": 80,
"font_size": 10,
"rulers":
[
80
]
}