I have "placeholder" feature installed in my CKEditor 4.8.0. Any saved [[text inside double square brackets]] when retrieved from the database, shows up in the Editor as yellow, and becomes "read only". That part is good. It is indeed read only if you click only once in the text, because it does not allow you to edit. However, [a]if you double click it, it opens a window that lets you then edit the text in a text box, and you can hit OK and it saves that new text; and [b]you can backspace the [[text section]] and the whole span deletes! When you add the bracketed verbiage and save it, then retrieve it in the CKEditor, it displays inside a span tag like this:
<span tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_widget_placeholder" data-cke-display-name="placeholder" data-cke-widget-id="2" role="region" aria-label="Propietary/company-related verbiage goes here placeholder widget" contenteditable="false"><span class="cke_placeholder cke_widget_element" data-cke-widget-keep-attr="0" data-widget="placeholder" data-cke-widget-data="%7B%22name%22%3A%22The%20Parents%20as%20Teachers%20(PAT)%20program%20will%20provide%3A%20(1)%20personal%20visits%2C%20based%20on%20recommended%20dosage%20for%20each%20family%3Fs%20number%20of%20risk%20factors%3B%20(2)%2012%20group%20connections%20per%20program%20year%3B%20(3)%20annual%20developmental%20screenings%20and%20a%20health%20review%20that%20includes%20a%20record%20of%20hearing%2C%20vision%20and%20general%20health%20status%3B%20and%20(4)%20referrals%20to%20community%20resources%20provided%20to%20families%20as%20needed.%20The%20PAT%20program%20will%20serve%20a%20target%20population%20with%20at%20least%20one%20risk%20factor%20and%20identified%20as%20most%20appropriate%20for%20PAT%20services%20in%20the%20community.%20The%20parent%20educator%20will%20have%20a%20Bachelor%3Fs%20degree%20in%20a%20human%20service%20related%20field%20and%20experience%20relevant%20to%20serving%20the%20target%20population.%20Parent%20educators%20will%20be%20PAT%20trained%20and%20certified%2C%20and%20will%20implement%20the%20program%20with%20model%20fidelity.%20The%20program%20will%20submit%20an%20annual%20report%20to%20PAT%20and%20participate%20in%20the%20Quality%20Endorsement%20and%20Improvement%20process%20as%20required%20by%20PAT%20National%20Center%20(PATNC)%20Smart%20Start%20funds%20may%20also%20be%20used%20to%20support%20incentives%20for%20eligible%20participants.%22%2C%22classes%22%3Anull%7D" readonly="true">[[Propietary/company-related verbiage goes here.]]</span><span class="cke_reset cke_widget_drag_handler_container" style="background: rgba(220, 220, 220, 0.5) url("https://fabrik.smartstartinc.net/ncpcphp/activity-mgmt2.0/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; top: -13px; left: 0px; display: block;"><img class="cke_reset cke_widget_drag_handler" data-cke-widget-drag-handler="1" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="Click and drag to move" role="presentation" draggable="true" width="15" height="15"></span></span>
Again, if you cursor in the yellow verbiage and double click, you can edit and save the new text; and you can cursor after it and backspace and it deletes all the [[brackets and info]].
Also, note that inside the generated span tag is this:
contenteditable="false"
which does little good. Any ideas how to prevent the [[info inside the brackets]] from being double-click edited, or backspace-deleted?
You must just comment the following code like this in the plugin.js file of placeholder. That is the dialog attribute which displays the dialog.
editor.widgets.add( 'placeholder', {
// Widget code.
//dialog: 'placeholder',
Progress, and still has issues, but check this out: added “extraPlugins: ‘placeholder’” parm to existing “CKEDITOR.replace( ‘CAD’...”: [previous function had only up to entities_latin:false.]:
extraPlugins: 'placeholder',
on: {
instanceReady: function( evt ) {
evt.editor.on( 'doubleclick', function( evt ) {
var element = evt.data.element;
if ( element.hasClass( 'cke_placeholder' ) ) {
evt.cancel();
}
}, null, null, -1 );
}
}
So the whole function now:
var editor = CKEDITOR.replace( 'CAD', {
entities: false,
basicEntities: false,
basicEntities : false,
entities_greek: false,
entities_latin: false,
extraPlugins: 'placeholder',
on: {
instanceReady: function( evt ) {
evt.editor.on( 'doubleclick', function( evt ) {
var element = evt.data.element;
if ( element.hasClass( 'cke_placeholder' ) ) {
evt.cancel();
}
}, null, null, -1 );
}
}
});
Now double click IN the yellow and no edit popup [good]; however, the + still appears upper left corner of the yellow, and it allows editing; plus you can still backspace and delete it.
Related
I have an editable custom widget that can be placed in CKEditor 4 by
clicking a button in the toolbar - works fine = does not allow nesting
drag & drop from outside of the editor - allows nesting
I do not want to let user to have nested content of the widget. On the other hand I do want users to able to edit the content of the widget.
NOTE
click the button to insert widget's content. Click inserted text and the button becomes not available for clicking. Click some other text and you would be able to insert again. This is desired behavior.
the widget button will not be present in the final version of the CKEditor application / widget. Only drag&drop way of inserting text will be available
Insert two widgets in the editor and try to drag&drop one inside the other one. It will not work. This is desired behavior.
Now try to insert a widget and then insert another one by drag&drop of the text "master or editable" into existing widget. It will be possible.
Could someone help me to set CKEditor a way so nesting is NOT possible?
Working jsfiddle.
init: function( editor ) {
editor.widgets.add( 'simplebox', {
button: 'Create a simple box',
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content<br>.<br>.<br>.</p></div>' +
'</div>',
editables: {
title: {
selector: '.simplebox-title',
allowedContent: 'br strong'
},
content: {
selector: '.simplebox-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',
requiredContent: 'div(simplebox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
}
} );
Here's some example HTML I'm trying to produce:
<div>
<input type="checkbox" id="checkbox_1" name="checkbox_1" />
<label for="checkbox_1"></label>
</div>
This is my downcast converter:
conversion.for( 'downcast' ).elementToElement( {
model: 'checkbox',
view: ( modelElement, viewWriter ) => {
const div = viewWriter.createContainerElement( 'div', {} );
const input = viewWriter.createEmptyElement( 'input', {'type': 'checkbox'} );
const label = viewWriter.createEditableElement( 'label', {} );
viewWriter.insert( viewWriter.createPositionAt( div, 0 ), input );
viewWriter.insert( viewWriter.createPositionAt( div, 1 ), label );
return toWidgetEditable( div, viewWriter );
}
} );
In the CKEditor 5 inspector, I can see that the view is rendered like this:
<div contenteditable="true" class="ck-editor__editable ck-editor__nested-editable">
<input type="checkbox" />
<label>
</label>
</div>
In the editor, I can't add text to the label or the surrounding div.
If I change the div declaration from createContainerElement to createEditableElement, I can insert text in the div, but I still can't edit the label.
How do I set up the converters so that I can have an editable label attached to my <input>? I've tried looking at the todolist code from ckeditor5-list, but it doesn't use conversion.for or elementToElement at all, so I'm a bit lost.
The code that you posted is incorrect because you cannot create view elements like that, out of the blue. They need to be mapped to something in the model if they are supposed to be editable. Unless this was supposed to be a non-editable region. In which case you should use toWidget() not to toWidgetEditable().
The second problem is that using focusable fields inside the editor has to be done very carefully. Such elements must be inside a non-editable part of the widget, plus, you need to stop the editor from handling events on them. This, currently, can only be achieved with a hack:
// Hack needed to make the input fields accessible and responsive when used in a widget.
function preventCKEditorHandling( domElement, editor ) {
// Prevent the editor from listening on below events in order to stop rendering selection.
domElement.addEventListener( 'click', stopEventPropagationAndHackRendererFocus, { capture: true } );
domElement.addEventListener( 'mousedown', stopEventPropagationAndHackRendererFocus, { capture: true } );
domElement.addEventListener( 'focus', stopEventPropagationAndHackRendererFocus, { capture: true } );
// Prevents TAB handling or other editor keys listeners which might be executed on editors selection.
domElement.addEventListener( 'keydown', stopEventPropagationAndHackRendererFocus, { capture: true } );
function stopEventPropagationAndHackRendererFocus( evt ) {
evt.stopPropagation();
// This prevents rendering changed view selection thus preventing to changing DOM selection while inside a widget.
editor.editing.view._renderer.isFocused = false;
}
See: https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
I'm trying to implement my own Image plugin replacement for CKEditor. I bootstraped an implementation from the tutorial at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
Right now, the only attribute thing editable is the src
In the code below, $.imagebrowser.openPopup(callback) opens a popup once the user has made his selection, calls callback, with the new src attribute of the image.
This works fine, both for insertion and edition, but there is a glich in the undo / redo integration. A modification of the src attribute made by doubleclicking is not undoable until an othe modification occurs (like typing text). Then the modification of the src attribute seems to be properly integrated in the undo/redo stack, and I can undo and redo it.
Any idea of what I'm doing wrong ?
CKEDITOR.plugins.add( 'customimage', {
// Register the icons. They must match command names.
icons: 'customimage',
// The plugin initialization logic goes inside this method.
init: function( editor) {
editor.on( 'doubleclick', function( event ) {
if(event.data.element.getName() == "img") {
$.imagebrowser.openPopup(function(src) {
event.data.element.setAttribute("src", src);
});
}
});
editor.addCommand( 'insertCustomimage', {
allowedContent: ['img[!src,alt]{width,height,float,margin}'],
// Define the function that will be fired when the command is executed.
exec: function() {
$.imagebrowser.openPopup(function(src) {
editor.insertHtml('<img src="' + src + '" style="width: 400px; height: auto; float: left; margin: 10px 10px;">');
});
}
});
// Create the toolbar button that executes the above command.
editor.ui.addButton( 'Customimage', {
label: 'Image',
command: 'insertCustomimage',
toolbar: 'insert'
});
}
});
I'm not sure this is what your looking for but you can make snapshots:
editor.fire( 'saveSnapshot' );
This will add a state to the Undo/redo stack.
This command should be added before this line:
event.data.element.setAttribute("src", src);
The editor.insertHtml() function has this included in the function. But if you're editing tags you need to do this manually
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
exactly copying source code from Pnotify project page, and put in in my page.
all links to jqueryUi and Pnotiy and other relative files were done and correct.
but when hovering on element for showing tooltip, toltip box goes to top-right of page;it's fixed and do not care of cursor position !
can ya help ?
$('span.required').bind({
mouseenter: function() {
var ttText = $(this).siblings('.required').html();
var ttTitle = "it's required";
tooltip = $.pnotify({
pnotify_title: ttTitle,
pnotify_text: ttText,
pnotify_hide: false,
pnotify_closer: false,
pnotify_history: false,
pnotify_animate_speed: 100,
pnotify_opacity: .9,
pnotify_notice_icon: "ui-icon ui-icon-comment",
pnotify_stack: false,
pnotify_after_init: function(pnotify){
pnotify.mouseout(function(){
pnotify.pnotify_remove();
});
},
pnotify_before_open: function(pnotify){
pnotify.pnotify({
pnotify_before_open: null
});
return false;
}
});
tooltip.pnotify_display();
},
mouseleave: function() {
tooltip.pnotify_remove();
}
});
Stacks are how you change the positioning.
Browse to http://pines.sourceforge.net/pnotify/.
Scroll down to "Advanced Demos".
Examine "Examples of custom stacks" bit. Click the buttons there.
View Source on the page to get to the code.
The tooltips do not use stacks like all the other notifications do. Instead you need to set up the position through CSS.
tooltip.get().css({
'top': event.clientY + 12,
'left': event.clientX + 12
});