I have a table, I want each cell can be editable.
I each cell can be editable when user click on a cell.
My code can done the job well, I want the updated data can be updated to server database when the editing complete, so I capture the blur event to do so, the problem is when I select text color in toolbar, the blur event is triggered also, so, would you tell me to fix the issue? Or is there any other method to get the job done.
Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript" src="ckeditor/ckeditor.js"></script>
<script language="javascript" src="ckeditor/adapters/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
$("[id^='editor']").ckeditor().on("blur",function(){alert($(this).ckeditor().editor.getData());return false;}); </script>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="editor1" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The "div" element that contains this text is now editable.</p>
</div>
</td>
</tr>
<tr>
<td>
<div id="editor2" contenteditable="true">
<h1>Inline Editing in Action!</h1>
<p>The "div" element that contains this text is now editable.
</div>
</td>
</tr>
</table>
</body>
</html>
Here is my config.js
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for a single toolbar row.
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
];
// The default plugins included in the basic setup define some buttons that
// are not needed in a basic editor. They are removed here.
config.removeButtons = 'Anchor,Underline,Strike,Subscript,Superscript,Link,Unlink,Styles,About,HorizontalRule,Blockquote,Italic,SpellChecker,SpecialChar,Format';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'onchange';
};
thank you very much
Related
I'm using CKEditor in my web, I have intergated CKeditor and want to upload my image from pc to server
I refer this link:
http://devture.com/projects/ckeditor-imagebrowser/demo/
this is my code:
<div class="container">
<!-- <h2><label for="editor1">Developer Site Editor</label></h2> -->
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"> </textarea>
</div>
<script>
CKEDITOR.replace( 'ir1', {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
// The standard preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 2-line toolbar. Here we put all buttons in a single row.
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'CodeSnippet', 'Image', 'Mathjax', 'EmbedSemantic', 'Table' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'styles', items: [ 'Format', 'Styles' ] }
],
...
</script>
When I run and icon image display but it is not include 'browsers server' button
How to add 'Browsers Server' button in CKEditor ? Thank so much !!
Please see this link as well as other links from that section.
Basically you should set at minimum these two settings: filebrowserBrowseUrl and filebrowserUploadUrl advanced file manager like e.g. CKFinder or to some custom code which will handle uploads and file browsing for you.
Please also note that File Browser plugin is required (it is available by default in standard and full packages).
I'm using Editor in my web, I want to replace old Editor by new Editor by CKEditor
Those are my js:
<-- js of old editor -->
<link rel="stylesheet" type="text/css" href="../../css/test_style.css">
<script type="text/javascript" src="./se2/js/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="./se2/js/smarteditor_etest_util.js" charset="utf-8"></script>
<!-- js of new editor -->
<script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script>
This is my HTML:
<table border="0">
<tr>
<td width="640" height="650">
<!-- naver smart editor -->
<!-- <textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea> -->
<div class="container">
<!-- <h2><label for="editor1">Developer Site Editor</label></h2> -->
<textarea name="ir1" id="ir1"> </textarea>
</div>
<script>
CKEDITOR.replace( 'ir1', {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
// The standard preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 2-line toolbar. Here we put all buttons in a single row.
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'CodeSnippet', 'Image', 'Mathjax' ] }, { name: 'styles', items: [ 'Format', 'Styles' ] }
],
...
</script>
<!-- end of naver smart editor -->
</td>
</tr>
</table>
my script:
<script>
var qtype = "<%=qtype%>";
var excount = <%=excount%>;
var cacount = <%=cacount%>;
function OnSave()
{
var form = document.writeForm;
var s = seu_getEditorValidContent('ir1', "Input question.");
if (s) {
form.contents1.value = s;
} else {
return;
}
if(qtype == "2" || qtype == "3") {
if ( excount >=3 ) {
s = seu_getEditorValidContent('ir2', "Please enter example 1.");
if (s) {
form.contents2.value = s;
} else {
return;
}
s = seu_getEditorValidContent('ir3', "Please enter example 2.");
if (s) {
form.contents3.value = s;
} else {
return;
}
}
form.contents10.value = seu_getEditorContent('10');
form.contents11.value = seu_getEditorContent('11');
form.contents12.value = seu_getEditorContent('12');
}
When I use id="ir1" in textarea it still display old editor. How to remove old editor and replace new Editor(CKEditor)?
I deploy and run throught script
Thank you !!
I am tasked with fixing a problem with my company's CMS. We use CKEditor. When users cut from microsoft word and paste into the editor, tags are removed. This was done intentionally by someone who no longer works at the company, and now we want to allow a tags.
I am able to find the editor by going into the javascript console. When I inspect the object, I find that editor.config.allowedContent is set to "p[*](*){*}; h1[*](*){*}; h2[*](*){*}; em; b; u; ul[*](*){*}; ol[*](*){*}; li[*](*){*}; img[*](*){*}; iframe[*](*){*}; a[*](*){*}; object[*](*){*}; param[*](*){*}; embed[*](*){*}; video[*](*){*}; i; table[*](*){*}; tr[*](*){*}; td[*](*){*}; script[*](*){*}; h3[*](*){*}; span[*](*){*}; br[*](*){*}; div[*](*){*}; strong; blockquote[*](*){*} which contains an a tag.
What other possible causes could their be for the link tags being stripped on copy + paste?
Thanks!
Edit:
Here is config.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.fillEmptyBlocks = false;
config.baseFloatZIndex = 100001;
config.extraAllowedContent = 'a';
};
CKEDITOR.config.fillEmptyBlocks = false;
Furthermore it seems some config options are set dynamically:
this.editorObject = CKEDITOR.inline(this.$editable[0],{
forcePasteAsPlainText: true,
title: this.label,
customConfig: '',
removePlugins: 'autocorrect,format,stylescombo',
removeButtons: 'PasteText,Flash,Anchor,ShowBlocks,About',
extraPlugins: extraPlugins,
linkShowAdvancedTab: false,
linkShowTargetTab: true,
youtube_responsive: true,
youtube_related: false,
scayt_autoStartup: true,
readOnly: this.disabled,
floatSpacePinnedOffsetY: 100,
floatSpaceDockedOffsetY: 25,
toolbar: this.toolbarDefinitions[this.variant],
allowedContent: allowedContent,
blockedKeystrokes: blockedKeystrokes,
keystrokes: keystrokes,
on: {
instanceReady: _.bind(function(e) {
if (this.fieldname == 'inc_clean_text' && this.area) {
this.area.generateInlineVideoPlayers();
var area = this.area;
async.nextTick(function() {
_.each(area.inlineVideoPlayers, function(player) {
player.menu && player.menu.show();
});
});
}
this.$editable.focus();
// When triggerred will focus on the editor.
this.$editable.on('focusCursor', (function() {
var range = this.editorObject.createRange();
range.moveToElementEditablePosition(this.editorObject.editable(), true);
this.editorObject.getSelection().selectRanges([range]);
}).bind(this));
if (this.editorObject.document.$.getElementById('caret-position-placeholder')) {
// When there is a caret placeholer present will put the cursor there and
// remove the placeholder element.
var node = new CKEDITOR.dom.element(this.editorObject.document.$.getElementById('caret-position-placeholder'));
var range = new CKEDITOR.dom.range(this.editorObject.document);
range.selectNodeContents(node);
this.editorObject.getSelection().selectRanges([range]);
$(this.editorObject.document.$.getElementById('caret-position-placeholder')).remove();
}
if (this.$editable.hasClass('pancaption_override')) {
// ! TODO Move elsewhere.
// Code specific to the main feature image caption editor.
if (this.$editable.data('reshow')) {
this.$editable.data('reshow', false);
$('.pancaption_default').hide();
this.$editable.attr('contenteditable', true);
this.$editable.show().focus().trigger('click');
this.editorObject.setReadOnly(this.disabled);
}
if (this.$editable.html() == '') this.$editable.trigger('focusCursor');
}
// When on the new article page and clicking on a field with default text then empty
// the editable text.
//this.editorObject.setData('');
//this.$editable.trigger('focusCursor');
//this.$editable.toggleClass('empty', true);
}, this),
change: _.bind(this.contentChanged, this)
}
});
Let me know if I should trace any of these variables.
Controlling which tags are allowed or disallowed is done through the config.js file usually located in the root of the CKEditor directory. http://docs.ckeditor.com/#!/guide/dev_configuration
As you've discovered through the console you can either allow or disallow certain tags through config.allowContent or config.disallowedContent respectively. http://docs.ckeditor.com/#!/guide/dev_acf
i'm struggling with Ckeditor for a weird behaviour i got when loading some templates.
My template has a part of css with some media queries:
#media only screen and (max-width: 599px)
{
/* General settings for Mobile */
body{width:auto!important;}
table[class=fullWidth] {width: 100%!important;}
.....
}
and a part of html, simple table like :
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="font-size: 0;line-height: 0;border-collapse: collapse;" >
<tr>
<td width="600" height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;" class="MobileScale2"> </td>
</tr>
</table>
I paste this code inside the box of Source and, with a pluging made by me, i resize the content area with a simple:
$('.cke_wysiwyg_frame').animate({"width": "480px"},400);
The weird fact is: with the Standard Edition of Ckeditor i see that the layout behaves correctly, changing the width of table from 600 to 100%! when i launch the jquery command,
with the Full edition this does not happens at all...the media query is totally ignored.
This is my config.js file:
* #license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//config.ignoreEmptyParagraph = false;
config.allowedContent = true;
//config.allowedContent = 'title img form input param pre flash br a td p span font em strong table tr th td style script iframe u s li ul div[*]{*}(*)';
config.startupShowBorders = false;
config.EnableMoreFontColors = 'true' ;
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'tools' },
{ name: 'mode' },
{ name: 'Image'},
{ name: 'others',groups: [ 'colorpicker']},
'/',
{ name: 'others'},
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' }
];
};
Anybody can help? I tried to search this problem in google, here and inside the forum of Ckeditor community, but nothing !
Thanks!
After hours analysing the code ...i got to fix it.
For some reason The Full version of Ckeditor doesn't understand this syntax:
table[class=fullWidth]
It needs to be changed to:
table.fullWidth
Now it works!
Cheers ;)
After adding extra plugin in CKEditor: config.extraPlugins = 'syntaxhighlight'; I can't put it on navigation bar at place I wanted.
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'spellchecker' },
];
config.extraPlugins = 'syntaxhighlight';
When I load CKEditor my syntax plugin is placed in insert group, and I don't know how to get it out of there or how to place it any where else.
I'm using version 4.3
You need to locate place where button is defined within plugin.js file, so in your case that will be:
ckeditor/plugins/syntaxhighlight/plugin.js
Usually button definitions are passed to editor.ui.addX method, i.e.
editor.ui.addButton( 'MyButton',
{
label : 'My button label',
toolbar : 'insert,100'
} );
You need to adjust toolbar property:
- string part insert tells which group will receive button.
- number 100 stands for its position. The lower number is, the higher priority your button will have.
You may update property into following value:
toolbar : 'insert,5'