kiruh / ckeditor5-placeholder

Widget that allows using of placeholders like "First Name", "Date" etc. in ckeditor5

Hi there 👋

ckeditor5-placeholder's Issues

Incorperate into Vue

I'm trying to get this plugin to work in a Vue component. I am using the standard CKeditor5 vue component but cannot seem to get it to work and keep getting

ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.

I also tried using this in a custom build, not to no avail. It is telling me unexpected error. Do you have any idea how to proceed?

ReactJS Uncaught CKEditorError: ckeditor-duplicated-modules

import Placeholder from "ckeditor5-placeholder";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

When import these 3 lines I got "ReactJS Uncaught CKEditorError: ckeditor-duplicated-modules" error. Can you fix this?

Placeholder error with viewWriter

Hi there,

I have ran into an issue implementing the placeholder for ckeditor, I'd appreciate a little help.
It's built with webpack, some of the imports I've dotted out for readability, the code is below:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Placeholder from 'ckeditor5-placeholder';
...

export const createEditor = async (selector) => {
	let ckEditor;
	await ClassicEditor
		.create(document.querySelector(selector), {
			plugins: [
				... ,
				Placeholder
			],
			toolbar: [
                                ... ,
				'placeholder'
			],
			extraPlugins: [customUploadAdapterPlugin]
		})
		.then(editor => {
			console.log('Editor initialized');
			ckEditor = editor;
		})
		.catch(error => {
			console.error(error.stack);
		});
	return ckEditor;
}

Then later I'm using it like this:

        const ckEditor = await import('../../../lib/ckeditor/ckeditor-webpack.js');
        const editor = await ckEditor.createEditor('#content');

And the error I'm getting when clicking on the placeholder prop: Uncaught TypeError: viewWriter.createContainerElement is not a function

Does anyone have an idea what could cause this?

Thanks in advance!

How can i add placeholder to custom editor build from online builder?

In Custom build i add "ckeditor5-placeholder": "^1.0.4" to package.json
Next step i changed /src/ckeditor.js

I add folloing lines
import Placeholder from 'ckeditor5-placeholder';

and on Editor.builtinPlugins = [
Placeholder,
...
]

now in my angular project i add placeholder to toolbar items and add some placegolderprops

When i start my project i can se the editor and placeholder, burt when i use someone it fails and show som error in Browser console.

Error:
editorwatchdog.js:260 TypeError: e.createContainerElement is not a function
at e (ckeditor.js:5)
at Ks.e.on.priority (ckeditor.js:5)
at Ks.fire (ckeditor.js:5)
at Ks._testAndFire (ckeditor.js:5)
at Ks._convertInsertWithAttributes (ckeditor.js:5)
at Ks.convertInsert (ckeditor.js:5)
at qa.toView (ckeditor.js:5)
at qa.stringify (ckeditor.js:5)
at qa.get (ckeditor.js:5)
at EditorWatchdog._getData (editorwatchdog.js:286) "An error happened during restoring editor data. Editor will be restored from the previously saved data."
_save @ editorwatchdog.js:260
invokeFunc @ debounce.js:95
leadingEdge @ debounce.js:105
debounced @ debounce.js:172
fire @ ckeditor.js:5
_handleChangeBlock @ ckeditor.js:5
_runPendingChanges @ ckeditor.js:5
change @ ckeditor.js:5
execute @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
fire @ ckeditor.js:5
@ ckeditor.js:5
execute @ ckeditor.js:5
execute @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
fire @ ckeditor.js:5
Tn @ ckeditor.js:5
fire @ ckeditor.js:5
Tn @ ckeditor.js:5
fire @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
o @ ckeditor.js:5
fire @ ckeditor.js:5
n @ ckeditor.js:5
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
editorwatchdog.js:148 An error happened during the editor destroying. TypeError: e.createContainerElement is not a function
at e (ckeditor.js:5)
at Ks.e.on.priority (ckeditor.js:5)
at Ks.fire (ckeditor.js:5)
at Ks._testAndFire (ckeditor.js:5)
at Ks.convertInsertWithAttributes (ckeditor.js:5)
at Ks.convertInsert (ckeditor.js:5)
at qa.toView (ckeditor.js:5)
at qa.stringify (ckeditor.js:5)
at qa.get (ckeditor.js:5)
at v.getData (ckeditor.js:5)
(anonymous) @ editorwatchdog.js:148
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41654
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41632
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
error (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
_startErrorHandling @ watchdog.js:235
(anonymous) @ editorwatchdog.js:178
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41654
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41632
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
(anonymous) @ http.js:2625
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
(anonymous) @ app.initializer.ts:7
ZoneAwarePromise @ zone-evergreen.js:960
(anonymous) @ app.initializer.ts:4
runInitializers @ core.js:40693
(anonymous) @ core.js:42623
callAndReportToErrorHandler @ core.js:42797
(anonymous) @ core.js:42617
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41654
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41427
bootstrapModuleFactory @ core.js:42588
(anonymous) @ core.js:42668
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:42664
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 48 more frames
core.js:6228 ERROR Error: Uncaught (in promise): CKEditorError: editor-source-element-already-used
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-editor-source-element-already-used
CKEditorError: editor-source-element-already-used
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-editor-source-element-already-used
at ckeditor.js:5
at new Qd (ckeditor.js:5)
at new v (ckeditor.js:5)
at ckeditor.js:5
at new ZoneAwarePromise (zone-evergreen.js:960)
at Function.create (ckeditor.js:5)
at CKEditorComponent. (ckeditor-ckeditor5-angular.js:231)
at Generator.next ()
at tslib.es6.js:74
at new ZoneAwarePromise (zone-evergreen.js:960)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41632)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)
defaultErrorLogger @ core.js:6228
handleError @ core.js:6281
next @ core.js:42614
schedulerFn @ core.js:37119
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37079
(anonymous) @ core.js:41694
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41488
onHandleError @ core.js:41691
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
error (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
_startErrorHandling @ watchdog.js:235
(anonymous) @ editorwatchdog.js:178
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41654
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:41632
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
(anonymous) @ http.js:2625
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
(anonymous) @ app.initializer.ts:7
ZoneAwarePromise @ zone-evergreen.js:960
(anonymous) @ app.initializer.ts:4
runInitializers @ core.js:40693
(anonymous) @ core.js:42623
_callAndReportToErrorHandler @ core.js:42797
(anonymous) @ core.js:42617
invoke @ zone-evergreen.js:364
onInvoke @ core.js:41654
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:41427
bootstrapModuleFactory @ core.js:42588
(anonymous) @ core.js:42668
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:42664
./src/main.ts @ main.ts:11
webpack_require @ bootstrap:79
0 @ main.ts:12
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 48 more frames
zone-evergreen.js:171 Uncaught TypeError: e.createContainerElement is not a function
at e (ckeditor.js:5)
at view (ckeditor.js:5)
at Ks.e.on.priority (ckeditor.js:5)
at Ks.fire (ckeditor.js:5)
at Ks._testAndFire (ckeditor.js:5)
at Ks._convertInsertWithAttributes (ckeditor.js:5)
at Ks.convertInsert (ckeditor.js:5)
at Ks.convertChanges (ckeditor.js:5)
at ckeditor.js:5
at Ss.change (ckeditor.js:5)

What i have to change?

Unable to use "placeholder" plugin with @ckeditor/ckeditor5-build-decoupled-document

Hi,

I am trying implement the placeholder plugin with @ckeditor/ckeditor5-build-decoupled-document however, getting following error and unable to resolve it.

ERROR Error: Uncaught (in promise): CKEditorError: **ckeditor-duplicated-modules**: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

Editor I'm using:
https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document

Can you please fix it or provide the solution for the same?

Thanks,

Gaurav Sharma

Issue using Placeholder with a DecoupledEditor

Hello there,

I have the very same issue someone has written last month. I'm using the DecoupledEditor and when I try to add the plugin, I get this error :

ckeditorerror.js:66 Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

at Module../node_modules/@ckeditor/ckeditor5-core/node_modules/@ckeditor/ckeditor5-utils/src/version.js 
at __webpack_require__
at Module../node_modules/@ckeditor/ckeditor5-core/node_modules/@ckeditor/ckeditor5-utils/src/emittermixin.js
at __webpack_require__ 
at Module../node_modules/@ckeditor/ckeditor5-core/node_modules/@ckeditor/ckeditor5-utils/src/observablemixin.js
at __webpack_require__ 
at Module../node_modules/@ckeditor/ckeditor5-core/src/plugin.js
at __webpack_require__ 
at Module../node_modules/ckeditor5-placeholder/src/placeholder.js
at __webpack_require__

I use TypeScript for my app.
Could you help me please ?

Best regards,
Chiruko.