# webhandle-page-editor

> Edit web pages

Latest version **1.0.52** (published 2025-01-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install webhandle-page-editor
pnpm add webhandle-page-editor
yarn add webhandle-page-editor
bun add webhandle-page-editor
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.52 |
| Published | 2025-01-09 |
| First published | 2018-06-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 97.8 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dan Kolz |
| Maintainers | dankolz |
| Keywords | html, ckeditor, page, editor |

## Links

- npm: https://www.npmjs.com/package/webhandle-page-editor
- Repository: https://github.com/EmergentIdeas/webhandle-page-editor
- Homepage: https://github.com/EmergentIdeas/webhandle-page-editor#readme
- Issues: https://github.com/EmergentIdeas/webhandle-page-editor/issues
- npm.io page: https://npm.io/package/webhandle-page-editor

## Dependencies (21)

- [find](https://npm.io/package/find.md) ^0.3.0
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.12
- [ckeditor4](https://npm.io/package/ckeditor4.md) 4.22
- [ei-dialog](https://npm.io/package/ei-dialog.md) ^1.0.10
- [file-sink](https://npm.io/package/file-sink.md) ^1.0.13
- [filter-log](https://npm.io/package/filter-log.md) ^1.0.10
- [tripartite](https://npm.io/package/tripartite.md) ^1.0.15
- [underscore](https://npm.io/package/underscore.md) ^1.9.1
- [ei-pic-browser](https://npm.io/package/ei-pic-browser.md) ^1.0.9
- [file-sink-server](https://npm.io/package/file-sink-server.md) ^1.0.5
- [kalpa-tree-on-page](https://npm.io/package/kalpa-tree-on-page.md) ^1.0.2
- [composite-file-list](https://npm.io/package/composite-file-list.md) ^1.0.2
- [form-value-injector](https://npm.io/package/form-value-injector.md) ^1.0.6
- [file-sink-remote-http](https://npm.io/package/file-sink-remote-http.md) ^1.0.2
- [webhandle-page-server](https://npm.io/package/webhandle-page-server.md) ^1.0.11
- [@webhandle/page-locator](https://npm.io/package/@webhandle/page-locator.md) ^1.0.1
- [@webhandle/tree-file-browser](https://npm.io/package/@webhandle/tree-file-browser.md) ^1.0.0
- [@dankolz/webhandle-admin-icons](https://npm.io/package/@dankolz/webhandle-admin-icons.md) ^1.0.0
- [@dankolz/picture-ckeditor-plugin](https://npm.io/package/@dankolz/picture-ckeditor-plugin.md) ^1.0.6
- [@dankolz/template-ckeditor-plugin](https://npm.io/package/@dankolz/template-ckeditor-plugin.md) ^1.0.0
- [@webhandle/ckeditor-multi-widget-panel](https://npm.io/package/@webhandle/ckeditor-multi-widget-panel.md) ^1.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.52 (latest) — 2025-01-09
- 1.0.51 — 2024-11-04
- 1.0.50 — 2024-10-03
- 1.0.49 — 2024-09-30
- 1.0.48 — 2024-08-27
- 1.0.47 — 2024-07-29
- 1.0.46 — 2024-07-17
- 1.0.45 — 2024-07-08
- 1.0.44 — 2024-03-25
- 1.0.43 — 2023-11-14
- 1.0.42 — 2023-11-14
- 1.0.41 — 2023-11-10
- 1.0.40 — 2023-10-12
- 1.0.39 — 2023-10-03
- 1.0.38 — 2023-10-03
- … 38 more at https://npm.io/package/webhandle-page-editor/versions

## README

# Purpose
Allows editing of HTMLish pages and templates using the CKEditor

# Usage

On the client side, include the scripts like:
```
var editing = require('webhandle-page-editor')
editing({
	configFile: '/webhandle-page-editor/std-config.js'
})
```

The configFile used above is a sensible default but any config file can be used.
jQuery must be available as a global variable.

On the server side, if you're a webhandle user, you can include all of server side
handlers like:

```
let pageEditingRouter = express.Router()
require('webhandle-page-editor/webhandle-integrator')(webhandle, path.join(webhandle.projectRoot, 'pages'), pageEditingRouter)
```
You can then secure it for admin users like:
```
let securedRouter = require('webhandle-users/utils/allow-group')(
	['administrators', 'page-editors'],
	pageEditingRouter
)
webhandle.routers.primary.use('/webhandle-page-editor', securedRouter)

```

Each page has a json file specifying certain elements. They have the general format of:

```
{
	"editor": {
		"propertiesTemplate": "rsf-page-properties"
		,"disablePageEditor": true
	},
	"title": "The page titel",
	"description": "The page description",
	"pageVisibility": "public",
	"socialImage": "",
}
```

The properties template is some view. By default, and if not specified, this is:

views/webhandle-page-editor/page-properties-editor/basic-properties.tri

"disablePageEditor" if true will cause the "E" icon not to show.

It's possible to change where the "P" icon directs to by adding something like this to the page:
```
<script>
	window.page = {
		editor: {
			propertiesPage: "/news-items/__newsItem._id__/edit"
		}
	}
</script>
```

## Custom page properties
Sometimes the properties page will need data setup. This can be done by adding to the array:

```
webhandle.services.pageEditor.pagePropertiesPrerun
```

Functions added should be of the form:

```
async (req, res) => {
	res.locals.someVariable = await [some long running process]
}

```

---
_Source: https://npm.io/package/webhandle-page-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._