Java Qui Nhon

filebrowserBrowseUrl and external file browser/uploader

https://ckeditor.com/old/forums/CKEditor-3.x/filebrowserBrowseUrl-and-external-file-browseruploader

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html

Thanks for your replies, it actually worked with some tweaking ...

window.parent.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, '/3.jpg', '' );

It goes back from the custom browser with the link and previews it just fine, so this (I think) is a complete working example:

editor.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>editor test</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/__ckeditor/ckeditor.js"></script>
</head>
<body>

<form method="post">
<p>
My Editor:<br />
<textarea name="editor1" id="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : '/browser/browse.php'
});
</script>
</p>
<p>
<input type="submit" />
</p>
</form>

</body>
</html>

browse.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browse test</title>

<script type="text/javascript">
function select_image() {
var CKEditorFuncNum = <?php echo $_GET['CKEditorFuncNum']; ?>;
window.parent.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, '/3.jpg', '' );
self.close();
}
</script>

</head>
<body>

<a href="javascript:select_image();">Insert this image</a>

</body>
</html>

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html

In order to integrate CKEditor 4 WYSIWYG editor with a file manager, you need to set the following configuration options:

The config.filebrowserBrowseUrl setting contains the location of an external file browser that should be launched when the Browse Server button is pressed.
The config.filebrowserUploadUrl setting contains the location of a script that handles file uploads. If set, the Upload tab will appear in some dialog windows — the ones where such functionality is available, i.e. Link, Image.

The sample below shows basic configuration code that can be used to create a CKEditor 4 instance with the file manager configured.

CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php'
});

Please note that the names of the file browser and uploader scripts used in this guide are just an example and should be replaced with your custom scripts or the scripts coming from an external tool, like CKFinder or a third-party file manager.

Webinar use one-click registration links for your events

https://help.webinarkit.com/help/how-to-use-one-click-registration-links-for-your-events

Get the one-click registration link for your event

First go to your webinars dashboard. Click the "Get links" option for the event you want. From the pop-up, click "Embed forms & links". From the dropdown, click "One-click registration links".

On the next pop-up that appears, select the date/time schedule that you want the one-click registration link to enroll registrants in. You can select any schedule you've added in your webinar settings. That means you can select "specific" session date/times, "ongoing" session dates/times (Example: The next session occurring on Friday at 3 PM), and just-in-time sessions. Instant watch sessions are also supported: Simply enable instant watch sessions in your webinar settings and the one-click registration link will override whatever date option is appended to the link.

After selecting the schedule you want your one-click registration link to use, copy the link.

Add registrant details to your one-click registration link

Now that you have your link, you'll need to append the registrant details to it before using it. Below is a simple example where we simply append an email address to the end of the link. This will create a registration for the event using the email appended to the link:

https://webinarkit.com/webinar/registration/oneclick/5d687beb805ba40017a18d0e?date=jit_15&email=somecontact@email.com

Notice in particular the "&email=somecontact@email.com". When setting up your one-click registration links, you'll need to replace "somecontact@email.com" with the contact's email address. Let's use a CRM/email platform as an example of how this would work in practice.

One-click registration links support the following fields appended to the URL:

email
first_name
last_name
phone_number_country_code
phone_number
custom_field_1
custom_field_2
custom_field_3
custom_field_4
custom_field_5

Customizing your one-click registration link with your CRM or email platform

Say you're setting up an email broadcast inviting your email list to register for your upcoming event. In your email, you would use the CRM/email platform's personalization/merge features to append the contact's email address to your one-click registration link. Below you'll see a screenshot example of what this looks like in the email platform ConvertKit:

Notice how the "{{ subscriber.email_address }}" is used. This will be replaced by the contact's actual email address when that contact receives the email which is how WebinarKit will fill in the registrant's details for the event. Please note, every email platform/CRM is different so you'll need to replace the "{{ subscriber.email_address }}" with whatever your platform uses for personalization. Also, please note, it is best to URL encode the data appended to the one-click registration link. Many CRMs/email platforms support this as well so please consult their documentation on how to do this.

Some more examples:

A one-click registration link that creates a registrant with Joe Schmo as the name, somecontact@email.com as the email, and some custom field data:
https://webinarkit.com/webinar/registration/oneclick/5d687beb805ba40017a18d0e?date=jit_15&email=somecontact@email.com&first_name=Joe&last_name=Schmo&custom_field_1=Some+custom+field+data

A one-click registration link that creates a registrant with contact data dynamically passed in via a CRM/email platform:
https://webinarkit.com/webinar/registration/oneclick/5d687beb805ba40017a18d0e?date=jit_15&email={!email}&first_name={!name}

Examples of personalization on popular CRM/email platforms:

Active Campaign
first_name=%FIRSTNAME%
last_name=%LASTNAME%
email=%EMAIL%

Aweber
first_name={!name} or firstname={!firstname}
last_name={!lastname}
email={!email}

ClickFunnels
first_name=#FIRST#
last_name=#LAST#
email=#EMAIL#
phone_number=#PHONE#

ConvertKit
first_name={{ subscriber.first_name }}
email={{ subscriber.email_address }}

Get Response
first_name=[[name]] or firstname=[[firstname]]
last_name=[[lastname]]
email=[[email]]

Keap
first_name=~Contact.FirstName~
email=~Contact.Email~

Create Custom PopUp Component in React

https://dev.to/g10dra/create-custom-popup-component-in-react-1o18

This blog is originally published at My Blog

Sometimes we fade up with using various modal box provided by Bootstrap or material or suppose we are not using any of these frameworks. then in such case we need to create our own component for Popups and Modal boxes, I created this for one of such requirement.

Before reading it if you want to take a look then try this demonstration

This will be a fully Reusable Component that we can Invoke from any of the component entire our project.

Step 1: Create a file named custom-popup.module.css with following code :

.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  cursor: pointer;
  color: #000;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px) {
  .popup {
    width: 70%;
  }
}

Step 2: Now create Popup Component with name CustomPopup.jsx with following code

import { useEffect, useState } from "react";
import popupStyles from "./custom-popup.module.css";
import PropTypes from "prop-types";
const CustomPopup = (props) => {
  const [show, setShow] = useState(false);

  const closeHandler = (e) => {
    setShow(false);
    props.onClose(false);
  };

  useEffect(() => {
    setShow(props.show);
  }, [props.show]);

  return (
    <div
      style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? "1" : "0"
      }}
      className={popupStyles.overlay}
    >
      <div className={popupStyles.popup}>
        <h2>{props.title}</h2>
        <span className={popupStyles.close} onClick={closeHandler}>
          &times;
        </span>
        <div className={popupStyles.content}>{props.children}</div>
      </div>
    </div>
  );
};

CustomPopup.propTypes = {
  title: PropTypes.string.isRequired,
  show: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired
};
export default CustomPopup;

This component using PropTypes, if you havent installed PropTypes in your project then do install that first using

npm install prop-types --save

Step 3: Invocation from another component

<CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>

It will need 3 props :
1: onClose – need a handler to do some activity after close
click in popup itself
2: show – pass the visibility of popup using boolean
3: title – provide the popup title

and Inside the you may pass any valid JSX that you want to render as content of popup

If you need a complete example how can we do utilise this PopUp Component then you may look into following code

import { useState } from "react";
import CustomPopup from "./CustomPopup";
import "./styles.css";

export default function App() {
  const [visibility, setVisibility] = useState(false);

  const popupCloseHandler = (e) => {
    setVisibility(e);
  };

  return (
    <div className="App">
      <button onClick={(e) => setVisibility(!visibility)}>Toggle Popup</button>

      <CustomPopup
        onClose={popupCloseHandler}
        show={visibility}
        title="Hello Jeetendra"
      >
        <h1>Hello This is Popup Content Area</h1>
        <h2>This is my lorem ipsum text here!</h2>
      </CustomPopup>
    </div>
  );
}

Thats it for this blog. you may reach out to me in case you have any doubts and suggestions please let me know in comments section.