@ngochipx/nhfinder-ant3

NHFinder

NHFinder is a simple photo manager. Can integrate with CKEditor (has been customized).

Files

Source includes:

1. build-inline: The custom ckeditor set can be integrated with NHFinder.
2. nodejs: Back-end of NHFinder
3. reactjs: Front-end of NHFinder

Install

yarn add @ngochipx/nhfinder

Using

1. Create file config/nhfinder.js for the backend.

module.exports = {
ROOTDIR:  __ROOTDIR__, //The absolute path to the root directory.
UPLOAD_PATH:  __ROOTDIR__ + '/public/uploads/', //The absolute path to the upload folder.
PUBLIC_PATH:  '/uploads', //public path. For example, http: // localhost: 3000 / uploads / then enter: / uploads
DOMAIN:  'http://localhost:3000', //Domain used for image links.
ALLOW_EXTENSIONS: ['.jpg','.jpeg', '.png', '.bmp', '.gif','.txt'], //Extensions are allowed to uploads.
API_KEY:  "123456" //API Key uses security between client and server.
};

2. In the routes file of the backend (use express). Add:

...
const  nhfinderConfig = require('config/nhfinder.js')
const  nhfinderRoutes = require('@ngochipx/nhfinder/nodejs/routes')(nhfinderConfig)

....
Route.use('/nhfinder', nhfinderRoutes) //You can change the link finder if you want.
...

3. Create folder uploads like config in step 1. chmod 777. example:

mkdir ./public/uploads chmod 0777 ./public/uploads

4. Import css in frontend's global file:

...
import '@ngochipx/nhfinder/reactjs/dist/main.css'

5. In front-end. In the component need to integrate NHFinder:

....
import  NHFinder  from  '@ngochipx/nhfinder/reactjs'
...
initEditor = async () => {
	this.CKEditor = require("@ckeditor/ckeditor5-react");
	this.InlineEditor = require("@ngochipx/nhfinder/build-inline");
}
...
render(){
	return ... <this.CKEditor  editor={this.InlineEditor}
		data="<b>Click here to insert content ...</b>"
		onInit={editor  => { this.editor = editor}}
		config={{
			imageManagement: {
			component:  this.refNHFinder,
			options: {
				apiUrl:  "http://localhost:3333/api/v1/nhfinder",
				apiKey: "123456" //should match the backend ApiKey.
		}}
	/>
	...
	<NHFinder  ref={ref => this.refNHFinder = ref}  />
}

6. Independent use (No need for CK Editor)

...
import  NHFinder  from  '@ngochipx/nhfinder/reactjs'
...

showNHFinder(){
	this.refNHFinder.show()
}
render(){
	return 
	...
	<NHFinder  
		ref={ref => this.refNHFinder = ref}  
		options ={{
			apiKey: "123456", //API KEY
		    directorySelected: "/", //Default selected folder
		    apiUrl: "http://localhost:3333/api/v1/nhfinder"
		    onChooseImages: (images) => { console.log(images); } //Callback function every time you select images.
		}}
	/>
}

ngochip