Documentation

How to install:

Base Install.
Unzip into web folder, the base install is finished, visit the userentry.html page to load editor.
Base install compatible with FireFox Chrome IE 9+ Safari.

Google Fonts.
https://developers.google.com/apis-explorer/#p/
For fonts go to google API for a API Google Font Key and set key in quotes under variable GoogleFontKey:’Your API Key’, in the GoogleFonts.js script.

CKEditor.

Visit http://ckeditor.com build a inline editor with appropriate toolbars for your needs.
Unzip CKEditor into the /js folder.

In pneconfig.js settings the install path should match the installed CKEditor , and set CKEditor to true.

CKEditor : true,
CKEditorInstallPath : “js/ckeditor/ckeditor.js”,

If you are using CKEditor you will need to config the toolbar in CKEditor for desired options.

Style Sheets & Matching Styles With Templates.

In the CSS folder there is plugnedit.css

The file is a base file for matching styles in the editor with website templates and browsers.
In the blank.html file you will include the CSS link in the head, and in the head of templates that load PNE pages.

If you are loading pages with the templates into the editor you would not link the files.

 

PlugNedit Flux Version 1.0.2

flxmth

 

Documentation is not 100% accurate, some of the calls are being fazed in or out, new documentation will be out shortly. Check for updates to the documentation at Flux Documentation. PlugNedit is built into two Javscript sections, the core program and the toolbar interface. For easy modifications to the javascript a toolbar section is provided, you may call your own custom functions before and after each call to the editor core.

 

Saving.

PlugNedit.CanvasHTML : string

HTML is stored in CanvasHTML variable when user is finished editing.

You can find the settings in the pneconfig file under CloseEditor() function.

 

Before The Editor Loads.

PlugNedit.PrepEnvironment()

Plug N Edit looks to see if a PNE page is being loaded, If not it preps the page for a drag and drop environment.

Templates.

The current set up can also be used if a fixed static template with the offset top at 0px. For use in none static pages where the head needs to push the content down the page, you will need to set up the PlugNedit.PrepEnvironment() to append the PNE html insert (We will have this auto configured in the next release). into  the main body of the template. The  PlugNedit.SetPageOffsets() changes the editors offset to match the offset of a template.

 

Config Settings.
PNE configuration in pneconfig.js

 

PNEtoolbaroffset : Array

Scroll offset for toolbars, 0 for fixed, or scroll @ number px.
EditorMinLeft : Number
EditorMinTop : Number

Stops the editor from allow objects to move off users screen, padding in pixels.

JSCorlor : True / False

JScolorInstallPath : String

Alternate color picker for support of  IE 9+

CKEditor : false

Ckeditor Installed true false.
CKEditorInstallPath :String
Ckeditor install path, relative path to CKEditor.
FontFramePath : String

Font frame name.
MarginHeight : Number

Margin height to be preset when editor loads in pixels.
MarginWidth : Number

Margin width to be preset when editor loads in pixels.
Rulers : True / False

Not in use, display rulers on load.

Debug :  True / False

Displays debug screen.

MarginColor : String

Color of margin.
GuidesColor : String.

Color of guides.
GuidesSnapColor : String

Guides color when snapped.
DisplayMenu : String

Hides menu on resize and move blank for display, block, or none.

NudgeDisplay : String

Hides nudge display on resize and move. blank for display, block, or none.
DisplayMiniTools : String

Blank display, block, or none.
EditorToolbarOffsetTop : String

Toolbar offset from the top of the current active toolbar.
SaveContent : String

Save content : page, body or editor objects.

TypeAdaptive  : True / False

Page type adaptive , creates multiple canvas.

CanvasObjects : Array

Used with TypAedaptive, names of canvas to build.

 

Core Objects:

 


Current Active Layer Objects:


PlugNedit.CurrentLayerNumber: Number

Current layer number active for editing.


PlugNedit..CurrentLayerObject.Editor: Object

Current editor layer object active.


PlugNedit.CurrentLayerObject.Editable: Object

Current inner object editable Div/Image.


PlugNedit.CurrentLayerObject.Container: Object

Current container layer Active.


PlugNedit.CurrentLayerObject.HTMLDIV : Object

Current Inner div edtiable.


 

PlugNedit.GetEditorObject : Object

Retrieves a editor object. example.

 

EditorLayer()
LayersMenu()
ToolBar()
SnapDisplay()
LayerOptionsDialogBox()

ToolTip()
EditorMirrorCanvas()
LayerNamesInput()
LayerNameDialogBox()
LayerNumberUpdate()
NewLayerName()
OptionsImageSrc()
CustomUrl()
OptionsLinkTarget()
PageHTML()
OverFlowVisible()
LayersPallet()
CrossHairs()
MirrorCanvasContainer()
MirrorCanvasTools()
OptionStylesSelect()
OptionMenuStylesSelect()

SideBarButtons()
LeftSideButtons()
MarginsWidthInput()
DisplayCanvasToggle()
Pencil()
ResizeMove()
Resize()
Menu()
ImageActual()
Constrain()
WhiteSpace()
LoadEditor()
Locked()
UnLocked()
MenuContainer()
NudgeDisplay()
GuidesLeft()
GuidesTop()
GuidesBottom()
GuidesRight()
GuidesCenterH()
GuidesCenterV()
ActualImageChords()
ImageHeightChord()
ImageWidthChord()
TopPositionChord()
LeftPostionChord()
HeightChord()
WidthChord()
SwatchMenu()
EditableSource()
RulersLeft()
RulersRigh()
EditorGrids()
RightClickMenu()
GuidesContainer()
EditorCanvasCover()
InputEmbedMenu()
ColoredCover()
OptionsLayerName()
OptionsURLsrc()
OptionsCustomURL()
OptionsHyperLinkSelect()
OptionsLinkTarget()
OptionsOffsiteDiv()
HTMLSubmitWindow()
EntryPageSelection()
MiniToolbar()
MarginCenter()


PlugNedit.GetCanvasObject : Object

Retrieves a canvas object. example: PlugNedit.GetCanvasObject.EditableLayer()  

 

EditableLayer()
LayerLink()
ContainerLayer()
LayerLink()
Spacer()
Canvas()
MobileCanvas()
FixedCanvas()

 


PlugNedit.CurrentWindow : String

Current window name active.


PlugNedit.PNEMouseXY : String

X,Y Mouse Chords


PlugNedit.EditorOffsetY : number

Editor offset Y Chord.


PlugNedit.EditorOffsetX : number
Editor offset Y Chord.


PlugNedit.BrowserElementCurTag : String

Currrent tag name user has clicked or mouse over.


PlugNedit.CurrentObjectID

Current object ID active.


PlugNedit.LockedElement : String

currently layer locked by the editor.


PlugNedit.LockPreSourceElement : String

Mouse over layer object that may be selected.


PlugNedit.ProximityHot : Boolean

Boolean true / fasle, within editor drag option.


PlugNedit.ProximityLock : Boolean

Boolean true / false, Editor is in object re-size Lock.


PlugNedit.LockPreSourceElementID  : String

Mouse over, current object ID.


PlugNedit.ObjLayer : String

Current object layer selected.


PlugNedit.IDivLayer : String

Current internal div layer selected for formatting content editable.


PlugNedit.ImageNumber : Number

Current image layer number count for new layers.


PlugNedit.LayerNumber : Number

Current layer number count for new layers.


PlugNedit.LayerName : String

Current layer name.


PlugNedit.StepCount : Number

Offset step for new layers.


PlugNedit.LayerAttributeWidth[] : Array

Array of layer attribute widths. usage PlugNedit.LayerAttributeWidth [ Layer Number Of Object]


PlugNedit.LayerAttributeHeight[] : Array

Array of layer attribute height. usage PlugNedit.LayerAttributeHeight [ Layer Number Of Object]


PlugNedit.LayerAttributeTop[] : Array

Array of layer attribute top postion. usage PlugNedit.LayerAttributeTop [ Layer Number Of Object]


PlugNedit.LayerAttributeLeft[] : Array

Array of layer attribute left postion. usage PlugNedit.LayerAttributeLeft [ Layer Number Of Object]


PlugNedit.LayerPadding[] : Array

Array of layer attribute padding. usage PlugNedit.LayerAttributePadding[ Layer Number Of Object]


PlugNedit.EditorLayer : String

Object false for none, or current editor object layer active.


PlugNedit.VisToggle : Boolean

Not in current use.


PlugNedit.SingleEdit : Boolean

Not in current use. Editor in single edit mode.


PlugNedit.LayerNumberActive : Number

Object, current active layer number.


PlugNedit.LayerType[] : Array

Array of layer types. usage PlugNedit.LayerAttributeLeft [ Layer Number Of Object]


PlugNedit.WorkingLayerType[] : Array

Array of current layers on canvas, PlugNedit.WorkingLayerType[]


PlugNedit.InterLayerType [] : Array

Array of current internal editable object layers on canvas, PlugNedit.InterLayerType []


PlugNedit.LayerNames [] : Array

Array of layer attribute names. usage PlugNedit.LayerNames[ Layer Number Of Object]


PlugNedit.LayerIDS [] : Array

Array of layer attribute Id. usage PlugNedit.LayerIDS[ Layer Number Of Object]


PlugNedit.LockedDown : String

Current layer object locked down until operation completes.


PlugNedit.Undostep : Number

Array HTML undo step of canvas in editing.  usage PlugNedit.Undostep [ Step Count ]


PlugNedit.UndoAlts[]  : Array 

Array HTML undo step of editor.  usage PlugNedit.Undostep [ Step Count ]


PlugNedit.LayerLevels [] : Array

Array of canvas layers current Z-index. usage PlugNedit.LayerLevels[ Layer Number Of Object]


PlugNedit.UndoLayerLevels [] : Array

Array undo step of  Z-index. usage PlugNedit.UndoLayerLevels [ Step Count ]


PlugNedit.LayerLevelsToggle[] : Array

Not currently in use.


PlugNedit.LayersActive[] : Array

Not currently in use.


PlugNedit.UndoLayersActive[] : Array

Not currently in use.


PlugNedit.UndoLayerType[] : Array

Array undo step of  Layer type. usage PlugNedit.UndoLayerType[ Step Count ]


PlugNedit.UndoLayerNames[] : Array

Array undo step of  Layer Names. usage PlugNedit.UndoLayerNames[ Step Count ]


PlugNedit.UndoLayerPadding[] : Array

Array undo step of  Layer Padding. usage PlugNedit.UndoLayerPadding[ Step Count ]


PlugNedit.UndoLayerLevelsToggle[] : Array

Currently not in use.


PlugNedit.UndoLayerAttributeWidth[] : Array

Array undo step of  Layer Padding. usage UndoLayerAttributeWidth[ Step Count ]


PlugNedit.UndoLayerAttributeHeight[] : Array

Array undo step of  Layer Height. usage UndoLayerAttributeHeight[ Step Count ]


PlugNedit.UndoLayerAttribute [] : Array

Not currently in use.


PlugNedit.UndoLayerAttributeTop [] : Array

Array undo step of  Layer Top position. usage UndoLayerAttributeTop[ Step Count ]


PlugNedit.UndoLayerAttributeLeft [] : Array

Array undo step of  Layer Left position. usage PlugNedit.UndoLayerAttributeLeft [ Step Count ]


PlugNedit.UndoLayerOffSetLeft [] : Array

Not currently in use.


PlugNedit.UndoLayerOffSetTop[] : Array

Not currently in use.


PlugNedit.UndoTempPointX[] : Array

Not currenty in use.


PlugNedit.UndoTempPointY[] : Array

Not currently in use.


PlugNedit.UndoLayerAttributeVisiblity[] : Array

Array undo step of  Layer Visiblility usage PlugNedit.UndoLayerAttributeVisiblity[ Step Count ]


PlugNedit.UndoLayerTransAngle[] : Array

Not currently in use. This is the undo step for the layer angle.


PlugNedit.UndoLayersLinked[] : Array

Not currently in use. This is for object grouping of layers.


PlugNedit.UndoImageActualH[] : Array

Array undo step of  Images Actual Height usage PlugNedit.UndoImageActualH[ Step Count ]


PlugNedit.UndoImageActualW : [] : Array

Array undo step of  Images Actual Width usage PlugNedit.UndoImageActualW[ Step Count ]


PlugNedit.Arraycount : Number

Current undo array count for steps.


PlugNedit.LayerAttributeVisiblity[] : Array

Current visibility of layers. usage PlugNedit.LayerAttributeVisiblity[ Layer Number Of Object]


PlugNedit.OffSetX : Number

Not currently in use.


PlugNedit.OffSetY : Number

Not currently in use.


PlugNedit.PNEMousXY : Number

Not currently in use.


PlugNedit.OffSets[] : Array

Array of offsets. Subject to change


PlugNedit.LayerTransFilter[] : Array

Array of Alpha opacity filter.  usage PlugNedit.LayerTransFilter[ Layer Number Of Object]


PlugNedit.LayerTransOpacity[] : Array

Array of Alpha opacity.  usage PlugNedit.LayerTransOpacity[ Layer Number Of Object]


PlugNedit.ControlLeft[] : Array

Not currently in use.


PlugNedit.LayerLinks[] : Array

Not currently in use.


PlugNedit.BrowserElementId: String

Current element id the mouse is over.


PlugNedit.PlayPen : Boolean

Not in use, limits the editable width and height of the canvas.


PlugNedit.PlayPenWidth : Number
Not in use. Sets the width of the editable canvas, stops user from overflowing margin.


PlugNedit.PlayPenHeight : Number
Not in use. Sets the height of the editable canvas,stops user from overflowing margin.


PlugNedit.ResMatch : Number

Not in use. sets resolution match to the screen offset.


PlugNedit.CloseSession : String

Holds the previous element id that was edited.


PlugNedit.ToggleResize : Boolean

Not in use.


PlugNedit.LayerCount : Number

Current count of new layers created.


PlugNedit.Centered  : Boolean

Not in use. Tells the editor if the page is centered or left.


PlugNedit.Secondload : Boolean

Not in use. Tells the editor if the page has been reloaded for iframe content.


PlugNedit.FirstEdit : Boolean

Tells the editor if this is the first time using the editor.


PlugNedit.LayerOffSetStep : Number

Offset left, top from last new layer created.


PlugNedit.WordPressStandard : Boolean

Optimize for use in a WordPress website.


PlugNedit.ConnectedToServer : Boolean

True / False connected to internet.


PlugNedit.AutoSaveCount : Number

Current auto save count to the server.


PlugNedit.TempScrollTop : Number

Current scroll top position.


PlugNedit.TempScrollLeft : Number

Current scroll left position.


PlugNedit.LayerTransAngle[] : Array

Current rotation angle of the element.


PlugNedit.LayersLinked[] : Array

Not currently in use.


PlugNedit.ImageActualH[] : Array
Actual size of image Height. Usage PlugNedit.ImageActualH[ Layer Number Of Object]


PlugNedit.ImageActualW[] : Array
Actual size of image Width. Usage PlugNedit.ImageActualW[ Layer Number Of Object]


PlugNedit.useATTrname : String

Attribute used to identify a Plug N Edit object.


PlugNedit.FrameSetScrollTop : Number
Not in use. Sets the offset of scroll top to the offset of iframe scroll.


PlugNedit.inlineOffestX : Number

Not in use. Sets the offset of the inline editor to from the Top Left position of current canvas object.


PlugNedit.inlineOffestY : Number
Not in use. Sets the offset of the inline editor to from the Top Left position of current canvas object.


PlugNedit.ToolbarPos : Number
Sets the inline editor toolbar position.


PlugNedit.MarginHeight : Number
Not in use.


PlugNedit.MarginWidth : Number
Current margin width.


PlugNedit.PNELinkBack : Boolean
Not in use.


PlugNedit.ImageLayer : String
Current Image layer selected.


PlugNedit.GuidesCount : Number
Current count of guides that are set.


PlugNedit.PNETOCKEditor : Boolean
True / False Send control of the editor to CKeditor


PlugNedit.PNEUNLOCKEDITOR  : Boolean
Unlocks the Ckeditor.


PlugNedit.PNENUMBERLOCK  : Number
Layer number locked for moving and sizing.


PlugNedit.AdjustTheDivINT : Boolean
True / False Auto adjust the div height of the canvas element (Set to check in interval).


PlugNedit.PNECKEditorLoaded : Boolean 

True / False Ckeditor loaded.


PlugNedit.AdjustDivOption : Boolean

True / False Auto adjust the div height of the canvas element.


PlugNedit.ZindexToggle : String
Not in use. Toggles the current active div layer to the front for easy editing.


PlugNedit.AdvancedEditor : Boolean
True / False Advanced inline editor loaded.


PlugNedit.AllowSelectInline : Boolean
True / False toggle between selection inline and move object.


PlugNedit.AllowContentEditable : Boolean
True / False Allow direct entry of content into div.


PlugNedit.Editablecontent : Boolean

True / False  allow content to be edited.


PlugNedit.ClosePNESession : Boolean

True / False Keeps user from submitting HTML to save more then one time.


PlugNedit.BrowserElementCurTag : String

Current mouse over browser tag.


PlugNedit.PNEtoolbaroffset : Number
Offset of when user scrolls the toolbar should scroll.


PlugNedit.PNEsidebaroffset : Number
Currently not in use.


PlugNedit.KEY.EditorDiv : Object
Key object for setting the Id of the editor div layer.


PlugNedit.KEY.CanvasDiv  : Object

Key object for setting the Id of the canvas div layer.


PlugNedit.KEY.ImageObject  : Object

Key object for setting the Id of the canvas div image layer.


PlugNedit.KEY.CanvasImage  : Object
Key object for setting the Id of the canvas  image layer.


PlugNedit.KEY.PNEimageCnvsI  : Object

Key object for setting the Id of the canvas interior image layer.


PlugNedit.KEY.EditorImage  : Object

Key object for setting the Id of the editor image layer.


PlugNedit.KEY.DivObject  : Object

Key object for setting the Id of the canvas interior div layer.


PlugNedit.KEY.Prefix  : Object

Prefix alpha character used in the id of objects.


PlugNedit.CKKey.Prefix  : Object
CKEditors Key prefix


PlugNedit.PNEPICSizeW[]  : Array

Current width of image PlugNedit.PNEPICSizeW[ Layer Number Of Object]


PlugNedit.PNEPICSizeH[]  : Array

Current height of image PlugNedit.PNEPICSizeH[ Layer Number Of Object]


 PlugNedit.PNEMultiSelect : Array
Array of objects to be moved at one time.


 PlugNedit.PNELayerdrag : Array
Top position of layers to be moved below selected layer.


PlugNedit.PNEMultiSelected : boolean
True / False Multiple objects are selected


PlugNedit.CKEDITORStatus : String
Current CKEditor status


PlugNedit.CurrentColorSet : String
Not in use, Swatches to display.


PlugNedit.PNEkrepeat : Number
Count for loop to set CKEditor Toolbar hinge.


PlugNedit.PNEmovealltop : Array
Currently not in use


PlugNedit.Movealllayerspivot : Number
Pivot point of top layer.


PlugNedit.PNEMoveBelow : Boolean
True / False move objects below current layer on resize.


PlugNedit.SetHighestset : Number
Height of top layer selected.


PlugNedit.ProcessXY : Boolean
True / False  Toggles snap timeout until next guide snap


PlugNedit.PNESnap : Boolean
True / False Snap to objects.


PlugNedit.PaddingPageBottom : Number
Pixels to pad the spacer height


PlugNedit.CurrentCanvas : String

Canvas Id to work with.


PlugNedit.ElementClone :  String
Not in use, Element to be cloned from mobile to fixed canvas.


PlugNedit.FullSizeMargin : Number
Full size margin width.


PlugNedit.MobileMargin : Number
Mobile margin width


PlugNedit.PNECLayer : Array
Array of editor layer Id’s


PlugNedit.PNEDivCanvasLayer : Array
Array of current canvas div layers Id’s.


PlugNedit.PNEImageLayer : Array
Array of current canvas image div layers Id’s.


PlugNedit.PNEImage : Array
Not currently in use.


PlugNedit.PNEEmbedLayer : Array
Not currently in use


PlugNedit.PNEIDivLayer : Array

Array of current div interior canvas layers Id’s


PlugNedit.PNEgalleryloaded : Boolean
Image gallery loaded.


PlugNedit.InterObjOffset : Number
Offset size of the interior canvas to the exterior canvas layer.


PlugNedit.PNEIImage : Array
Array of Interior canvas image Id’s


PlugNedit.RTL : Boolean

Right To Left


PlugNedit.LockWorkArea : Boolean
True / False Currently not in use.


 

PlugNedit Flux Version 1.0

flxmth


Core Functions:


 

PNEDITOR.initPlugNEdit(a) 
Toggles core editor mouse / window events from enabled to disabled.

AddEventListen : function (Obj, evnt, func)
Adds event listener to object.

Flux Window Events

Add event listeners to editor window and canvas window.
PlugNedit uses multi  window mouse catpures to separate the content from the canvas and editor.
EI9+ Chrome FireFox Safari compatible.

Mouse Over : Catch mouse chords
this.AddEventListen(this.CanvasWindow, ‘mousemove’, this.MouseMove);
this.AddEventListen(document, ‘mousemove’, this.MouseMove);

Mouse Over : Catch object tags
this.AddEventListen(this.CanvasWindow, ‘mouseover’, this.BrowseElements);
this.AddEventListen(document, ‘mouseover’, this.BrowseElements);

Mouse Out : Release object tags
this.AddEventListen(this.CanvasWindow, ‘mouseout’, this.ReleaseTarget);
this.AddEventListen(document, ‘mouseout’, this.ReleaseTarget);

Mouse Down : Identify PlugNedit objects.
this.AddEventListen(this.CanvasWindow, ‘mousedown’, this.ElementFinder);
this.AddEventListen(document, ‘mousedown’, this.ElementFinder);

Key Down : Disabe accidently leaving of the page.
this.AddEventListen(this.CanvasWindow, ‘keydown’, this.DisableEvent);
this.AddEventListen(document, ‘keydown’, this.DisableEvent);
Key Press : Disabe accidently leaving of the page.
this.AddEventListen(this.CanvasWindow, ‘keypress’, this.DisableEvent);
this.AddEventListen(document, ‘keypress’, this.DisableEvent);

Mouse Up : Unlock unused objects .
this.AddEventListen(this.CanvasWindow, ‘mouseup’, this.UnlockElement);
this.AddEventListen(document, ‘mouseup’, this.UnlockElement);

Double Click : Double click options.
this.AddEventListen(this.CanvasWindow, ‘dblclick’, this.DoubleDown);
this.AddEventListen(document, ‘dblclick’, this.DoubleDown);

Drag Start : Keep object from accidently placement outside editor formatting.
this.AddEventListen(this.CanvasWindow, ‘dragstart’, this.ReturnFalse);
this.AddEventListen(document, ‘dragstart’, this.ReturnFalse);

Window Resize : Reset the editor positioning.
this.AddEventListen(window, ‘resize’, this.Elementposition);

On Sroll : Sroll toolbars or palletes
this.AddEventListen(window, ‘scroll’, this.ObjectPosition);

On Unload : Make suere the eidtor is ready to unload.
this.AddEventListen(window, ‘beforeunload’, this.CheckUnload);
this.AddEventListen(this.CanvasWindow, ‘beforeunload’, this.CheckUnload);

On Context Menu : Stop the browser context menu right click menu from showing.
this.AddEventListen(this.CanvasWindow, ‘contextmenu’, this.ReturnFalse);

On Mouse Wheel : Make sure the mouse wheel scrolls the editor not the canvas.
this.AddEventListen(this.CanvasWindow, ‘onwheel’, this.MouseWheelHandler);
this.AddEventListen(this.CanvasWindow, ‘scroll’, this.MouseWheelHandler);

 


PNEDITOR.SetMarginType()

Toggles the editor canvas size from desktop canvas size to mobile device size.


PNEDITOR.SetAdaptiveMargins()
Sets adaptive margins and spacers on loading page.


 PNEDITOR.CreateResponsive()
Sets page attribute to reflect responsive page.


 PNEDITOR.BuildSLayer(a)
Builds canvas layer ID from layer number.


 PNEDITOR.isImage(a)

Checks if current layer number is a image layer.


 PNEDITOR.BuildELayer(a)
Builds editor layer ID from number.


 PNEDITOR.BuildInterLayer()
Builds interior canvas layer ID from number.


 PNEDITOR.CreateAdaptive()
Creates a adaptive canvas.


 PNEDITOR.ReleaseElements()
Releases current object selected for editing.


 PNEDITOR.SwitchCanvas()
Toggles editor canvas from desktop view to mobile view.


 PNEDITOR.SetMobileCanvas()

Sets the editor to Adaptive canvas.


 PNEDITOR.StyleRollOver()

Styles object to a javascript rollover.


 PNEDITOR.LockLayer()

Toggles current layer to locked position and can not be moved or re-sized.


 PNEDITOR.CloneLayer()

Clones current text layer.


 PNEDITOR.Swatches()

Displays color swatches menu.


 PNEDITOR.isNumeric()

Returns true/false if a number.


 PNEDITOR.Qupdate()

Sets current layer to chords input update.


 PNEDITOR.LoadPNECKFonts()
Loads Google fonts into CKEDITOR drop down font selector.


 PNEDITOR.REI()
Returns layer element object from canvas.


 PNEDITOR.RE()
Returns layer element object from editor.


PNEDITOR.RS()
Checks if current layer object may be re-sized.


PNEDITOR.RM()
Checks if current layer object may be moved.


PNEDITOR.LoadHTMLEditor()
Loads CKEDITOR inline if present.


PNEDITOR.RNum()
Returns stripped string of numeric characters.


PNEDITOR.FontWeight()
Toggles font weight from bold to normal on current selected layer.


PNEDITOR.FontStyle()
Toggles font style from italic to normal on current selected layer.


PNEDITOR.LTR()
Sets current object layer to Left to Right text.


PNEDITOR.RTL()
Sets current object layer to Right to Left text.


PNEDITOR.Guides()
Toggles Guides visibility.


PNEDITOR.BGColor()
Sets the page background in the editor.


PNEDITOR.DisplayURLimage()
Displays the URL entry menu of the current selected image.


PNEDITOR.AdjustTheDiv()
Auto adjust the current div to resize when content is larger then the height of the layer.


PNEDITOR.setCharAt()
Sets a character at specified position in a string.


PNEDITOR.SetToolBarParams()
Sets the toolbar options to reflect the current settings of the selected layer.


PNEDITOR.ToolTip()
Sets a tooltip.


PNEDITOR.DeleteLayers()
Deletes the current active layer.


PNEDITOR.SendControl()
Switches the editor control from PlugNedit to CKEDITOR if present.


PNEDITOR.Elementposition()
Sets the Screen Width and Half Screen settings in the editor.


PNEDITOR.EmbedHTML()
Displays the Embed entry menu.


PNEDITOR.Bullpen()
Sets blocks to limit the editing errea.


PNEDITOR.SetMousePX ()
Sets the mouse positions.


PNEDITOR.TestOBJECT()
Tests if the current element object is a valid editor object.


PNEDITOR.Dragall()
Moves all layers selected.


PNEDITOR.Movealllayers()
Moves all objects bellow the pull hinge on re-size.


PNEDITOR.getFirstChild()
Returns first valid child element.


PNEDITOR.Setguidlinesv()
Sets vertical guides to their newest position.


PNEDITOR.Setguidlines()
Sets horizontal guides to their newest position.


PNEDITOR.ProximityAlarm()
Sets the re-size when object is being sized in the editor.


PNEDITOR.OffsetTop()
Returns the offset top position including padding of inner element to the parent layer.


PNEDITOR.SetLayerMove()
Controls the movement and position of layer.


PNEDITOR.getxy()
Triggered on mouse move to control which functions to call (Re-size object / Move Object / Set Guides) .


PNEDITOR.getxy()
Triggered on mouse move to control which functions to call (Re-size object / Move Object / Set Guides) .


PNEDITOR.SetCrossHairs()
Sets simple cross hairs when full guides are not available.


PNEDITOR.BrowseElements()
Checks if targeted mouse over element is a editor object.


PNEDITOR.SetRightClickOption()
Sets proper position of right mouse click position and displays menu.


PNEDITOR.CKDestroy()
Destroys all instances of CKEDITOR from plugnedit.


PNEDITOR.Insertckmove()
Inserts position elements into the CKEDITOR inline editor so it can be moved.


PNEDITOR.RenewInline()
Renews the CKEDITOR if present.


PNEDITOR.ContentEditableFalse()
Sets current active layer to not allow ContentEditable.


PNEDITOR.ResetDisplay()
Sets all editor layer border highlights to transparent.


PNEDITOR.CloseFrames()
Closes swatch frame.


PNEDITOR.ElementFinder()
Triggered on mouse down, decides if current object target is a editor element.


PNEDITOR.ConstrainP()
Sets object to toggle constrain proportion on re-size.


PNEDITOR.DisplayLog()
Outputs and diplays current editor array settings to the console log.


PNEDITOR.SelectItems()
On click and hold event for selecting multiple objects in the editor.


PNEDITOR.UnlockElement()
Unlocks objects temp objects on mouse up.


PNEDITOR.DoubleDown()
Double click event triggers.


PNEDITOR.ObjectPosition()
Buffer event before scrolling layers.


PNEDITOR.ScrollLayers()
Sets the new scroll position and moves menus.


PNEDITOR.NewLayers()
Sets a new HTML/Text layer.


PNEDITOR.ImagePlace()
Place a new image layer.


PNEDITOR.Setimage()
Sets the image in the editor at proper size and loads image attributes into the editor.



PNEDITOR.PicSize()
Loads image into editor and triggers the set image when loaded.


PNEDITOR.SetVisualChords()
Sets the visual chords of the current layer selected.


PNEDITOR.DisableEvent()
Disables proper default browser events that disrupt with the editor


PNEDITOR.DisableEvent()
Disables proper default browser events that disrupt with the editor.


PNEDITOR.DivsOnRoids()
Sets the rotation angle of current layer.


PNEDITOR.checkVersion()
Sets IE version.


PNEDITOR.HyperLink()
Sets Hyperlink on current layer (Block Level Link).


PNEDITOR.SortRGB()
Converts RGB color to Hexadecimal Color.


PNEDITOR.toHex()
Converts RGB value to a valid hex value.


PNEDITOR.FontSelect()
Sets current font family on selected layer.


PNEDITOR.changeFontSize()
Changes the font size on current layer.


PNEDITOR.Undoit()
Changes the step of the canvas and editor to the undo / redo step count.


PNEDITOR.SortLayers()
Sorts the layers palette and highlights proper objects.


PNEDITOR.TransDiv()
Sets the transparency of the current layer.


PNEDITOR.Sorttext()
Source text entry to the current active layer.


PNEDITOR.SortDivText()
Sorts the layer HTML to the source text area entry.


PNEDITOR.looparray()
Loops layer editor elements and removes editor specific traits.


PNEDITOR.PrepSave()
Called before editor starts to save a page to run custom functions.


PNEDITOR.SetMobileSpacers()
Sets the HTML spacers when page is being saved to the height of the canvas.


PNEDITOR.TransferHT()
Sets final canvas settings and transfers the HTML to text area.


PNEDITOR.ControlLayers()
Controls the functions of the layer and layers palette.



PNEDITOR.ToggleLayerVisibility()
Toggles the layer visibility.



PNEDITOR.ImageActual()
Checks the size of a image layer and sets the editor attributes.



PNEDITOR.DS()
Hides editor Quick Bar elements.



PNEDITOR.CleanWorkArea()
Cleans up editor work area and resets Quick Bar elements.



PNEDITOR.LayerAdjust()
Adjusts the Z-Index of elements.



PNEDITOR.LoadPage()
Loads page into editor.


PNEDITOR.setpaddingbottom()
Sets custom footer padding.


PNEDITOR.SetPageOffsets()
Sets the Iframe canvas offset to align with the editor.


PNEDITOR.LStylesN()
Sets the duplicate styles options in the editor.


PNEDITOR.DLStylenew()
Sets the selected layer styles to the newly selected style.


PNEDITOR.PNENull()
Checks if null, undefined or otherwise.


PNEDITOR.StyleInlinediv()
Sets a style for current layer selected.


PNEDITOR.validateHColor()
Validates a HEX Color.


PNEDITOR.SideBar()
Sets the current menu bar to the selected menu bar.


PNEDITOR.GuidesRules()
Toggles guides rules visibility


PNEDITOR.ResetMargins()
Sets margins to different width.


PNEDITOR.SetGuidesDiv()
Sets guidelines.


PNEDITOR.Setselect()
Sets a select option to selected value.


PNEDITOR.SubmitHtmlSave()
Submits HTML to page for processing.


PNEDITOR.SetRulers()
Sets rulers to proper half screen width.


PNEDITOR.PNEMove()
Moves all currently selected layers.


PNEDITOR.Settextd()
Sets text decoration style (To be moved to styleinlinediv()) deprecate.


 

The editor use two objects for easy calls and custom javascript to be added to the editor. You can place your custom calls before and after any major event in the toolbar script.

 

PNE Tools Functions 

PNETOOLS.SavePage()
Calls save page, writes custom CSS for cross browser support.
Sets the spacer height and places the HTML Into
PNEDITOR.HTML

 

PNETOOLS.ReloadVideo()

Deprecated for reload of video content if XSS was triggered.

 

PNETOOLS.Sidebar(Your side bar 1-10)
Call to display a menu bar.

 

PNETOOLS.NewHTMLLayer()

Creates new HTML Layer.

 

PNETOOLS.EmbedHTML()

Calls text entry menu for HTML embed and then
Creates a new HTML Layer with content.

 

PNETOOLS.ToolTip(your text)

Displays your tooltip.

 

PNETOOLS.PNEInt()

Turns on all event listners.

 

PNETOOLS.SortText()

Updates text from the textarea to the current active
internal div layer.

 

PNETOOLS.SortDivText()

Updates text the current active internal div to the textarea.

 

PNETOOLS.Onselect()

Allow selecting until next cycle.

 

PNETOOLS.ONContextMenu(True / False)

Allow right click browser default menu.

 

PNETOOLS.LoadInlineEditor()

Load inline toolbar CKeditor.

 

PNETOOLS.FontSize(-+number)

Change the font size of global internal layer.

Example call: PNETOOLS.FontSize(‘-1’)
Sets font size 2 px smaller.

 

PNETOOLS.TextAlign()

Deprecated. Use PNETOOLS.STYLEINLINE.

 

PNETOOLS.FontSelect(this)

Updates internal div to selected font.

 

PNETOOLS.FontWeight(this)
Toggles internal div from bold to normal.

 

PNETOOLS.FontStyle(this)

Toggles internal div from italic to normal.

 

PNETOOLS.LTR(this)

Toggles internal div and text area to Left To Right.

 

PNETOOLS.LTR(this)

Toggles internal div and text area to Right To Left.

 

PNETOOLS.STYLEINLINE(Style,Value)
Styles current internal inline div.
Example: PNETOOLS.STYLEINLINE(“color”, ‘black’)

 

PNETOOLS.Preview()
Loops editor to hide editor objects.

 

PNETOOLS.WindowBar()
Toggles the window move editor move bar.

 

PNETOOLS.Undoit(Numeric)
Undo , Redo step count.
Example redo: PNETOOLS.Undoit(1)
Example undo: PNETOOLS.Undoit(-1)

 

PNETOOLS.Undoit()

Toggles visibility of the Guides and rulers.

 

PNETOOLS.Qupdate()

Toggles visibility of the Guides and rulers.

 

PNETOOLS.GetHTML()
Gets HTML and displays it.

 

PNETOOLS.BGColor(Background Color)

Set background color.

PNETOOLS.ResetMargins(Number)

Sets margin Width.

 

PNETOOLS.DeleteLayers()

Deletes current active layer.

 

PNETOOLS.TransDiv()

Sets the transparency of div.

 

PNETOOLS.DisplayURLimage()
Display the URL image of dialog box.

 

PNETOOLS.DisplayITB()
Display Image to base64 menu.

 

PNETOOLS.GradWin()
Display gradient menu.

 

PNETOOLS.LayersAdjust()

Adjust the z-index of current active layer.

 

PNETOOLS.OFFSiteHBlur()

Hide offsite hyperlink option.

 

PNETOOLS.OCHUL()

Set hyperlink on current layer.

 

PNETOOLS.OCHULI()

Force layer menu update.

 

PNETOOLS.OCCUL()

Set hyperLink.

 

PNETOOLS.AutoSaves()

Turn on auto saves.

 

PNETOOLS.PlaceImage(image url)

Place url image.

 

PNETOOLS.CONTROLLayers()

Force update of layers menu.

 

PNETOOLS.SelectLayerStyle()

Update current layer style.

 

PNETOOLS.VHC()

Validate HEX Color.

 

PNETOOLS.CheckEmbed()

Check embed for duplicate content.

 

PNETOOLS.SubmitEmbed()

New div layer with embed HTML.

 

PNETOOLS.SetGrad()

Set gradient background on current layer.

 

PNETOOLS.Grids()

Hide / Show grids.

 

PNETOOLS.SingleHandle()

Toggle single handle for moving layers.

 

PNETOOLS.CloneLayers()

Clone current layer.