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.
Related
I installed the TinyMCE editor on a vanilla Connections 5 CR6 installation and now want to add plugins. HCL told us that we have the pro version of TinyMCE licenced together with Connections. One example of the pro-plugins is the checklist, which I want to install.
So I add the plugin-files of the checklist as well as the lists (required as dependency) in the externalPlugins array of the config.js file:
externalPlugins: [
{
name: "checklist",
url: pluginBaseDir + "checklist/plugin.min.js",
off: []
},{
name: "lists",
url: pluginBaseDir + "lists/plugin.min.js",
off: []
}
]
and added checklist to the toolbar:
toolbar: [
"undo",
{
label: "group.insert",
items: [
{
id: "insert",
label: "menu.insert",
items: [
[
"checklist",
"link",
"conn-insert",
"bookmark",
"media",
"pageembed",
"table",
"codesample"
],
[
"specialchar",
"hr"
]
]
}
]
},
"style",
"emphasis",
"align",
"listindent",
"format",
[
"conn-other",
"conn-emoticons",
"conn-macros"
],
"language",
"tools"
]
Where pluginBaseDir is set to /connections/resources/web/tiny.editors.connections/tinymce/plugins/. The requested JS files are accessable, I verified this using curl.
But the button isn't shown. I tried
Adding the checklist in the first level
toolbar: [
"checklist",
"undo"
// ...
Adding tmce prefix
Read about this in the example config.js file:
toolbar: [
"tmce-checklist",
"undo"
// ...
Testing procedure
After each change on config.js, I restart the Common application by stopping and starting them using jython wsadmin script. This works, which could be easily verified using the postCreateTextboxio method, which can be included in the config object:
postCreateTextboxio: function(editor) {
console.log("custom.js revision #2");
}
So I got the console output after re-starting the Common application.
The plugin was loaded, with could be verified in the browser console:
> tinyMCE.editors[0].settings.plugins.indexOf('toc')
319
Ephox caused the problem: While adding the plugin directly works with the original TinyMCE, we have Ephox in HCL Connections. It acts as a middleware to have a shared configuration file between multiple editors supported by Connections (TinyMCE, Textbox.io and CKEditor).
With Ephox, we need to prefix plugin names with tmce- when referencing in the toolbar:
{
label: "Test",
items: ["table", "tmce-toc"]
}
The checklist plugin is already included with the Tiny Editors for Connections integration so you can leave off the externalPlugins entry but it is not included in the default toolbar because it requires additional CSS.
Currently the checklist plugin does not register a menu item so it can not be added to the insert menu, however you can add it to the toolbar with the following config:
toolbar: [
"undo",
{
label: "group.insert",
items: [
{
id: "insert",
label: "menu.insert",
items: [
[
"link",
"conn-insert",
"bookmark",
"media",
"pageembed",
"table",
"codesample"
],
[
"specialchar",
"hr"
]
]
}
]
},
"style",
"emphasis",
"align",
[
"checklist"
],
"listindent",
"format",
[
"conn-other",
"conn-emoticons",
"conn-macros"
],
"language",
"tools"
]
The reason why you could not add checklist at the first level is that all first level items are groups of toolbar items. You can create an anonymous group with the square brackets. Note that this syntax was chosen because it was backwards compatible with Textbox.io and changing it to be TinyMCE specific would break the configuration for our pre-existing customers.
Once you have the checklist plugin button showing you need to add the CSS it uses to connections so that it will render.
.tox-checklist > li:not(.tox-checklist--hidden) {
list-style: none;
margin: .25em 0;
position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
background-size: 100%;
content: '';
cursor: pointer;
height: 1em;
left: -1.5em;
position: absolute;
top: .125em;
width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}
CSS required for checklist plugin
How to add CSS to Connections
We are currently working on a shim for the checklist plugin to allow it to work in Connections without requiring the global CSS change and to work better in the activity stream where styles and classes are stripped. I expect this will be in the 4.2.0 release.
I'm using CKEditor Version 4.5 and the issue is only with IE (using v.11).
The CKEditor is implemented in a JSF Dialog (Richfaces), and everytime I click a drop down it shows for about 0.5 sec and then it disappears. The console dosen't show any errors.
First I thought mabye the dialog loses it's focus but I've allready tried to set the focus after click on the editor back to the dialog, but that did not resolve the problem. Any suggests what the problem could be?
EDIT
<div class="editor-container">
<rich:editor id="editor" value="#{bean.editor}">
<f:facet name="config">
toolbar: 'custom',
startupFocus: true,
toolbar_custom:
[
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'tools', items : [ 'Maximize' ] }
]
</f:facet>
</rich:editor>
</div>
Only happens inside twitter-bootstrap modal.
Solution: If the font, size dropdowns are not working in IE, please copy the code below.
$.fn.modal.Constructor.prototype.enforceFocus = function()
{
modal_this = this
$(document).on('focusin.modal', function (e)
{
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& $(e.target.parentNode).hasClass('cke_contents cke_reset'))
{
modal_this.$element.focus()
}
})
};
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 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.
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'