Index

Custom API

To integrate N1ED with your website you have a set of API-functions that you can use to attach N1ED to the specified buttons, text inputs, forms, and detach from them.

Installation

Insert his code in the end of the <body> of the page with the editor:

<script type="text/javascript" src="https://cdn.n1ed.com/cdn/xxxxxxxx/n1ed.js"></script>

where xxxxxxxx is the API key of your configuration. If you already use CKEditor from its official CDN, simply change the URL in your <script></script> tag to the above one.

Use the window.N1ED global object to get access to API functions, for example: N1ED.attachTo(...);

Please also refer to the Configuring file and image uploader to integrate tools to upload and storage files on your server.

The list of API functions

N1ED.attachTo (el, onAttached)

Attaches N1ED to the specified element.This function determines the type of the element passed in el and invokes N1ED.attachToElement, if the specified element is a simple HTML-element (for example, <div>) holding content as is. If el is a text input (<input> or <textarea>), the N1ED.attachToFormInput method is invoked instead.

Parameters:
  • el : HTMLElement

    An element with content to edit: <div>, <input> or <textarea>

  • onAttached : () => void = null

    Optional Callback, called when N1ED is attached to the element and is ready to work.

N1ED.attachToElement (el, onAttached)

Attaches N1ED to the specified <div> element. All content (inner HTML) is passed to N1ED and is refreshed upon invoking N1ED.detachFrom.

Parameters:
  • el : HTMLElement

    An element with content to edit: <div>, <input> or <textarea>

  • onAttached : () => void = null

    Optional Callback, called when N1ED is attached to the element and is ready to work.

N1ED.attachToFormInput (el, elPlaceHolder, onAttached)

Connects N1ED to the specified text input: <input> or <textarea>. The specified text input must be within a form. N1ED will attach its onSubmit event listener to that form to update the value of the text input before sending data to the server. That is, to use N1ED with an existing form, you only need to make this call, the rest is done by N1ED.

Parameters:
  • el : HTMLElement

    An <input> or <textarea> element with content as a value. The element will be hidden and editing will be transferred to a temporary <div>, created next to it or in elPlaceHodler if specified.

  • elPlaceHolder : HTMLElement = null

    An optional link to the <div> element where you want to display N1ED. If not specified, N1ED will create a temporary element next to the text input specified in el.

  • onAttached : () => void = null

    Optional Callback, invoked when N1ED is attached to the element and is ready to work.

N1ED.attachToButton (elBtn, getHtmlContent, setHtmlContent)

Attaches to a button and invokes N1ED in the fullscreen mode when the button is clicked. To acquire and save content, functions specified in the parameters are used. This means you can use this API call to integrate with any source of content on the page.

Parameters:
  • elBtn : HTMLElement

    A button element. You can pass any HTML-element here that works as a button in the application: starting from the <a> tag to <div> with content preview.

  • getHtmlContent : () => string|HTMLElement

    A function invoked before N1ED starts to receive original content. If it returns the content of the string type, it is interpreted as HTML. If an HTMLElement is received as a return value, it is used to wrap content as DOM. The element itself is cloned, so you can safely pass the element by reference without worrying it will be changed beyond your intention.

  • setHtmlContent : (asElement: HTMLElement, asHtml: string) => void

    A function invoked before the content finishes editing in N1ED. Inside this function you can save the resulting content to your data source. The values of the parameters asElement and asHtml are equivalent, but are presented in different formats (a DOM-element and HTML code respectively).

N1ED.detachFrom (el)

Detaches N1ED from the specified element.

Parameters:
  • el : HTMLElement

    An element to detach the instance of N1ED from. Pass the same element you passed to the attach-function (element, text input or button).