Experiencing strange behaviour with CKEditor. I have everything set up and I can upload images just fine. But the only problem I have is that I cannot see the 'Send it to the server' button in the upload form. I know it's there because if I hover over the area it's supposed to be on, the alternative information reads 'Send it to the server'. Furthermore if I press the area, it will upload the photo:
I haven't edited any CSS files or tampered with the code except to include the upload script.
The image.js file reads:
{
id: 'Upload',
filebrowser: 'uploadButton',
label: editor.lang.image.upload,
elements: [
{
type: 'file',
id: 'upload',
label: editor.lang.image.btnUpload,
style: 'height:40px',
size: 38
},
{
type: 'fileButton',
id: 'uploadButton',
filebrowser: 'info:txtUrl',
label: editor.lang.image.btnUpload,
'for': [ 'Upload', 'upload' ]
}
]
}
The file input shows but not the button.
Turned out to be a custom skin I was using that didn't contain all the necessary classes.
Related
After my app got installed, users can upload files in direct message with my bot.
Now I want to send a message to everyone and include this uploaded file but since it was uploaded in a private chat with my bot, this file is private.
I don't want to make it public(internet) available(also user should have this extra workspace permission to make files publicly available), just want to share it with everyone in the workspace only. so app.client.files.sharedPublicURL is not an option.
Maybe download the file using url_private and upload it again to slack using files.upload? which seems crazy!
Or with some other method which lets me change shares part of file to "general" channel so everyone can see it, do we have such method?
{
files: [
{
id: '...',
...
user: '....',
editable: false,
mode: 'hosted',
is_external: false,
external_type: '',
is_public: false,
public_url_shared: false,
display_as_bot: false,
username: '',
url_private: 'https://files.slack.com/files-pri/.../file.png',
url_private_download: 'https://files.slack.com/files-pri/..../download/file.png',
....
permalink: 'https://myworkspace.slack.com/files/....png',
permalink_public: 'https://slack-files.com/...',
has_rich_preview: false,
file_access: 'visible'
"shares": {
"public": {
"C0T8SE4AU": [
{
...
"channel_name": "general", //<<<<<<means everyone? is this possible?
...
}
]
}
},
}
]..
}
I am trying to show a popup message to user using the task module. I have sent a attachment with type invoke. Here is the code
content.sendActivity(MessageFactory.attachment(CardFactory.heroCard('Task Module Invocation from Hero Card',
'This is a hero card with a Task Module Action button',
null, // No images
[{ type: 'invoke', title: 'Task Module', value: { type: 'task/fetch' } }])));
When I click on the Button I have received a request to my messaging end point and the response I have sent is
reply({
task: {
type: 'continue',
value: {
"title": "Task module title",
"height": 'large',
"width": 'large',
"url": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content",
"fallbackUrl": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content"
}
}
});
But in the popup message is blank. My ngrok url is not even being hit for the HTML page. This is what I see in popup. But the title was updated. I have no idea why it is not working.
Ant help would be thankful
This is pretty much always caused by the domain of the page not being listed in the valid domains for the application (you set this in your manifest json file, inside App Studio if you're using it). Because you've not listed this as a valid and "safe" domain, Teams won't even make any call at all, that's why there's nothing visible in the NGrok log even.
Just to be clear, we're talking about this section of the schema.
I use FilePond to show previously uploaded images with the load functionality. The files are visible, however I don't get a preview (which I get when uploading a file).
Should it be possible to show previews for files through load?
files: [{
source: " . $profile->profileImage->id . ",
options: {
type: 'local',
}
}],
First you have to install and register File Poster and File Preview plugins and here is the example of how to register it in your code:
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFilePoster,
);
then You have to set the server.load property to your server endpoint and add a metadata property to your files object which is the link to your image on the server:
const pond = FilePond.create(document.querySelector('file'));
pond.server = {
url: '127.0.0.1:3000/',
process: 'upload-file',
revert: null,
// this is the property you should set in order to render your file using Poster plugin
load: 'get-file/',
restore: null,
fetch: null
};
pond.files = [
{
source: iconId,
options: {
type: 'local',
metadata: {
poster: '127.0.0.1:3000/images/test.jpeg'
}
}
}
];
the source property is the variable you want to send to your end point which in my case I wanted to send to /get-file/{imageDbId}.
In this case it does not matter what your endpoint in the load property returns but my guess is, we have to return a file object.
I have some problems with integration CKeditor 4 and CKFinder 3 in My Laravel Vue app.
I just want the functionality when I click on "image button" in my Ckeditor - CKFinder window appears and I'm able to upload all needed images.
What problems I have? (a few, but they must be related with each other):
I have that error in my devtools console: "[CKEDITOR] Error code: cloudservices-no-token-url." (I'm supposing that issue must be resolved when I properly integrate CKeditor with CKFinder)
(as WARN in devtools) - " [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "easyimage"} "
"Image Button" in my CKeditor disappeared (ckeck screenshot below):
You can see my Vue component code with config for ckeditor:
...
export default {
components: { VueCkeditor },
data() {
return {
content: '',
config: {
toolbar: [
{ name: 'styles', items : [ 'Styles','Format', 'FontSize' ] },
{ name: 'clipboard', items : ['Undo','Redo' ] },
{ name: 'editing', items : [ 'Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar','Iframe' ] },
{ name: 'tools', items : [ 'Maximize' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
],
height: 400,
extraPlugins: 'autogrow,uploadimage',
filebrowserBrowseUrl: '/filemanager_storage?type=Files',
filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
},
};
},
...
Other details which may be useful:
I use CKFinder 3 Package for Laravel 5.5+ (https://github.com/ckfinder/ckfinder-laravel-package)
In my ckfinder.php (configurations for CKFinder) I set temporally that code:
$config['authentication'] = function () {
return true;
};
I'm not sure in that paths (in my config object in vue):
filebrowserBrowseUrl: '/filemanager_storage?type=Files',
filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
},
*I created 'filemanager_storage' directory in my 'public' directory
Thanks guys a lot for any help!
I was facing similar issues regarding a ckeditor4.x integration I did recently in an opencart site with php. While it's not the same environment with vue, maybe this could prove useful to you.
Instead of using the easyimage plugin for managing the image upload , I replaced it with the image2 (enhanced image plugin) . After you've downloaded the image2 plugin and placed it under the ckeditor4/plugins/ directory, make sure to add this in your ckeditor instance:
extraPlugins : 'image2',
removePlugins: 'easyimage,cloudservices'
Regarding the urls in the ckeditor instance, while I'm not using the filebrowserBrowseUrl , I've declared the filebrowserUploadUrl as such :
filebrowserUploadUrl: '/path_where_ckfinder_is_installed/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json
While in my case it made the image upload possible, I'm still getting the warning [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "image2"} " This is something that I haven't been able to solve yet, but at least the image upload works in my case with no fuss.
Also, make sure in the config.php of ckfinder that you've declared the BaseUrl and root path for the user files directory, i.e
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => $your_file_path,
'root' => '/your_root_dir/' . $your_file_path, // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8'
);
Let me know if this solution suits your case.
How is sorting and filtering implemented when using a custom header cell in the react-data-grid?
{
key: "myColumn1",
name: "My Column Name",
headerRenderer: this.renderHeader,
sortable: true,
filterable: true
},
{
key: "myColumn2",
name: "My Other Column Name",
sortable: true,
filterable: true
}
...
renderHeader(props){
return (<extra-stuff>
{props.column.name}
</extra-stuff>)
}
I have myColumn2 sorting fine but nothing happens with the custom header: myColumn1. What do I need to do in renderHeader(){} to get sorting (and filtering, but mainly sorting) working?
Instead of trying to call a function in headerRenderer, put a component instead:
{
key: "myColumn1",
name: "My Column Name",
headerRenderer: <renderHeader value={this.renderHeader()} />,
sortable: true,
filterable: true
},
Looks like a solution was checked-in for this almost a year ago. I do work on an intranet and don't have direct internet access for development so maybe i have an older version. Since I can't get the version in my environment I'll wait for someone to verify that the latest version works as expected before I accept my own answer (or I'll try to get the latest version with the change in there.)
One other thing I will have to do with the way the solution was implemented is stop propagation of the click event because in my custom header i have a ReactIcon that is clickable to change from status wording to a menu. So, if they click right on the icon in the header do the name/menu change and if they click anywhere else in the header then do the sort. I'll have to look up how to do that in React.
Update
I took the changes from the check-in in the link above and added them to my react-data-grid.js and it works great. I.e. I had to add the changes to the pure javascript version of the code that npm pulled into our node_modules.
I also did have to use e.stopPropagation() call in my headerRenderer like i thought i'd have to so that clicking the icon i have in the headerRenderer would not sort when click (but just do a different operation) but it was easy to add.
I do have one question about the change i made to my js which here is a piece of the change...
return React.createElement(
'div',
{className: className,
onClick: this.onClick,
style: {cursor: 'pointer'} },
React.createElement(
'span',
{ className: 'pull-right' },
this.getSortByText()
),
//change was here from just: this.props.column.name
this.props.column.headerRenderer? this.props.column.headerRenderer(this.props) : this.props.column.name
);
How would i have done this in JavaScript so that it would work whether my headerRenderer was ()=>{ return <span>...</span> } or <MyComponent /> ???
Since i always use functions for my headerRenderer i just did the change so that it worked the one way but would like to know how to make the change so it works both ways. Something like this? ...
this.props.column.headerRenderer?
(isFunction(this.props.column.headerRenderer)? this.props.column.headerRenderer(this.props) : React.createElement(this.props.column.headerRenderer, {...this.props}) )
:
this.props.column.name
????