What Will I Learn?
in this tutorial we will learn how to Integrate Ckeditor, Ckeditor is a flexible text editor that can be used to input text that will automatically be converted into HTML code, not only limited to that we can also add images and video with drag & drop feature into the editor. but we will also add the codesnippet plugin which allows us to insert the source code (syntax highlighting) into the editor without being converted properly, so that it will be displayed as a source code.
Requirements
- Installed Xampp Or Mampp for Web Server
- Basic Knowledge About PHP and PHP OOP Concept
- Basic Knowledge About HTML and CSS
- Downloaded Ckeditor You Can Download in this following LINK
Difficulty
- Basic
Tutorial Contents
To start creating web apps with Laravel, you need a web server and database engine. Please use Apache2 and MySQL for this Laravel. Then the minimum required PHP is the 5.6 version for compatibility with the various packages that Laravel has provided.
Download the Composer first from the link https://getcomposer.org/composer.phar. Then put it in a directory that you can memorize easily. Eg save in / opt / phar. Then please go to the / var / www / html directory or any other directory that will be used to save the Laravel project.
For example now we save this Laravel project in / var / www / html.
$ cd /var/www/html
$ php /opt/phar/composer.phar create-project --prefer-dist laravel/laravel laraweb
The default Laravel page can be accessed by accessing the URL
http: //localhost /laraweb /public/
Integrate CKeditor
Extract the CKeditor file that we have downloaded earlier and place it into the public folder in your Laravel project directory. Then create a blade file in the resources / views folder with the name, for example: post-add.blade.php
<script src="{{asset('assets/ckeditor/ckeditor.js')}}"></script>
<script>
var konten = document.getElementById("content");
CKEDITOR.replace(konten,{
language:'en-gb'
});
CKEDITOR.config.allowedContent = true;
</script>
In the text area that we will change to Ckeditor interface, create something like this following blockcode:
<textarea id="content" class="form-control" name="konten" rows="10" cols="50"></textarea>
Up to this point, Ckeditor has been successfully installed into Laravel and can be used properly.
Codesnippet Plugin
Now it's time we implemented one of the Codesnippet plugins that works to create syntax highligting on input source, then please download the following Ckeditor plugin: Codesnippet Plugin. Then place it into the **Ckeditor directory >> plugins **. Then edit the config.js file
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins = "lineutils,widget,codesnippet";
};
Up to this point Codesnippet is usable, but for those of you who want to be different on the snippet codenya by using the theme for example, can add the following code:
<link href="{{ asset('ckeditor/plugins/codesnippet/lib/highlight/styles/default.css') }}" rel="stylesheet">
<script src="{{ asset('ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js') }}"></script>
<script>hljs.initHighlightingOnLoad();</script>
Then edit the config.js file again, and add the following code:
config.codeSnippet_theme = 'YOUR_SELECTED_THEME';
change YOUR_SELECTED_THEME with the name of the theme you want. The theme names can be found in the directory: ckeditor / plugins / codesnippet / lib / highlight / styles
Fixed Codesnippet
When trying to edit the code that has been stored in the database, then if there is HTML-shaped source code, it will automatically be loaded like a browser reading HTML code. For example: you have the code in the form of input, then the result is a column to input. This will of course make you work for the second time to tidy up the code so that it will be displayed in the form of source code. So to fix this, please use:
htmlspecialchars
When reading data into text area that will load Ckeditor. Then use the following code:
htmlspecialchars($post->your_data)
That's what I can share on how to implement this tutorial ckeditor this time. If you have any questions, please ask the question in the comment field below.
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules, and is considered as spam.
Rule Says
Never Submitted Before
Contributions must be unique. Users must first check if the same or very similar contribution has been submitted before.
Same contributions will never be accepted in Utopian twice by the same or different user.
Contents already shared on the Steem blockchain in general may still be rejected if submitted in Utopian.
Contents already shared anywhere else may still be rejected if submitted in Utopian.
Same contents already shared before in Utopian or anywhere else by different users may still be rejected if a moderator recognises plagiarism.
You already shared same content here
You can contact us on Discord.
[utopian-moderator]
Hello mr @rufans my previous contributions were not included in the utopian system. This contribution should still be new in utopian. You can check by typing this link
https://utopian.io/@vanessaayumi/integrating-ckeditor-in-laravel-framework-based-web-application
It's not showed in Utopian , Thanks
Hey @rufans, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
momodnya kejam bg @iqbalhood
Memang gitu dia , padahal yang sebelumnya nggak masuk di utopian di salahkannya aja , resiko lah sekarang main di utopian berharap keajaiban aja lah :D
awak kemarin memang awak pastikan ke momod, kalau upload ulang bisa gak. katanya bisa, awak gas lah