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).
Related
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
i have uploaded codesnippet plugin inside /ckeditor/plugins/ directory.
My config.js file codes are:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basic', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'font', items: [ 'Font' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
{ name: 'last', items: [ 'Maximize' ] }
];
config.extraPlugins = 'codesnippet';
config.format_tags = 'p;h1;h2;h3;pre';
config.entities = false;
config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';
config.disableNativeSpellChecker = false;
};
But when i add config.extraPlugins = 'codesnippet'; line then editor do not work even i can't see textarea field.
And when i remove config.extraPlugins = 'codesnippet'; line then editor works perfectly.
Use the online builder to add the codesnippet plugin to your editor. Most probably your editor is missing dependencies.
Most plugins in CKEditor require some additional plugins to operate. If you download manually plugin A, there is a chance that you need to download dependencies for plugin A... and plugin B, which is required by plugin A. And sometimes you will need to download dependencies for plugin C, which was required by plugin B. Sounds like a nightmare, this is why we created online builder and why package managers exist.
I'm having troubles configuring CKEDITOR to have a custom toolbar with custom styles.
This is the config for the custom styles that i added to config.js
CKEDITOR.stylesSet.add('custom_styles', [
{ name: 'Text Bolder', element: 'p', attributes: { 'class': 'validate' }}
]);
This is the code i use configure the toolbar and the styles and initialize the toolbar
var cfg = {
toolbar: [
[ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
],
stylesSet: 'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);
The problem it's with the styles and i don't know why they show empty
The problem was with the <p> element. The previous code works if the element it's a <span> . I think it's because the inline editor is a <p> tag
CKEDITOR.stylesSet.add('custom_styles', [
{ name: 'Text Bolder', element: 'span', attributes: { 'class': 'validate' }}
]);
var cfg = {
toolbar: [
[ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
],
stylesSet: 'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);
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'
I visited a lot of websites to find a solution.
My editor works in almost every browser except internet explorer.
In internet explorer the space(textarea) to change the content isnt showing up, the rest of the editor is visible. Does anyone knows a solution? I didn't find it on the internet.
Updating the editor maybe is a solution, but it took me a while to configure it together with ckfinder, so I'm afraid that it ckfinder isn't working after an update.
The editor worked a few months ago, but I didn't work on the website for a few months.
<textarea id="textarea" name='text' class='editor'></textarea>
To show my editor.
<script>
$(document).ready(function(){
$('textarea.editor').ckeditor(
function() {
/* callback code */
},
{
language : 'nl',
uiColor : '#e9eaee',
toolbarStartupExpanded : false,
toolbar :
[
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks', 'Source'] },{ name: 'document', items : ['DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] }
],
height: '225',
extraPlugins : 'tableresize'
} );
});
</script>
Try to disable your add-ons, and if the problem was solved, enable add-ons one by one to find the one which cause the problem.
Based on the comments on the previous answer, the problem is with IE10, right? Sounds like a version issue. IE10 is not supported for CKFinder 2.2.2, so you could try updating CKF.
It would help if you include the CKFinder, CKEditor and Browser versions in the question :).
It could be a config or general JS issue too - do you have a JSfiddle or other link we could check out? Also, have you checked what the Developer tools for IE10 reports, there could very well be informative errors there.