I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using CKEditor.</p>
</body>
</html>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});
Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-Released
Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
There's no configuration option for this, because it wouldn't make sense.
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.
Related
I want to let users select (and copy) text within TinyMCE.
I'm not quite sure, but it seems regarding security that browsers don't allow that.
This Codepen is from the official TinyMCE site:
https://codepen.io/tinymce/pen/NGegZK
Here you can select text.
When you add there the following parameter in the 2nd line of the JavaScript as followed, then you can't longer select text.
readonly: true,
How can I set "readonly: true" and let the user still select text?
I appreciate any help.
I faced this problem too. Moreover, the inability to select text is nothing compared to the inability to click links. I've submitted an issue about this a while ago, but there is still no reaction.
You can use a workaround for now (codepen):
readonly: 1,
setup: function(editor) {
editor.on('SwitchMode', function() {
if (editor.readonly) {
editor.readonly = 1;
}
});
}
It exploits the fact that the event-blocking code uses strict comparison internally (readonly === true) while the rest of the code works fine with any other truthy value, e.g. 1. Of course, this hack might stop working after an update in the future, but it's much better than nothing.
Update: better switch to the inline mode (codepen) if you use this hack. Otherwise clicking links leads to a mess.
I have checked the source code of the lastest nightly and it seems that the behavior is hardcoded. All events are discarded if the editor is in readonly mode. Which means that selection events are discarded too :
var isListening = function (editor) {
return !editor.hidden && !editor.readonly;
};
var fireEvent = function (editor, eventName, e) {
if (isListening(editor)) {
editor.fire(eventName, e);
} else if (isReadOnly(editor)) {
e.preventDefault();
}
};
I might be wrong but I don't think you can change this behavior through customization.
Regards
I solved this issue for achieve readonly mode by myself, I would create an iframe dom node and put the editor's html segment into it.
renderReportPreview = contentHtml => {
const iframe = document.querySelector('iframe[name=preview]')
if (iframe) {
const cssLink = document.createElement('link')
// cssLink.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
// I prefer semantic-ui, semantic-ui is more like tinyMce style
cssLink.href = 'https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css'
cssLink.rel = 'stylesheet'
cssLink.type = 'text/css'
iframe.contentWindow.document.head.appendChild(cssLink)
// I escape the origin editor's content, so I need decode them back
iframe.contentWindow.document.body.innerHTML = htmlDecode(contentHtml)
const allTables = iframe.contentWindow.document.body.querySelectorAll(
'table'
)
Array.from(allTables).forEach(table => {
// ui celled table for compatible semantic-ui
// table table-bordered for compatible bootstrap
table.className = 'ui celled table table-bordered'
})
this.setState({
previewRendered: true,
})
}
}
More detail on https://github.com/tinymce/tinymce/issues/4575
It was previously possible to select text in readonly mode, until the fix for #4249 broke it in 4.7.12.
We've just started tracking a fix that allows text to be selected and links to be clicked, follow either of the tickets linked here to be updated when we release a fix.
I have an element $('#anElement') with a potential popover attached, like
<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>
I just would like to know how to check whether the popover is visible or not: how this can be accomplished with jQuery?
If this functionality is not built into the framework you are using (it's no longer twitter bootstrap, just bootstrap), then you'll have to inspect the HTML that is generated/modified to create this feature of bootstrap.
Take a look at the popupver documentation. There is a button there that you can use to see it in action. This is a great place to inspect the HTML elements that are at work behind the scene.
Crack open your chrome developers tools or firebug (of firefox) and take a look at what it happening. It looks like there is simply a <div> being inserted after the button -
<div class="popover fade right in" style="... />
All you would have to do is check for the existence of that element. Depending on how your markup is written, you could use something like this -
if ($("#popoverTrigger").next('div.popover:visible').length){
// popover is visible
}
#popoverTrigger is the element that triggered that popover to appear in the first place and as we noticed above, bootstrap simply appends the popover div after the element.
There is no method implemented explicitly in the boostrap popover plugin so you need to find a way around that. Here's a hack that will return true or false wheter the plugin is visible or not.
var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false
It accesses the data stored by the popover plugin which is in fact a Popover object, calls the object's tip() method which is responsible for fetching the tip element, and then checks if the element returned has the class in, which is indicative that the popover attached to that element is visible.
You should also check if there is a popover attached to make sure you can call the tip() method:
if ($('#anElement').data('bs.popover') instanceof Popover) {
// do your popover visibility check here
}
In the current version of Bootstrap, you can check whether your element has aria-describedby set. The value of the attribute is the id of the actual popover.
So for instance, if you want to change the content of the visible popover, you can do:
var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');
This checks if the given div is visible.
if ($('#div:visible').length > 0)
or
if ($('#div').is(':visible'))
Perhaps the most reliable option would be listening to shown/hidden events, as demonstrated below. This would eliminate the necessity of digging deep into the DOM that could be error prone.
var isMyPopoverVisible = false;//assuming popovers are hidden by default
$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});
$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});
These events seem to be triggered even if you hide/show/toggle the popover programmatically, without user interaction.
P. S. tested with BS3.
Here is simple jQuery plugin to manage this. I've added few commented options to present different approaches of accessing objects and left uncommented that of my favor.
For current Bootstrap 4.0.0 you can take bundle with Popover.js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
// jQuery plugins
(function($)
{
// Fired immiedately
$.fn.isPopover = function (options)
{
// Is popover?
// jQuery
//var result = $(this).hasAttr("data-toggle");
// Popover API
var result = !!$(this).data('bs.popover');
if (!options) return result;
var $tip = this.popoverTip();
if (result) switch (options)
{
case 'shown' :
result = $tip.is(':visible');
break;
default:
result = false;
}
return result;
};
$.fn.popoverTip = function ()
{
// jQuery
var tipId = '#' + this.attr('aria-describedby');
return $(tipId);
// Popover API by id
//var tipId = this.data('bs.popover').tip.id;
//return $(tipId);
// Popover API by object
//var tip = this.data('bs.popover').tip; // DOM element
//return $(tip);
};
// Load indicator
$.fn.loadIndicator = function (action)
{
var indicatorClass = 'loading';
// Take parent if no container has been defined
var $container = this.closest('.loading-container') || this.parent();
switch (action)
{
case 'show' :
$container.append($('<div>').addClass(indicatorClass));
break;
case 'hide' :
$container.find('.' + indicatorClass).remove();
break;
}
};
})(jQuery);
// Usage
// Assuming 'this' points to popover object (e.g. an anchor or a button)
// Check if popover tip is visible
var isVisible = $(this).isPopover('shown');
// Hide all popovers except this
if (!isVisible) $('[data-toggle="popover"]').not(this).popover('hide');
// Show load indicator inside tip on 'shown' event while loading an iframe content
$(this).on('shown.bs.popover', function ()
{
$(this).popoverTip().find('iframe').loadIndicator('show');
});
Here a way to check the state with Vanilla JS.
document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');
This works with BS4:
$(document).on('show.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', true);
});
$(document).on('hidden.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', false);
});
if ($('#anElement').data('isvisible'))
{
// popover is visible
$('#tipUTAbiertas').tooltip('hide');
$('#tipUTAbiertas').tooltip('show');
}
Bootstrap 5:
const toggler = document.getElementById(togglerId);
const popover = bootstrap.Popover.getInstance(toggler);
const isShowing = popover && popover.tip && popover.tip.classList.contains('show');
Using a popover with boostrap 4, tip() doesn't seem to be a function anymore. This is one way to check if a popover is enabled, basically if it has been clicked and is active:
if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}
I have a situation on CKEditor that I would like to resolve. I use a jQuery color picker to add background color to a DIV tag. Then I allow the user to edit the Div tag contents using CKEditor. However, I noticed that there isn't a simple way to take the div tag's background color and then make that as the background color of the CKEditor when the editor loads up.
I have read up on bodyClass and bodyId and do not think that these solve my problem. I do not have a class element but an inline style declaration like
<div class="tp-header" style="background-color:#CCCCCC;">content</div>
I invoke the CKEditor as follows:
var editorId = 'editor1';
var instance = CKEDITOR.instances[editorId];
var color = $('.' + headerElementClass).css('background-color');
if (instance) { CKEDITOR.remove(instance); }
$('#' + editorId).ckeditor({ toolbar: 'BasicHtml', height: '100px', width: '500px', fullPage: false, bodyClass : 'background-color:' + color });
$('#' + editorId).val($('.' + headerElementClass).html());
Notice the failed usage of bodyClass. Is there any way to do this? I have scourged around the site for answers but couldn't find one. I hope someone here has the answer.
I was thinking about this and I came up with a much simpler solution.
I'm not using the CKEditor jQuery adapter, so you may need to modify it to fit your situation.
I did test it using the standard JavaScript integration approach.
Quick Overview:
Set the variables.
Create the editor instance.
Insert this "addCss" function call:
CKEDITOR.instances[editorId].addCss( 'body { background-color: '+color+'; }' );
That's all there is to it. Here's a sample based on your code:
// I added the "id" attribute:
<div id="editor1" class="tp-header" style="background-color:#CCCCCC;">content</div>
// Declare the variables, I added "headerElementClass".
var headerElementClass = "tp-header";
var color = $('.' + headerElementClass).css('background-color');
var editorId = 'editor1';
// Create the instance.
var instanceOne = CKEDITOR.replace( editorId,
{
toolbar: 'Basic',
height: '100px',
width: '500px',
fullPage: false,
customConfig : 'yourCustomConfigFileIfUsed.js'
});
// Insert the "addCss" function call:
instanceOne.addCss( 'body { background-color: '+color+'; }' );
The addCss function call can be moved to your config file if you prefer (place it outside the editorConfig function).
Be Well,
Joe
Leaving the more complicated approach, someone might find the concepts useful.
You could use ( bodyClass: 'nameOfClass' ), then assign a value to the background-color property of that class. But that's difficult because you have a dynamic background color.
To assign the background color dynamically you could do something like this:
Starting with your code and continuing the use of jQuery:
var editorId = 'editor1';
var instance = CKEDITOR.instances[editorId];
var color = $('.' + headerElementClass).css('background-color');
// Create a unique body id for this instance "editor1" ( bodyIdForeditor1 )
var idForBody = 'bodyIdFor' + editorId;
if (instance) { CKEDITOR.remove(instance); }
// Use bodyId instead of the original bodyClass assignment
$('#' + editorId).ckeditor({
toolbar: 'BasicHtml',
height: '100px',
width: '500px',
fullPage: false,
bodyId : idForBody
});
$('#' + editorId).val($('.' + headerElementClass).html());
// After both the document and editor instance are ready,
// assign the background color to the body
// Wait for the document ready event
$(document).ready(function(){
// Wait for the instanceReady event to fire for this (editor1) instance
CKEDITOR.instances.editor1.on( 'instanceReady',
function( instanceReadyEventObj )
{
var currentEditorInstance = instanceReadyEventObj.editor;
var iframeDoc=null;
// Create a function because these steps will be repeated
function setIframeBackground()
{
// The CKEditor content iframe doesn't have a Name, Id or Class
// So, we'll assign an ID to the iframe
// it's inside a table data cell that does have an Id.
// The Id of the data cell is "cke_contents_editor1"
// Note that the instance name is the last part of the Id
// I'll follow this convention and use an Id of "cke_contents_iframe_editor1"
$("#cke_contents_editor1 iframe").attr("id", "cke_contents_iframe_editor1");
// Now use the iframe Id to get the iframe document object
// We'll need this to set the context and access items inside the iframe
$('#cke_iframe_editor1').each(
function(){ iframeDoc=this.contentWindow.document;}
);
// Finally we can access the iframe body and set the background color.
// We set the Id of the body when we created the instance (bodyId : idForBody).
// We use the iframe document object (iframeDoc) to set the context.
// We use the "color" variable created earlier
$('#' + idForBody, iframeDoc).css("background-color", color);
}
// Call the function to set the color when the editor instance first loads
setIframeBackground();
// When the user switches to "source" view mode, the iframe is destroyed
// So we need to set the color again when they switch back to "wysiwyg" mode
// Watch for the "mode" event and check if we're in "wysiwyg" mode
currentEditorInstance.on( 'mode', function()
{
if(currentEditorInstance.mode == 'wysiwyg')
setIframeBackground();
});
}
);
});
Be Well,
Joe
codewaggle's answer is a good one, but if you want to set inline styles on the editor's <body> element, you can do that too, using:
editor.document.getBody().setStyle()
or
editor.document.getBody().setStyles()
However, you'll need to redo this every time after calling editor.setData() and after the user switches back to wysiwyg mode (from source mode), because these things re-create the editor iframe. To do all that, set your styles using a function, say setEditorStyle, in which you check first that editor.mode==='wysiwyg' (editor.document is null otherwise), then add that function as an event listener for the instanceReady and mode events; and perhaps also the contentDom event if you ever call setData() and don't want to call it manually afterwards.
See some other StackOverflow answers here and here
Dynamic Body Color change CKEditor
Expert Suggestion
I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.
I'm using the jQuery Tooltip control, http://docs.jquery.com/Plugins/Tooltip and it works really well. However, I have a task to show the tooltip when someone types 2 characters into an autocomplete control. I have it all hooked up to do it, but I do not know how to explicitly show the jQuery tooltip plugin.
MyCompany.UI.Controls.AutoCompleteExtender = new function() {
/// <summary>
/// An extension of the autcomplete control.
/// </summary>
// Private Members
var _this = this;
// Public Members
this.charsBeforeShowingTooltip = 2; // Change this value via server-side code if
// clients want different values.
this.showTooltip = function() {
var item;
if (this.value.length === _this.charsBeforeShowingTooltip) {
// Explicitly show the tooltip after two characters have been entered.
alert('show the tooltip explicitly');
}
}
}
And later on in server-side generated code, the following JavaScript renders to the page
$(document.ready(function() {
$('#someClientId').bind('keyup', MyCompany.UI.Controls.AutoCompleteExtender.showTooltip);
});
Now this all works except I don't know how to explicitly show the tooltip plugin. I've tried the following and none of them work:
...
this.showTooltip = function() {
var item;
if (this.value.length === _this.charsBeforeShowingTooltip) {
// Explicitly show the tooltip after two characters have been entered.
$(this).hover(); // doesn't work
$(this).trigger('mouseover'); // doesn't work
$(this).trigger('mouseenter'); // doesn't work
}
}
...
I also tried adding the CSS class show-tooltip (got that from Google), but that didn't work either.
Aside from modifying the plugin, is there a way to do this out of the box?
Well there were a couple of issues. The control that I thought had the title tag didn't (always check the obvious first!). The title tag was actually on a table row, not the control in a table cell. OK, so that got the mouseover firing, however when I explicitly fired the mouse over event, the jQuery Tooltip plugin was throwing an error that event.pageX and event.pageY were undefined.
The reason why they were undefined was because the event was explicitly fired, so there were no X/Y coordinates being passed in the event object from the mouse. So what I did was modify the jQuery Tooltip plugin to check if these are undefined as well. If they are the offsetLeft and offsetTop properties of the helper.parent control in the Tooltip plugin are used instead.
Here is the code I modified in the Tooltip plugin:
/**
* callback for mousemove
* updates the helper position
* removes itself when no current element
*/
function update(event) {
// ... code omitted for clarity
// if (event) { // This was the old check
if (event && typeof(event.pageX) !== "undefined" && typeof(event.pageY) !== "undefined") {
// ... more code omitted for clarity
}
// ... even more code omitted for clarity
}
Thanks again to Joern Zaefferer for creating this plugin, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip.