Skip to content

Latest commit

 

History

History
242 lines (187 loc) · 6.3 KB

API.md

File metadata and controls

242 lines (187 loc) · 6.3 KB

Yeditor Api

How to take Yeditor into your system, use it as you wish..

How it works

Yeditor api exists in the main function. example:

var Yeditor = new Yeditor();
var Api = Yeditor.api;

Now Api reffer to Yeditor api

Ajax

This class send the editable area content into your server

Api.ajax;

addParam(Object)

Add data to ajax request - sending this data with save request
@Object

Api.ajax.addParam({name: '<DATA-KEY>', value: '<DATA-VALUE>'});

Code

For 'code' button in the main navigation - we are using CodeMirror so the api expose to you the CodeMirror options of the code button (codemirror) element

// the CodeMirror options will show up
Api.code

Navigation

Yeditor has three navigation

  • Main - exists at the top of the screen
  • Image - exists on each image (when image clicked)
  • Background - exists on each element with background (focus on the element)

The api options exists for all the navigation but each nav has own endpoint.

// navigation endpoint for using api options

// Main
Api.navigation.main

// Image 
Api.navigation.image

// Background
Api.navigation.background

element()

Return the navigation dom element

getAllButtonsName()

Get all the buttons name in the navigation
(helpfull for order the nav in Yeditor main function)

addButton(BUTTON_OBJECT)

Add custom button into the navigation

@param Object - user guide:

{
  name: // button name
  description: // what the button does - in short 
  class: // button class use Array ([]) for multiple classes - OPTIONAL
  text: // insert text into the button - OPTIONAL
  id: // button id - OPTIONAL
  element: // button element - DOM (it can be function thet return element) - OPTIONAL
  event: [// button event
    {
      name: // event name, example: 'click', 'change' - use the origin addEventListener name
      fn: // the function itself (what will happen)
    }
    // you can add multiple event
  ]
}

Selection

Do something with user selection

// for get the current user selection you need to call it like this:
var Selection = new Api.selection();

// now you can use the api selection functions with the Selection variable

get()

return user selection object

text()

return user selection text

parent()

return user selection area parent element

parentEditable()

Check if the parent of the selection area is editable
return false if the parent is not editable

insert(Node)

Insert element into the current location of the user selection
@Node is Node element

remove()

remove the user selection
return document fragment node

append(FN)

Take user selection text and append it into new element - usefull for bold / underline etc..
How @FN works:

Selection.append(function(text){
  var bold = document.createElement('span');
  bold.style.fontWeight = 'bold';
  bold.innerText = text; // the user selection text - from @text argument
  
  return bold.cloneNode(true);
});

Image

Helpfull functions for using in images with Yeditor

Api.image

base64(file, callback)

Get image file and return it as base64 data url
@file the image file
@callback (function) callback with 2 arguments (url, file)

example:

var imgFile = <IMAGE-FILE>;
var base64 = Api.image.base64(imgFile, function(url, file){
 // @url - file base64 data-url
 // @file - the original image file @imgFile
});

addBackground(url, element)

Add element background image
@url background image url
@element Node element - the element

insertImageIntoUserSelection(url)

Insert new image into user selection location
@url Image url

getURL(file, callback)

Get image or backround url by the user definition (Main function options - uploadImage)
If uploadImage option is not empty (null) - get the file url from your server (by uploadImage fn)
Else return file url as base64
@file the image file
@callback (function) callback with 1 argument (url)

example:

var imgFile = <IMAGE-FILE>;
Api.image.getURL(imgFile, function(url){
  var img = document.createElement('img');
  img.src= url;

  document.body.appendChild(img);
});

Edit image navigation

Image navigation api

Api.edit.image

getNavigation()

return navigation dom element

show(img)

Show navigation above the current @img

hide()

Hide navigation

setImage(img)

Set @img editable by the navigation
@img image dom element

setAllImages(element)

Set all images inside the @element as editable by the navigation
@element The parent dom element - all element children will be editable

getCurrentImage()

return the current editable image

setCurrentImage(img)

Set @img as the current editable image
@img image dom element

removeCurrentImage()

Remove current editing image (remove only the class attribute - that mean it is the current editable image)

Edit background navigation

Background navigation api

Api.edit.background

getNavigation()

return navigation dom element

show(bg)

Show navigation above the current @bg element
@bg The element with backgound

hide()

Hide navigation

setBackground(bg)

Set @bg editable by the navigation
@bg dom element with background

setAllbackground(element)

Set all backgrounds inside the @element as editable by the navigation
@element The parent dom element - all element children will be editable

getCurrentBackground()

return the current editable background

setCurrentBackground(bg)

Set @bg as the current editable background
@bg dom element with background

removeCurrentBackground()

Remove current editing background (remove only the class attribute - that mean it is the current editable background)