Set the option for Tinymce body_class, this work fine for the main editor.
Although how could I set this to also add the class to the "Predefined template preview".
Related
I am working with inline Tinymce editor and i want to use 'fullscreen' control. But , it is not working with inline editor. How to achieve 'fullscreen' feature in Inline mode?
Thanks.
The fullscreen plugin does not work with the Inline or Inlite modes. From looking at the code it decorates an iFrame and that only makes sense in the context of the classic mode of instantiating TinyMCE.
The new TINYMCE (version 4) allows the use of:
paste_as_text: true
The problem is that this enabled all pastes to be converted to plain text. I would to be able to do this: when the user pastes content directly to the tinymce it will always clean the content and convert it to plain text BUT if the user cliks a button a dialog appears so user can paste content in this dialog and tinymce wouldnt "touch" it, it would paste it directly to the editor.
ACTUALLY this was the default behaviour on 3.X versions, you could have a specific PASTE FROM WORD button (which actually worked for anything you wanted to paste) so you cold paste content from word and it and it would not get converted to plain text.
I see there is an external "powerful paste plugin" from tinymce but it's not free, so how can I solve this problem without having to purchase a plugin?
EDIT:
Even attaching event to the paste process I cannot change the paste_as_text dynamically like this, for example:
tinymce.settings.paste_as_text = false;
I can execute that line in my code with no errors but it produces no effect, I continue not being able to paste content without being simplified as plain text.
When you load the paste plugin by default it adds two items to the Edit menu:
Paste
Paste as Text
...so what you want is a standard part of the paste plugin. In TinyMCE 4 its exposed via the Edit Menu and not the Toolbar.
EDIT #1: If you add the pastetext button to the toolbar that allows you to toggle the paste function between Paste as Text and regular Paste. The button toggles the behavior that happens on a paste event. It does not behave exactly as things did in TinyMCE 3 (the behavior you describe in your question).
EDIT #2 - Programmatically changing this behavior
You can use code to toggle this setting but you need a couple of different calls to get what you need.
First, you need to determine what the current "mode" is for the paste plugin. For this you can use:
tinymce.activeEditor.plugins.paste.clipboard.pasteFormat
This will (based on the current TinyMCE release of 4.6.5) return one of three values: "html", "text", or undefined. I believe it always starts as undefined until you initiate the toggle once.
If you want to switch the behavior to the other mode you can do this:
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');
Note that is is a toggle - so whatever it was set to it will switch to the opposite mode. There is no exposed method call that you can use to force it to one mode or the other.
Is there any way to customize sidebar in VS Code? In particular, I want to change the font size. Is there a user setting for that? Or, maybe, I can edit it somehow via stylesheet since it's an Electron app, like in Atom?
There are no user-defined stylesheets for vscode.
The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).
I created a feature request for this on the repo.
As mentioned in other answers there are extensions which allow injecting custom CSS, you should be careful using these as they directly manipulate the source code of VS Code which could lead to problems elsewhere and any modifications could break when you update.
I Found a way to change the font of Visual Studio Code Window.
First, open command Pallete, and type "Toggle Developer Tools"
This will open "Chrome Inspector".
Select any text of sidebar of app.
Search .monaco-shell class in "styles" tab at right side inspector ( Where show every styles of the current document ), then the font-family attribute.This is tab and stylesheets.
In workbrench.main.css hit right click and click in "Open Soruce Panel" Show like this
Format the css Code with this icon.
ctrl+f for found font-family attribute again, 'cause the format redirect to end of css document, and get .monaco-shell class like this in ~6371 line.
Change this font ( I have change to Droid sans Mono font ), but you change to you want.
Why i'm not change in the real document css
'Cause, when i changed the font family in the real document css ( C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbrench.main.css) generate a error saying "Vscode have a error, please reinstall the program" or similar
When generate a actualization of application, the font family declareated will deleted, and the document css is´t a pretty code.
This process change every fonts of visual studio code application (not include the editor font )
I found it very effective to use the general zoom settings (it's somewhere in that huge settings window). This adjusts the zoom level of the entire app. Tweak it till you like the size of your explorer window, then adjust the settable editor font to be readable with that zoom level. I three parallel code windows of 80 columns plus the explorer on a good 17" laptop monitor, readable if you are OK with 8pt code font (which is actually 11 point font zoomed two notches down).
Although there is no direct way of customize the sidebar from settings as #Daniel Imms mentioned in his answer, but I found 2 plugins which helped to resolve this issue. You can either one of them if you want.
1. Custom CSS and JS Loader
In Custom CSS and JS Loader plugin, you need to create a custom css and then this plugin will inject that code directly in electron-browser/index.html(as VS Code is an electron based editor). I use this CSS in my Mac:
".explorer-viewlet .mac": "font-size: 1.2em !important",
2. CustomizeUI
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},
EDIT:
What I really need is an editor that'll allow me to write html directly and allow inserting macros.
I'm using WMD editor in umbraco 7 and need to add a partial view macro to the page.
The editor does not have an insert macro button and if I pasted the following code in the editor, it is not shown in the page. I think the markdown processor removes it from the page ; <umbraco:Macro Alias="YourMacroAlias" \>
How can I add the macro to the page ?
Out of the box, the WMD editor does not support embedding Macros in the same way as the Richtext Editor does. You could raise a feature request at http://issues.umbraco.org and see if they'll add it, or you could take the source of the WMD from the Umbraco source at https://github.com/umbraco/Umbraco-CMS and create your own version of the markdown editor based on it.
The way the Richtext editor does it is that it stores the macro details as a specially formatted bit of markup, and there's some code in the front end that looks for that markup and replaces it with the output of the Macro.
Go to the developer section. Open the Macros.
In your macro there is a checkbox "Use in rich text editor and the grid" and "Render in rich text editor and the grid" check this.
For Using in Rich Text the option must be checked in the Data Type.
In the Developer section there is below Data Types, the Richtext editor data type check umbmacro.
In the Rich Text editor there is a "Insert Macro" Button, the 2 gears icon.
But for a markdown datatype there is no button, no support, An option is invent a tag a replace you tag in the template with somethings else. To come a bit near a macro functionality.
Instead of using Markdown editor for less options, you can disable excess commands for the tinyMce too. Extra tags added by tinyMce can also be disabled, see at end
Firstly there is file in config folder named tinyMceConfig.config. It handles the options in all datatypes using tinyMce. Below is entry for macro
<command>
<umbracoAlias>umbracomacro</umbracoAlias>
<icon>images/editor/insMacro.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="umbmacro">umbracomacro</tinyMceCommand>
<priority>62</priority>
</command>
Go to
Developer -> DataTypes -> Rich Text Editor
There will be toolbar checkbox list. Select umbmacro from the list and save the data type. You will see the macro on the WYSIWYG editor. Uncheck all unwanted options. Also you can create new datatype say "RTE Lite" using property editor "Rich Text Editor" and use this "RTE Lite" where less options are needed.
Edit: Okay, if you do not like extra p tag added by tinyMce, go to "tiny_mce_src.js" file from your umbraco solution, search for forced_root_block : 'p' and change it to forced_root_block : ''
On the tinymce editor there is this code
// Theme options
"styleselect,formatselect,fontselect,fontsizeselect",
Are this select boxes
styleselect,formatselect,fontselect,fontsizeselect
part of a plugin or are they in a separate .js file.
I solved it this way.I opened
/var/www/tinymce/jscripts/tiny_mce/themes/advanced/editor_template.js
and i knew what advanced control was named for instance theme_advanced_blockformats:
This is the control with the block formats.To change their display names i put in this code
theme_advanced_blockformats : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
and it worked.
There is that topic on tinymce website on theme_advanced_styles which serves as an excellent example http://www.tinymce.com/wiki.php/Configuration:theme_advanced_styles