Don't worry about the uploadURL and uploadDir for now, we are going to set those using Yii so that they work correctly. You can read the kcfinder docs for more info on these. Make sure you set your permissions! If you get error messages later on, most likely you're either having a path issue or permissions issues.ĥ) Make any changes to kcfinder/config.php. My upload folder is located at sitefolder/uploads. I chose to create a new folder for this, in order to keep any uploads done by my clients separate from the other resources on the site. I put mine at sitefolder/kcfinder.Ĥ) Create a folder for your uploads, again, outside of protected. ( ) Extract and put it in the root folder outside of protected again. If you want to also allow images to be uploaded, make sure the basic editor is working, and then keep going.ģ) Download KCFinder. No weird extensions or anything like that. If all you wanted was the editor, then you're done! Simple as pie. Note the path on the javascript include should change if you installed somewhere else. textArea($ model, ' short_version', array(' id'=>' editor1')) ?> A quick example follows, the attribute of my model is called 'short_version': īecomes: baseUrl.'/ckeditor/ckeditor.js' ?>"> If you want to change the config options for buttons and such, do it in the config.js file.Ģ) Import the script file, give the textArea that you want to become an editor an id, and then initialize CKEditor on that textArea. I put mine in my root web folder for my site, so if sitefolder/protected is my protected path, I put mine at sitefolder/ckeditor. Here it is:ġ) Download the latest CKEditor ( ), unzip it, and move the contents to a folder OUTSIDE of your protected folder. All paths are relative, using Yii functions, so this will work no matter where you install. It will be used in a CActiveForm, without the use of any crazy weird widgets. Today I went through the process of adding CKEditor to one of my projects, and then integrating KCFinder as the image uploader. create( document.Hey guys, I'm hoping other people will find this helpful. In the simpleUpload config option, use the uploadUrl property to specify the URL of the image upload server-side script ( ck_upload.php).Specify some additional config options to the ClassicEditor.create() method to enable the server-side upload feature in CKEditor. create( document.querySelector( '#editor' ) ) Use the ClassicEditor.create() method to initialize the CKEditor plugin and replace the textarea element with the WYSIWYG editor. Include the library file of the CKEditor jQuery plugin. Create a textarea element that you want to replace with CKEditor. Note that: You don’t need to download the CKEditor separately, all the required files are included in our source code. make sure you selected the Simple upload adapter plugin at the time of creating the CKEditor build for download. In this example, we will use a Simple upload adapter to integrate server-side image upload functionality.Extract the downloaded CKEditor plugin archive and place it in the root directory. In this tutorial, we will show you how to upload image in CKEditor and insert the uploaded image into the editor content using PHP.īefore getting started, download the latest version of the CKEditor 5 Classic Package. If you want to upload the image to the server and insert this image in the editor content, custom image upload functionality needs to be integrated into CKEditor. The Image plugin is not allowed to upload images and insert them in CKEditor. In this case, you need to specify the URL of the image to insert into the editor content. The Image plugin of CKEditor helps to insert the image in the editor. The CKEditor plugin allows the user to insert HTML content in the textarea field and submit formatted text content to the server side. You can easily add WYSIWYG editor to textarea with CKEditor plugin. Generally, the WYSIWYG editor is used to replace the textarea for submitting the HTML content. CKEditor plugin provides the easiest way to add WYSIWYG Editor to the input field on the web form.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |