I'm using CKEditor 5 in my angular 7 application. ClassicEditor by default shows the Insert Media button on the toolbar as highlighted in the below image.
On researching online I found we can disable particular options by using the removePlugins option in the editorConfig like below.
editor.component.ts
editorConfig = {
removePlugins: ['Image'],
placeholder: 'Type the content here!'
};
Above code is to not remove the Insert Media option but a different option to Insert Image. But it doesn't work. Even after using the above code I could still see Image insert option in my CK Editor.
I also couldn't find online what I need to provide in the removePlugins for disabling the Insert Media option to try if atleast that works. Any help will be appreciated.
Thanks in advance
Instead of removing specific buttons it is possible to set the default configuration of the CKEditor to show only the options which are required to us.
Adding below code to the constructor in your angular component.ts file will create a simple CKEditor with only those options mentioned in the items array. mediaEmbed is the name of the item responsible for displaying Insert Video option in the CKEditor which I've not mentioned in the items array to not display it in the CKEditor.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'|',
'bulletedList',
'numberedList',
'|',
'insertTable',
'|',
'imageUpload',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
language: 'en'
};
Result after adding above code
Hopes this will help someone!
This definitely work
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch( error => {
console.error( error );
} );
</script>
Try passing the config in an input.
It's very unintuitive, I know.
ClassicEditor
.create(document.querySelector(selector), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch(error => {
console.error(error);
});
You can get a list of all plugins available like this:
console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));
The first way to solve this problem
Go to node modules -> #ckeditor -> ckeditor-build-classic -> build ->ckeditor.js
Go or search for defaultConfig in ckeditor.js --- you will find out in the last few lines
Here remove the unwanted fields like table, media, etc
The second way to solve the problem
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}
Here are the complete list:
Eg - remove the table from the Editor
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}
put in the constructor of the component.ts file
ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}
I think you're on the right track. I was able to accomplish this by using the removePlugins config option. The key was making sure that the items in your removePlugins array match the item names in the default toolbar config.
const defaultToolbarItems = [
...,
'imageUpload',
'mediaEmbed',
...
];
const editorConfig = {
placeholder: 'Type the content here!',
removePlugins: ['imageUpload','mediaEmbed'],
}
Navigator contains a feature where users can define their own table views, see DAML docs for Navigator.
Is it possible to create a view where one column renders a button that, when clicked, immediately exercises a choice?
Yes, this is possible. The customized views allow you to render arbitrary React components, so let's create one to exercise a choice.
First, start with a working frontend-config.js file. The DAML quickstart project contains one.
Then, make sure you import at least the following symbols at the top of the file:
import React from 'react';
import { Button, DamlLfValue, withExercise } from '#da/ui-core';
Then, define the following top level values (for example, just below export const version={...}):
// Create a React component to render a button that exercises a choice on click.
const ExerciseChoiceButtonBase = (props) => (
<Button
onClick={(e) => {
props.exercise(props.contractId, props.choiceName, props.choiceArgument);
e.stopPropagation();
}}
>
{props.title}
</Button>
)
ExerciseChoiceButtonBase.displayName = 'ExerciseChoiceButtonBase';
// Inject the `exercise` property to the props of the wrapped component.
// The value of that property is a convenience function to send a
// network request to exercise a choice.
const ExerciseChoiceButton = withExercise()(ExerciseChoiceButtonBase)
ExerciseChoiceButton.displayName = 'ExerciseChoiceButton';
Finally, use the following code in your table cell definition:
{
key: "id",
title: "Action",
createCell: ({rowData}) => {
// Render our new component.
// The contract ID and choice argument are computed from the current contract row.
return ({
type: "react",
value: <ExerciseChoiceButton
title='Transfer to issuer'
contractId={rowData.id}
choiceArgument={
DamlLfValue.record(undefined, [
{label: 'newOwner', value: DamlLfValue.party(DamlLfValue.toJSON(rowData.argument).issuer)}
])
}
choiceName='Iou_Transfer'
/>
});
},
sortable: true,
width: 80,
weight: 3,
alignment: "left"
}
Another option would be create a React component where the onClick handler sends a REST API request using fetch(). Inspect the network traffic when exercising a choice through the Navigator UI in order to find out the format of the request.
Helo
I'm using Viewer Example form here: https://forge.autodesk.com/en/docs/viewer/v5/tutorials/basic-viewer/
(Step 1)
and now I need:
1. add custom menu on right click
2. get info's for clicked object, like Area, Volume, Length (if 3D) or length if 2D.
How to do that, please?
I try to copy whole "class MyContextMenu extends ... " code from
https://forge.autodesk.com/blog/customize-viewer-context-menu
but it does not worked.
Thank you.
Here's a simple example of adding custom menu items to the context menu: http://jsfiddle.net/s47vy5u3/2. You'll just need to include your Forge app's access token and some viewable URN. The menu customization code itself looks like this:
function customizeMenu() {
const viewer = NOP_VIEWER;
viewer.registerContextMenuCallback('MyCustomMenuItems', function(menu, status) {
menu.push({
title: 'My custom menu item',
target: () => {
// Add your menu item's code here
}
});
});
}
Currently I have two Polymer components that share a great amount of data. You can see here:
<polymer-component1
series="{{series}}"
stackhelper={{stackhelper}}
stack={{stack}}
controls={{controls}}
camera={{camera}}
threed={{threed}}
scene={{scene}}
renderer={{renderer}}>
</polymer-component1>
<polymer-component2
stackhelper=[[stackhelper]]
stack={{stack}}
controls={{controls}}
camera={{camera}}
threed={{threed}}
scene={{scene}}
renderer={{renderer}}
guiobjects={{guiobjects}}>
</polymer-component2>
This is working fine right now but whats the best practice about sharing data? Any way to share all the properties between two components?
It's recommended to share data through data binding, just as what you're doing. You can share any property, not just strings and numbers. e.g. assuming you have an object
JS
data = {
series: "",
stackhelper: "",
stack: "",
controls: "",
camera: "",
threed: "",
scene: "",
renderer: "",
}
Your code can be rewritten like this.
HTML
<polymer-component1 data="{{data}}"></polymer-component1>
<polymer-component2 data="{{data}}"></polymer-component2>
In Polymer 2 one element can just inherit the properties by extending it.
class MyElementSubclass extends MyElement {...}
Or you create an element with just the properties both need and then both components extend the parent. You can find this here scroll down to Extending an existing element
Is it possible to insert custom widget (for example button or checkbox) in gridpanel column header?
From documentation it's unclear.
Already I've tried to google it, but without any success.
Please help!
The short answer is 'yes'.
You can extend the grid column, then make an afterrender listener.
In the listener, get the column's innerEl = (component.getEl().down('column-header-inner').
Then, make a new component like button/checkbox, columnComponent.headerButton = new Ext.button.Button()
Then, render it columnComponent.headerButton.render(innerEl).
I hope this helps.
I had the same problem: How to get a button (or any custom component) into the extjs grid header field.
After some research I found the solution for extjs 5: You can configure the "items" property of the grid columns:
{
xtype: "gridcolumn",
text: "column header name in grid",
dataIndex: "...",
items:[
{
xtype: "button",
text: "Foo",
handler: "onFooClick"
}
]
}
This will for example show a button under the grid header text inside the header component.