fosckeditor bundle - cannot configure extra plugins - symfony

I downloaded the friendsofsymfony/ckeditor-bundle, added extraPlugins and their config is not being applied. My config:
# config/packages/fos_ck_editor.yaml
fos_ck_editor:
default_config: my_config
configs:
my_config:
toolbar: [ ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'Outdent', 'Indent'] ]
extraPlugins: 'wordcount,notification'
wordcount:
showWordCount: false # disable this
showCharCount: true # enable this
plugins:
wordcount:
path: '/bundles/fosckeditor/plugins/wordcount/'
filename: 'plugin.js'
notification:
path: '/bundles/fosckeditor/plugins/notification/'
filename: 'plugin.js'

Related

Build issue with vite related to styled component

I am getting below error while budling for production using vite , The build is working fine locally .
Here is the error ,
Error: [vite]: Rollup failed to resolve import "react-is" from "../../node_modules/styled-components/dist/styled-components.browser.esm.js".
Can anyone please suggest
I tried to add below plugin in vite config js but its not working
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
displayName: true,
fileName: false,
},
],
],
},
}),
];

Sourcemaps with require.js

I am using grunt-contrib-requirejs to munge my files into a single file and generate a sourcemap. The sourcemap seems to be valid but is 6 lines off in the debuggers in both Chrome and Firefox. I have googled quite a bit but can't find any reasons why this would happen. Has anyone else come across a similar problem?
This is a very large project with about 200 files, i've c/p my grunt config for reference.
dev: {
options: {
baseUrl: 'assets/javascript',
optimize: 'none',
generateSourceMaps: true,
mainConfigFile: 'assets/javascript/requireconfig.js',
name: 'app',
preserveLicenseComments: false,
include: [
'plugins/dropdown-toggle',
'brand/modules/checkmate-init',
'brand/modules/batch-handler',
'brand/modules/dataset-editors',
'brand/modules/recording-editors',
'brand/modules/recording-state'
],
out: 'public/assets/js/myapp.js'
}
},
dist: {
options: {
baseUrl: 'assets/javascript',
optimize: 'uglify2',
generateSourceMaps: false,
mainConfigFile: 'assets/javascript/requireconfig.js',
name: 'app',
include: [
'plugins/dropdown-toggle',
'brand/modules/checkmate-init',
'brand/modules/batch-handler'
],
out: 'public/assets/js/myapp.js'
}
}
This could be related to an issue with https://github.com/requirejs/requirejs/issues/1054
Adding to r.js config:
skipPragmas:true
Did the trick for me.
r.js config:
https://github.com/requirejs/r.js/blob/2.2.0/build/example.build.js#L299

LiipImageBundle & KNP Gaufrette bundle failing to resolve s3 image path?

I am using LiipImageBundle & KNP Gaufrette bundle to resize & load images from s3. It was all working before but suddenly it stopped working. There are no bundle version upgrades.
Below is my configuration,
liip_imagine:
cache: aws_s3_images
data_loader: stream.aws_s3_images
filter_sets:
large:
quality: 75
cache: aws_s3_images
data_loader: stream.aws_s3_images
filters:
relative_resize: { widen: 140 }
medium:
quality: 75
cache: aws_s3_images
data_loader: stream.aws_s3_images
filters:
thumbnail: { size: [50, 50], mode: outbound }
small:
quality: 75
cache: aws_s3_images
data_loader: stream.aws_s3_images
filters:
thumbnail: { size: [25, 25], mode: outbound }
loaders:
stream.aws_s3_images:
stream:
wrapper: gaufrette://aws_s3_images_fs/
knp_gaufrette:
adapters:
aws_s3_images_adapter:
aws_s3:
service_id: 'st.aws_s3.client'
bucket_name: %amazon.s3.bucket%
options:
#directory: 'fos'
create: true
filesystems:
aws_s3_images_fs:
adapter: aws_s3_images_adapter
stream_wrapper: ~
The problem is strange, if I open image in new tab, it redirects to s3 image url and displays image. Once it loads in new tab, then it starts displaying normally. It doesnt work unless I open it new new tab.
is it not resolving s3 path ? What could be the issue ? I tried deleting all cache, I don't have media folder in my web directory.
In log it shows ImagineController:FilterAction is called.
In html source image path is
http://st.com/app_dev.php/media/cache/resolve/large/fos/user/ebc36103e6d1038791eb7eca2f4449db0780fdf41416235134.jpeg
Now if I open it in new tab/window, it will redirect to
[MY_S3_BUCKET_URL]/fos/user/large/ebc36103e6d1038791eb7eca2f4449db0780fdf41416235134.jpeg
and will display image in new window.
Now if I again refresh my page, image source is now changed to
[MY_S3_BUCKET_URL]/fos/user/large/ebc36103e6d1038791eb7eca2f4449db0780fdf41416235134.jpeg
and now I can see image loaded ?
Why it started happening suddenly. It was all working properly before.
After going through all the code of LiipImaginBundle & debugging, it turned out to be content type issue which was caused by FOSRestBundle's
format_listener:
rules:
- { path: '^/', priorities: [ '*/*' ], fallback_format: html, prefer_extension: true }
Changing it to
format_listener:
rules:
- { path: '^/', priorities: [ 'html', '*/*' ], fallback_format: html, prefer_extension: true }
fixed the issue.

Upload an Image from CKeditor with SonataMediaBundle and CoopTilleulsCKEditorSonataMediaBundle

I managed to run the upload images via WYSIWYG CKEditor using SonataMediaBundle and CoopTilleulsCKEditorSonataMediaBundle.
The Upload works very well for ADMIN users, but does not work for users with the USER_ROLE,
Do you know how can I resolve that? thank you very much
Thank you !
config.yml
# SonataMediaBundle
sonata_media:
class:
media: Application\Sonata\MediaBundle\Entity\Media
gallery: Application\Sonata\MediaBundle\Entity\Gallery
gallery_has_media: Application\Sonata\MediaBundle\Entity\GalleryHasMedia
default_context: default
db_driver: doctrine_orm # or doctrine_mongodb, doctrine_phpcr
contexts:
default: # the default context is mandatory
download:
strategy: sonata.media.security.connected_strategy
mode: http
providers:
- sonata.media.provider.dailymotion
- sonata.media.provider.youtube
- sonata.media.provider.image
- sonata.media.provider.file
formats:
small: { width: 100 , quality: 70}
big: { width: 500 , quality: 70}
news:
download:
strategy: sonata.media.security.connected_strategy
mode: http
providers:
- sonata.media.provider.youtube
- sonata.media.provider.image
formats:
small: { width: 80 , quality: 70}
big: { width: 500 , quality: 90}
cdn:
server:
path: /uploads/media # http://media.sonata-project.org/
filesystem:
local:
directory: %kernel.root_dir%/../web/uploads/media
create: false
providers:
image:
service: sonata.media.provider.image
resizer: sonata.media.resizer.simple # sonata.media.resizer.square
filesystem: sonata.media.filesystem.local
cdn: sonata.media.cdn.server
generator: sonata.media.generator.default
thumbnail: sonata.media.thumbnail.format
allowed_extensions: ['jpg', 'png', 'jpeg']
allowed_mime_types: ['image/pjpeg', 'image/jpeg', 'image/png', 'image/x-png']
# FOSRestBundle
fos_rest:
view:
formats:
json: true
# CmfCreateBundle
cmf_create:
object_mapper_service_id: cmf_create.persistence.orm.object_mapper
# IvoryCKEditorBundle
ivory_ck_editor:
configs:
user_config:
toolbar: [ [ 'Cut','Copy','Paste','PasteText','PasteFromWord']
filebrowserUploadRoute: admin_sonata_media_media_upload
filebrowserBrowseRoute: admin_sonata_media_media_browser
filebrowserImageBrowseRoute: admin_sonata_media_media_browser
# Display images by default when clicking the image dialog browse button
filebrowserImageBrowseRouteParameters:
provider: sonata.media.provider.image
filebrowserUploadRoute: admin_sonata_media_media_upload
filebrowserUploadRouteParameters:
provider: sonata.media.provider.file
# Upload file as image when sending a file from the image dialog
filebrowserImageUploadRoute: admin_sonata_media_media_upload
filebrowserImageUploadRouteParameters:
provider: sonata.media.provider.image
context: news # Optional, to upload in a custom contexta custom context
admin_config:
toolbar: full
uiColor: "#000000"
filebrowserBrowseRoute: admin_sonata_media_media_browser
filebrowserImageBrowseRoute: admin_sonata_media_media_browser
# Display images by default when clicking the image dialog browse button
filebrowserImageBrowseRouteParameters:
provider: sonata.media.provider.image
filebrowserUploadRoute: admin_sonata_media_media_upload
filebrowserUploadRouteParameters:
provider: sonata.media.provider.file
# Upload file as image when sending a file from the image dialog
filebrowserImageUploadRoute: admin_sonata_media_media_upload
filebrowserImageUploadRouteParameters:
provider: sonata.media.provider.image
context: news # Optional, to upload in a custom contexta custom context

How to format an image tag within a template when using streams with LiipImagineBundle

If I configure LiipImagineBundle to use a stream data loader, How do I then craft an image tag to use that data loader within a template?
Updated Config
knp_gaufrette:
adapters:
image_storage:
amazon_s3:
amazon_s3_id: namespace_admin.amazon_s3
bucket_name: %amazon_s3_bucket_name%
create: false
options:
create: true
directory: 'mydir'
region: %amazon_s3_region%
filesystems:
image_storage:
adapter: image_storage
alias: image_storage_filesystem
s3_storage:
adapter: image_storage
stream_wrapper:
protocol: data
filesystems:
- s3_storage
namespace_admin:
amazon_s3:
aws_key: %amazon_aws_key%
aws_secret_key: %amazon_aws_secret_key%
aws_region: %amazon_s3_region%
base_url: %amazon_s3_base_url%
liip_imagine:
loaders:
stream.my_namespace_images:
stream:
wrapper: data://s3_storage
resolvers:
default:
web_path: ~
filter_sets:
cache: ~
gi_thumb:
data_loader: stream.my_namespace_images
quality: 75
filters:
thumbnail: { size: [120, 90], mode: outbound }
There are two things, you need to do.
The gi_thumb filter needs to set the data_loader to stream.get_inspired_images.
In your template you just call the imagine_filter on a file path that's loadable by that loader: {{ '/example/path/image.png'|imagine_filter('gi_thumb', true) }}
This would load this image: http://your-bucket.s3.amazonaws.com/example/path/image.png.

Resources