HTML Editor: Upload & insert images

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
sandro
Posts: 2
Joined: 2020-10-29 13:13

HTML Editor: Upload & insert images

Post by sandro » 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.
Attachments
Screenshot_3.jpg
Screenshot_3.jpg (16.87 KiB) Viewed 6006 times
editor.zip
(17.55 KiB) Downloaded 232 times

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: HTML Editor: Upload & insert images

Post by ronwill » 2021-03-05 09:35

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
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

A Bindi
Veteran Member
Posts: 51
Joined: 2018-01-04 18:45

Re: HTML Editor: Upload & insert images

Post by A Bindi » 2021-08-10 14:21

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.

A Bindi
Veteran Member
Posts: 51
Joined: 2018-01-04 18:45

Re: HTML Editor: Upload & insert images

Post by A Bindi » 2021-08-30 09:52

Did someone get this hack to work ?

ALex.

jfischer
Posts: 23
Joined: 2022-11-19 16:07
Location: Austria
Contact:

Re: HTML Editor: Upload & insert images

Post by jfischer » 2022-11-22 09:09

Hallo

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

kind regards figo

Post Reply