My Symfony2 project has a composer.json file which references the CKEditor package:
"require": {
...
"ckeditor/ckeditor": "4.4.*"
},
When I include the main Javascript file in my Twig view:
{% javascripts
'../vendor/ckeditor/ckeditor/ckeditor.js'
%}
<script src="{{ asset(asset_url) }}"></script>
{% endjavascripts %}
it renders a script path with the following URL:
http://myproject.local/app_dev.php/js/1c365ca_ckeditor_2.js"
This would be fine if it was a standalone Javascript file, but ckeditor.js is unable to reference its many other dependencies in the vendor/ckeditor directory. Even if I explicitly included them all with assetic, I'd be unable to update their relative paths so that they could be seen by ckeditor.
I'm sure this issue applies with all large Javascript libraries. How is this normally approached?
I had exactly the same problem and I think assetic is not the best tool when dealing with third party standalone libraries, which are not integrated in bundles.
So I found a workaround by creating a symboling link to ckeditor vendor directory in the web directory of my symfony project:
cd web
ln -s ../vendor/ckeditor/ckeditor/ ./ckeditor
Then in my twig template I call the CKeditor script like this:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
// Change CKeditor basepath configuration
CKEDITOR.basePath = "/ckeditor/";
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
Have a look on the CKEditor bundle : Github - Packagist
This bundle is an integration of CKEditor for Symfony.
You can insert CKEditor area in your form.
Related
I've downloaded a base template from this GitHub Repo based on the following dashboard gentella.
I install the inputmask library with the following command:
npm install inputmask --save
But reading and reading, I'm not sure which is the correct step to integrate the same into an HTML page, I read about mix, saas, Compiling Assets (Laravel Mix).
I try with this:
<script type="text/javascript" src="{{ URL::asset('js/inputmaskpath.js') }}"></script>
and this:
#section('scripts')
{{ Html::script(mix('assets/js/inputmask.js')) }}
#endsection
The question finally is, how import inputmask into my HTML page and what it is the correct path?
When you use npm to download packages, they will be downloaded in node_modules folder and they are not (directly) included/loaded into your project.
You use Laravel Mix to handle the assets compilation. So in your scenario you could handle it as the following:
First of all create a javascript file in resources/assets/js called app.js. Add the following code to be able to load the downloaded package
require('inputmask');
Then using Laravel mix you can compile app.js to produce for you one javascript file. Modify webpack.mix.js in your Laravel root folder to the following
mix.js('./resources/assets/js/app.js', 'public/js/app.js');
Now in your view you could load the javascript file as the following
<script src="{!! mix('js/app.js') !!}"></script>
So, in case of another downloaded package, you install it with npm first, then in your resources/assets/js/app.js file you require that package. Then Laravel mix will take care of combining all required packages into one javascript file.
I suggest you read this documentation for more information about Laravel Mix. This tutorial is useful also.
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
I am new to a Symfony 2 project that contains an SCSS file in the Resources folder: myproject.scss
In the head of the HTML files, the css version of this file gets included:
#MyBundle/Resources/public/css/myproject.css
PHP Storm indicates "Missing asset". The HTML cannot be rendered, Symfony2 says that the asset is missing.
I have never worked with SCSS. How do I achieve that on file change of my scss file the css file gets created/updated and Symfony2 no longer indicates a missing asset for my css path in my HTML file?
What I have done so far in order to solve this problem:
I installed SASS and Compass via the Ruby gem manager.
In PHPStorm, I configured a file watcher "SCSS", referencing to C:\Ruby\bin\scss.bat
After installing SCSS compiler and setting the right path in File Watcher settings your css will be generated every time you change your .scss file. This .css file is located by default near original .scss and so to copy it into the web directory you need manually copy it every time or configure your file watcher to do it for you instead.
Also you can configure scssphp assetic filter to do it instead of PhpStorm. It will generate new css file every time you run php app/console assetic:dump command or every time asset is loaded via assetic controller.
To work with Assetic you need next code:
{% stylesheets filter="scssphp" output="css/myproject.css"
#MyBundle/Resources/myproject.scss
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I download the ckeditor and would like to integrate that in my website which is built using Symfony 2.5, reading from the documentation it seems that all third party code should go inside the vendordirectory but then what? is that all? if i put all ckeditor code inside the vendor directory then what about the js files? dont they go inside a view? I have been searching online for a solution to this and most of them seem to be pointing towards using a bundle available online which i would like to avoid and leave that as my last resort.
I have used ckeditor before with custom php and this is my first time with symfony framework, I know we are supposed to create a textarea and assign it an id or a class but what i am looking for is steps before this, for example
1) Add ckeditor to vendor
2) add it to auto load or something
3) ...
I will really appreciate if someone can direct me on how to do it?
I am not sure if this is the right way to do it but this is what worked for me.
I ended up copying the ckeditor files inside bundle/Resources/public/js
Install the assets by running the command php app/console assets:install
In your twig file add the <script src="{{ asset('bundles/blog/js/ckeditor.js') }}"></script> (please make sure to change this to your bundle name)
Assign class ckeditor to your textarea field, this is how I did it {{ form_widget(form.description, { 'attr': {'class': 'ckeditor'} }) }}
and I can see the editor on my screen
If anyone else has a better idea (other than using a bundle) I would love to hear from them
Baigs answer will work, but a problem arises when you use CKEditor in different bundles, as you will be coping the whole source directory as an asset for each bundle.
Another solution is to use "egeloen/ckeditor-bundle": "~2.0", in your composer.
You can then create a ckeditor input field in your Form and reference that in your twig file.
You can also create a ckeditor element as per the CKeditor manual in your twig page directly via javascript.
<script src="/bundles/ivoryckeditor/ckeditor.js"></script>
....
<textarea id="editor1"></textarea>
...
<script>
CKEDITOR.replace('editor1');
</script>
Note that custom plugins can be pain, the plugin needs to be stored in the project web directory, but this gets deleted everytime you update composer and dump assets. My solution to this was to create a project scriptHandler which is run with composer and copies the source files into the web public directory on update.
Like mark wrote you could use IvoryCKEditorBundle
http://symfony.com/doc/master/bundles/IvoryCKEditorBundle/installation.html
Once installed, if you want to add plugins you can use the configurations like below:
ivory_ck_editor:
default_config: default
plugins:
block:
path: "/bundles/mybundle/js/ckeditor/plugins/block/"
filename: "plugin.js
.....
configs:
default:
extraPlugins: "block"
....
toolbars:
configs:
default: ["Block"]
In my case I have a Symfony bundle called MyBundle. In Resources/public/js I have my js files.
When I load the assets, my files are pushed to the web folder /bundles/mybundle/js.
In the configuration I tell the IvoryCKEditorBundle to look for a new plugin files in that folder.
After in my default configuration, I enable my new ckeditor plugin.
And in the last line I add the new plugin to the toolbar.
I tried to integrate Twitter Bootstrap 3.2 on my Symfony 2.3 project.
Just found Tutorials for Bootstrap 3.0 with leafo/lessphp , but this is not supported anymore and in addition it is not working for Bootstrap 3.2 . I found nothing similar to leafo/lessphp that supports the latest Bootstrap version.
Is there any way to integrate Bootstrap 3.2 on a Symfony 2.3 project ?
Regards
symfony 2.6 Simple install and update via composer. It is just for fonts,css,js.
composer.json
"require": {
"twbs/bootstrap": "~3.3"
}
"post-install-cmd": [
"php -r \"if (!file_exists('web/bundles/bootstrap/')){ symlink(__DIR__.'/vendor/twbs/bootstrap/dist', 'web/bundles/bootstrap');}\""
]
"post-update-cmd": [
"php -r \"if (!file_exists('web/bundles/bootstrap/')){ symlink(__DIR__.'/vendor/twbs/bootstrap/dist', 'web/bundles/bootstrap');}\""
]
base.html.twig
<link href="{{ asset('bundles/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet"/>
<script src="{{ asset('bundles/bootstrap/js/bootstrap.min.js') }}"></script>
Then run command in web root
composer update twbs/*
It depends from what do you mean by integrating: if you mean just including the CSS and JS files, just download them,include them in your assets folder and require them from you templates.
If you want to have control over the way the LESS/SASSS source is generated, you may be interested on this bundle [which did magically show up as the first result after googling for "symfony bootstrap"].
You have just to include CSS and JS files in twig file like this :
<link rel="stylesheet" href="{{asset('bundles/bundleName/css/bootstrap.css')}}">
<script src="{{ asset('bundles/bundleName/js/bootstrap.min.js') }}" ></script>
Sorry for being unclear.
I'm using composer and config.yml to load the files.
I also took a look yesterday at the bundle (first result), but for bootstrap 3.0 there was an easy way to configure, so i asked myself if there was also an easy way to do it with bootstrap 3.2.
I don't want to include the js and css files manually, want to let this be done by composer / Symfony.
This was the way it worked with bootstrap 3.0:
http://mossco.co.uk/symfony-2/symfony-2-and-bootstrap-3-assetic-config-and-base-html-template-file/
As the less is not supported / developed anymore, it doesnt work for 3.2 bootstrap.
Hope the question is now clearly enough. If theres any approach without the bundle you'd really help me.
If this is the easiest and most reliable way: https://github.com/braincrafted/bootstrap-bundle
i will use that bundle.