@webhandle/ckeditor-4 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,34 @@
+# @webhandle/ckeditor-4
+
+Adds the resource for the ckeditor 4 module and includes the css for the editor.
+
+
+## Install 
+
+```bash
+npm install @webhandle/ckeditor-4
+```
+
+## Usage
+
+```js
+import setupCKEditor from "@webhandle/ckeditor-4/initialize-webhandle-component.mjs";
+
+let ckManager = await setupCKEditor(webhandle)
+
+```
+
+## Usage
+
+To get everything ready:
+
+```html
+	__externalResourceManager::@webhandle/ckeditor-4/addExternalResources__
+
+```
+
+or just to convert textarea elements marked with class `.ckeditor`
+
+```html
+__::@webhandle/ckeditor-4/convertTextareas__
+```

package/initialize-webhandle-component.mjs

@@ -14,60 +14,60 @@ initializeWebhandleComponent.staticFilePath = 'public'
 initializeWebhandleComponent.templatePath = 'views'
 
 
-initializeWebhandleComponent.setup = async function(webhandle, config) {
+initializeWebhandleComponent.setup = async function (webhandle, config) {
 	let manager = new ComponentManager()
 	manager.config = config
-	
+
 	let base = webhandle.projectRoot
 	try {
 		let info = webhandle.sinks.project.getFullFileInfo('node_modules/ckeditor4')
 	}
-	catch(e) {
+	catch (e) {
 		base = initializeWebhandleComponent.componentDir
 	}
 	manager.staticPaths.push(
 		webhandle.addStaticDir(
 			path.join(base, 'node_modules/ckeditor4')
-		, {
-			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
-			, fixedSetOfFiles: true
-		})
+			, {
+				urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+				, fixedSetOfFiles: true
+			})
 	)
 	manager.staticPaths.push(
 		webhandle.addStaticDir(
 			path.join(base, 'node_modules/@webhandle/ckeditor-multi-widget-panel/public/ckeditor')
-		, {
-			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
-			, fixedSetOfFiles: true
-		})
+			, {
+				urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+				, fixedSetOfFiles: true
+			})
 	)
 	manager.staticPaths.push(
 		webhandle.addStaticDir(
 			path.join(base, 'node_modules/@dankolz/picture-ckeditor-plugin/public/ckeditor')
-		, {
-			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
-			, fixedSetOfFiles: true
-		})
+			, {
+				urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+				, fixedSetOfFiles: true
+			})
 	)
 	manager.staticPaths.push(
 		webhandle.addStaticDir(
 			path.join(base, 'node_modules/@dankolz/template-ckeditor-plugin/public/ckeditor')
-		, {
-			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
-			, fixedSetOfFiles: true
-		})
+			, {
+				urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+				, fixedSetOfFiles: true
+			})
 	)
 
 	manager.staticPaths.push(
 		webhandle.addStaticDir(
 			path.join(initializeWebhandleComponent.componentDir, 'public')
-		, {
-			urlPrefix: '/@webhandle/ckeditor-4/files'
-			, fixedSetOfFiles: true
-		})
+			, {
+				urlPrefix: '/@webhandle/ckeditor-4/files'
+				, fixedSetOfFiles: true
+			})
 	)
 
-	manager.addExternalResources = function(externalResourceManager) {
+	manager.addExternalResources = function (externalResourceManager) {
 		externalResourceManager.provideResource({
 			mimeType: 'application/javascript'
 			, url: '/@webhandle/ckeditor-4/ck-files/ckeditor.js'
@@ -91,25 +91,32 @@ initializeWebhandleComponent.setup = async function(webhandle, config) {
 	}
 
 	webhandle.addTemplate(initializeWebhandleComponent.componentName + '/addExternalResources', (data) => {
-		try {
-			let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
-			manager.addExternalResources(externalResourceManager)
-			let resources =  externalResourceManager.render()
-			return resources
-		}
-		catch(e) {
-			console.log(e)
-		}
-		return ""
+		let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
+		manager.addExternalResources(externalResourceManager)
+		let resources = externalResourceManager.render()
+		return resources
 	})
 	
+
+	webhandle.addTemplate(initializeWebhandleComponent.componentName + '/convertTextareas', (data) => {
+		let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
+		manager.addExternalResources(externalResourceManager)
+		externalResourceManager.includeResource({
+			mimeType: 'application/javascript'
+			, url: '/@webhandle/ckeditor-4/files/js/convert-textareas.mjs'
+			, resourceType: 'module'
+		})
+		let resources = externalResourceManager.render()
+		return resources
+	})
+
 	// webhandle.routers.preDynamic.use((req, res, next) => {
 	// 	if(config.alwaysProvideResources || !initializeWebhandleComponent.supportsMultipleImportMaps(req)) {
 	// 		manager.addExternalResources(res.locals.externalResourceManager)
 	// 	}
 	// 	next()
 	// })
-	
+
 	// manager.addExternalResources = (externalResourceManager, options) => {
 	// 	externalResourceManager.includeResource({
 	// 		mimeType: 'text/css'
@@ -159,7 +166,7 @@ initializeWebhandleComponent.setup = async function(webhandle, config) {
 	// 		}
 	// 	)
 	// )
-	
+
 	// webhandle.addTemplateDir(
 	// 	path.join(initializeWebhandleComponent.componentDir, initializeWebhandleComponent.templatePath)
 	// 	, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webhandle/ckeditor-4",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -25,4 +25,9 @@
     "@webhandle/initialize-webhandle-component": "^1.0.4",
     "ckeditor4": "4.22"
   }
+  , "files": [
+	"initialize-webhandle-component.mjs"
+	, "public"
+	, "README.md"
+  ]
 }

package/public/js/convert-textareas.mjs

@@ -0,0 +1,28 @@
+
+let editorId = (new Date()).getTime
+let areas = document.querySelectorAll('textarea.ckeditor')
+let upgradedAttribute = 'data-ckeditor-upgraded'
+for(const area of areas) {
+	let upgraded = area.getAttribute(upgradedAttribute)
+	if(!upgraded) {
+		area.setAttribute(upgradedAttribute, 'true')
+		let id = area.getAttribute('id')
+		if(!id) {
+			id = 'i' + editorId++
+			area.setAttribute('id', id)
+		}
+		
+		let editorOptions = {
+			on: {
+				change: function(event) {
+					area.value = event.editor.getData()
+				},
+				blur: function( event ) {
+					area.value = event.editor.getData()
+				}
+			}
+			, customConfig: '/@webhandle/ckeditor-4/files/conf/std-config.js'
+		}
+		CKEDITOR.replace(id, editorOptions) 
+	}
+}

package/pages/index.tri

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	__externalResourceManager.render()__
-
-
-</head>
-
-<body>
-
-	__externalResourceManager::@webhandle/ckeditor-4/addExternalResources__
-	<div id="editor" style="height: 500px; border: solid 1px black;">
-
-	</div>
-	<textarea class="ckeditor" id="teditor"></textarea>
-
-	<script type="module">
-		let id = 'editor'
-		
-		let editorEl = document.querySelector('#' + id)
-		editorEl.setAttribute('contenteditable', 'true')
-		editorEl.classList.add('page-editor-editable')
-		
-		let editorOptions = {
-			on: {
-				change: function(event) {
-					console.log('change')
-				},
-				blur: function( event ) {
-					console.log('blur')
-				}
-			}
-			, customConfig: '/@webhandle/ckeditor-4/files/conf/std-config.js'
-		}
-		CKEDITOR.inline(id, editorOptions) 
-		
-		id = 'teditor'
-		editorEl = document.querySelector('#' + id)
-		editorOptions = {
-			on: {
-				change: function(event) {
-					// console.log(event)
-					// console.log(event.editor.getData())
-					document.querySelector('#' + id).value = event.editor.getData()
-				},
-				blur: function( event ) {
-					console.log(event)
-				}
-			}
-			, customConfig: '/@webhandle/ckeditor-4/files/conf/std-config.js'
-		}
-		CKEDITOR.replace(id, editorOptions) 
-	</script>
-
-
-
-
-
-	__externalResourceManager.render()__
-</body>
-
-
-</html>

package/test.mjs

@@ -1,11 +0,0 @@
-import setupCKEditor from "./initialize-webhandle-component.mjs";
-export default async function test(webhandle) {
-	webhandle.development = true
-
-	let ckManager = await setupCKEditor(webhandle)
-
-	// webhandle.routers.primary.use((req, res, next) => {
-	// 	ckManager.addExternalResources(res.locals.externalResourceManager)
-	// 	next()
-	// })
-}