Page 1 of 1

HTML Editor: Upload & insert images

Posted: 2020-11-04 12:17
by sandro
Hi,

New to this forum but I've been using Appgini for my prototypes for several years.
I made this hook/extension long time ago, thought it might be usefull for some. Didn't find anything like this in this forum, hence my contribution.

This hook extends the functionality of the standard WYSIWYG editor Appgini uses by default for editing html fields. More specifically, this hook adds image upload functionality to the default NicEditor without touching the database. Nothing gets overwritten and no need for configuration inside your Appgini Project. You can use it side by side with the default-provided NicEditor. See attached screenshot.
Image

INSTRUCTIONS
------------------

- Create a folder inside the 'images' folder in the root of your generated application, name it 'uploadedImages'.*

- Create a folder inside your 'hooks' folder, name it 'editor'.

- Create 3 files inside the 'editor' directory: (provided as zip, attachment below)
  • nicEdit.js (a modified version of the default nicEdit.js)
  • nicEditorIcons.gif (extra buttons to be shown in the toolbar)
  • nicupload.php (php script that will provide upload functionality)**

- Change the template/custom view of that page to load this editor configuration instead:
  • this line:

    Code: Select all

    <script src="nicEdit.js"></script>
  • becomes:

    Code: Select all

    <script src="hooks/editor/nicEdit.js"></script>


* if you want to change the upload directory you'll need to provide another folder (step 2), and change the following lines inside nicupload.php accordingly:

Code: Select all

define('NICUPLOAD_PATH', '../../images/uploadedImages');

Code: Select all

define('NICUPLOAD_URI', '../../images/uploadedImages');
** by default this hook allows all (and only) logged-in users to upload images, if you want user/group-based authorization, change the top of the script accordingly. Check Appgini's custom page- documentation for this.

Re: HTML Editor: Upload & insert images

Posted: 2021-03-05 09:35
by ronwill
Very helpful, I have an issue with CKEDITOR not working as it did before since the last AG upgrade.
Your well explained solution for images in NICEDIT fixes one of the main reasons I moved from NICEDIT to CKEDITOR in the first place!
Thanks again for your contribution.
Cheers,
Ron

Re: HTML Editor: Upload & insert images

Posted: 2021-08-10 14:21
by A Bindi
sandro wrote:
2020-11-04 12:17
Hi,

New to this forum but I've been using Appgini for my prototypes for several years.
I made this hook/extension long time ago, thought it might be usefull for some. Didn't find anything like this in this forum, hence my contribution.

This hook extends the functionality of the standard WYSIWYG editor Appgini uses by default for editing html fields. More specifically, this hook adds image upload functionality to the default NicEditor without touching the database. Nothing gets overwritten and no need for configuration inside your Appgini Project. You can use it side by side with the default-provided NicEditor. See attached screenshot.
Image

INSTRUCTIONS
------------------

- Create a folder inside the 'images' folder in the root of your generated application, name it 'uploadedImages'.*

- Create a folder inside your 'hooks' folder, name it 'editor'.

- Create 3 files inside the 'editor' directory: (provided as zip, attachment below)
  • nicEdit.js (a modified version of the default nicEdit.js)
  • nicEditorIcons.gif (extra buttons to be shown in the toolbar)
  • nicupload.php (php script that will provide upload functionality)**

- Change the template/custom view of that page to load this editor configuration instead:
  • this line:

    Code: Select all

    <script src="nicEdit.js"></script>
  • becomes:

    Code: Select all

    <script src="hooks/editor/nicEdit.js"></script>


* if you want to change the upload directory you'll need to provide another folder (step 2), and change the following lines inside nicupload.php accordingly:

Code: Select all

define('NICUPLOAD_PATH', '../../images/uploadedImages');

Code: Select all

define('NICUPLOAD_URI', '../../images/uploadedImages');
** by default this hook allows all (and only) logged-in users to upload images, if you want user/group-based authorization, change the top of the script accordingly. Check Appgini's custom page- documentation for this.
What means exactly "Change the template/custom view of that page to load this editor configuration..." ?

Which file should be modified? I does not understand ...

ALex.

Re: HTML Editor: Upload & insert images

Posted: 2021-08-30 09:52
by A Bindi
Did someone get this hack to work ?

ALex.

Re: HTML Editor: Upload & insert images

Posted: 2022-11-22 09:09
by jfischer
Hallo

This line belongs in headers-extras.php.
<script src="hooks/editor/nicEdit.js"></script>

kind regards figo