I have a custom CKEditor 5 build (which includes the Mention plugin). The Custom editor loads and works great. But I cannot get the mention plugin to work. The '#' symbol does not trigger the autocomplete. If I enable the plugins line of the config the editor will not load.
I am using anulgar.
import * as CustomEditor from '../libs/ckeditor5-build-custom/build/ckeditor';
import Mention from '../libs/ckeditor5-build-custom/build/ckeditor';
...
editorConfig = {
//plugins : [Mention],
mention: {
feeds: [
{
marker: '#',
feed: ['#Barney', '#Lily', '#Marshall', '#Robin', '#Ted'],
minimumCharacters: 1
}
]
}
Related
I have created a Custom Action to a List Report FE through an extension. The whole purpose is to export the data to a spreadsheet. While testing it from VS Code, all the added extensions do work. But after the app is deployed, none work.
FES is running SAPUI5 version 1.52.18 (S/4HANA 1709), in case you wonder.
Can't figure out if this is an error with the installation or in the extension I created.
Please find the code below:
Manifest:
"extensions": {
"sap.ui.viewExtensions": {
"sap.suite.ui.generic.template.ListReport.view.ListReport": {}
},
"sap.ui.controllerExtensions": {
"sap.suite.ui.generic.template.ListReport.view.ListReport": {
"controllerName": "com.sap.inventoryvariance.ext.controller.ListReportExt",
"sap.ui.generic.app": {
"ZGM_INV_VAR": {
"EntitySet": "ZGM_INV_VAR",
"Actions": {
"onExport": {
"id": "ExportBtn",
"text": "Export",
"press": "onExport",
"requiresSelection": false
}
Extension:
sap.ui.controller("com.sap.inventoryvariance.ext.controller.ListReportExt", {
onExport : function(oEvent) {
alert('ExportToExcel');
}
});
I even tried using the setting "useExportToExcel": true. While testing from VS Code, both work (but VS Code lowest SAPUI5 version is 1.65):
But from the deployed app, nothing happens:
I want to develop an extension for Visual Studio Code.
I'v registered a CompletionItemProvider for typescript, when I'm trying to write in quotes the auto completion does not work.
For example I have this code:
function buildProvider(language : vscode.DocumentSelector, label : string, text : string | vscode.CompletionItemLabel){
return vscode.languages.registerCompletionItemProvider('typescript', {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
const simpleCompletion = new vscode.CompletionItem('', vscode.CompletionItemKind.Text);
simpleCompletion.label = label;
simpleCompletion.insertText = text.toString();
return [
simpleCompletion,
];
}
});
}
If I write in typescript the auto completion work:
Auto completion works
If I write in quotes it doesn't work without using Ctrl + Space.
Auto completion does not works
What can I do to enable the auto completion in quotes?
That behaviour, not working in strings, is probably a result of the setting:
editor.quickSuggestions.
Try setting it like this:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the key setting, default is false3
}
That will fix it for you or anyone with the same "strings": true setting.
You can change a user's default settings in an extension like this in your `package.json - beware they may not like you changing their settings!!:
> #### Configuration Defaults Overrides
>
>
> You can now override defaults of other registered configurations
> through `configurationDefaults` contribution point in `package.json`.
> For example, the following snippet overrides the default behavior of
> `files.autoSave` setting to auto save files on focus change.
```jsonc
"contributes": {
"configurationDefaults": { // applies to all languages
"files.autoSave": "onFocusChange"
}
}
Note: Configurations with application or machine scopes cannot be
overridden.
From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_63.md#configuration-defaults-overrides
I have recently switched from webstorm to vscode and I am struggling to set it up for my needs.
Right now I am wondering if there is any extension/setting that will show only available imports from the imported file.
Here is an example:
import { InternalDataObject } from 'internal-node-module'
import actionTypes from './pay-structure.action-types'
const { GET_JOB_STAMP } = actionTypes
export {
getMissionFees,
}
const getMissionFees = () => ({
type: GET_JOB_STAMP,
promise: InternalDataObject.payStructure.getJobFeeStamp,
})
When I press ctrl + space in the brackets I can see thousands of options, but I would like to see only one: getMissionFees
Thanks in advance!
There is a setting for that:
"editor.snippetSuggestions": "none"
It ontrols whether snippets are shown with other suggestions and how they are sorted. Possible values: top, bottom, inline, none.
I am trying to create a custom plugin for CKeditor following this guide. I created the files as indicated (myplugin.png, myplugin.js, plugin.js) and added
CKEDITOR_CONFIGS = {
'default': {
'extraPlugins': ','.join( [ 'myplugin' ] ),
'allowedContent' : True,
}
}
to the settings.
This is the content of my plugin.js file:
CKEDITOR.plugins.add( 'myplugin', {
icons: 'myplugin',
init: function( editor ) {
// Plugin logic goes here...
editor.addCommand( 'myplugin', new CKEDITOR.dialogCommand( 'mypluginDialog' ) );
editor.ui.addButton( 'myplugin', {
label: 'My Plugin',
command: 'myplugin',
toolbar: 'insert'
});
}
});
Yet, the icon of the custom plugin still doesn't show. I can see in the browser's tools that the plugin.js file is retrieved. I made a test by removing the icon file and it didn't create any difference (no error message, no 404). I suppose then that the file is not even called or accessed. so the initialization does not even try to render the button.
Thank you for your help.
Finally, I found the answer to the problem. It comes from the way CKEditor displays the toolbars. In the guide, the custom plugin is added to the "insert" group of the toolbars. However, this one will not be visible until it is explicitely set to be displayed.
Adding the extra plugin to the default configuration is not enough, the toolbar setting has to be specified properly (if for some reason, your platform doesn't default to null). In my case, with django-ckeditor, I had to add
'toolbar': None,
to the CKEDITOR_CONFIGS.
I am working on Episerver 9. I have a requirement where user can copy content (which includes HTML tags) into the TinyMCE editor.
I want only the text content to be pasted. HTML tags should be filtered out automatically by default.
Is there any way to achieve this using TinyMCE?
You can register a custom TinyMCE plugin in Episerver using the TinyMCEPluginNonVisual attribute. By setting AlwaysEnabled to false, you can use property settings to determine whether the plugin should be enabled or not for a specific editor/XHTML property.
[TinyMCEPluginNonVisual(AlwaysEnabled = false, PlugInName = "customplugin")]
public class MyCustomPlugin
{
}
Your actual TinyMCE plugin (i.e. JavaScript code) could be something like the following:
(function (tinymce, $) {
tinymce.create('tinymce.plugins.customplugin', {
init: function (editor, url) {
editor.onPaste.add(function (editor, event) {
if (!event.clipboardData || !event.clipboardData.items) {
return;
}
// TODO Modify event.clipboardData, for example to strip out HTML tags
});
}
});
// Register plugin
tinymce.PluginManager.add('customplugin', tinymce.plugins.customplugin);
}(tinymce, epiJQuery));
While this isn't a complete example, it should get you started in the right direction.
You should also have a look at the official documentation.
Edit: If you just want to alter the paste_as_text setting, you could register a plugin and set the configuration through the TinyMCEPluginNonVisual attribute:
[TinyMCEPluginNonVisual(EditorInitConfigurationOptions = "{ paste_as_text: true }")]
public class PasteAsTextPlugin
{
}
Assuming that you are loading the paste plugin you can force TinyMCE to always paste as plain text with the following:
tinymce.init({
...
plugins: "paste",
paste_as_text: true
...
});
https://www.tinymce.com/docs/plugins/paste/#paste_as_text
I would assume that Episerver provides you some way to manipulate the configuration of TinyMCE. Adding the paste_as_text option to that configuration should do what you need.