Hello this is my js config file
CKEDITOR.replace( 'detay',
{
filebrowserUploadUrl : "../uploader.php?type=files",
filebrowserImageUploadUrl : "../uploader.php?type=images",
filebrowserFlashUploadUrl : "../uploader.php?type=flash",
language: 'az',
// Remove unused plugins.
removePlugins :'bidi,button,dialogadvtab,div,forms,horizontalrule,iframe,indent,pagebreak,showborders,stylescombo,table,tabletools,templates',
// Width and height are not supported in the BBCode format, so object resizing is disabled.
// Define font sizes in percent values.
fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
toolbar :
[
['Bold', 'Italic','Underline'],
['FontSize'],
['TextColor'],
['Link', 'Unlink', 'Image', 'SpecialChar'],
['NumberedList','BulletedList'],
['Find','Replace','-','SelectAll','RemoveFormat'],
['Source', 'Undo','Redo'],
['Maximize']
],
} );
And this is HTML:
<label for="detay"></label>
<textarea id="noise" name="detay"></textarea>
<script type="text/javascript" src="../js/ckayar.js"></script>
it is working for my country (TURKEY) but in other countries (except TUrkey) this code doesnt work , Text area doesnt show.
What can i do for this issue.
There's no "az" language in CKEditor, so it's reverting to detection of the user's language and I would bet that you have removed all the lang files except Turkish, so it doesn't find the lang file and you get an error in the browser console.
Related
I have been using mentions in CKEditor 5 to tag certain system variables. A typical tag looks like as:
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
#ApprovedCosts
</span>
When I try to render the following (the idea is to show the variable value when the user clicks preview, while he continues editing):
<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
<p>Nice rendered <b>html</b></p>
</span>
CKEditor goes bonkers.
My requirement is to show a nicely formatted variable name inside the tag. I know I can control via CSS, but there could be a situation where I might end-up rendering a small table (if variable points to a data set), etc.
Help will be appreciated.
Cheers.
Generally speaking, CKEditor 5 documentations refrain from going with your basic plain HTML approach, as seen in the comments:
This plugin customizes the way mentions are handled in the editor model and data.
Instead of a classic <span class="mention"></span>,
Within their mentions documentation (by the way, highly suggested to take a look at - it's very well documented with lots of useful examples in case you're stuck!), they're defining a ClassicEditor (to be precise, they want to mimic a chat platform in which you can tag a user and will receive a list of users in return).
ClassicEditor
.create( document.querySelector( '.chat__editor' ), {
extraPlugins: [ Essentials, Paragraph, Mention, MentionLinks, Bold, Italic, Underline, Strikethrough, Link ],
toolbar: {
items: [
'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
]
},
mention: {
feeds: [
{
marker: '#',
feed: [
{ id: '#cflores', avatar: 'm_1', name: 'Charles Flores' },
[...]
],
itemRenderer: customItemRenderer
[...]
After the mention object is created, they're calling the customItemRenderer function. This infrastructure could nearly identical be copied. For your part the function MentionLinks is important, as you can customize how mentions are handled, i.e. let's take a look at their example:
function MentionLinks( editor ) {
editor.conversion.for( 'upcast' ).elementToAttribute( {
view: {
name: 'a',
key: 'data-mention',
classes: 'mention',
attributes: {
href: true
}
},
model: {
key: 'mention',
value: viewItem => editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem )
},
converterPriority: 'high'
} );
Basically, you can customize all the properties within the MentionLinks function. CKEditor 5 did a good job documenting the mention plugin very hierarchically:
The documentation can be found here.
On a slight off-topic note I noticed your code passage <p>Nice rendered <b>html</b><p> contains little formality issues, i.e. you need to close the <p> tag by assigning a close tag </p>:
<p>Nice rendered <b>html</b></p>
Though I'm pretty sure that's not the error as you're talking about HTML in general and not only this code passage.
I think your main issue is your tags. Your paragraph tags (<p>) don't have a closing tag, only two opening tags. It should be <p>***your text here***</p>. If this doesn't fix the issue, please leave a comment.
How can prevent block elements in ckeditor?
I want to don't let to ckeditor to accept block elements.
With prevent enter key i can do this but if i paste some text that's include enter key or several paragraph in ckeditor everything down.
In other word i want a textbox with ckeditor.
Quoting an official weekly blog post:
CKEditor core developer, Olek Nowodziński, was hacking the editor a bit in his spare time and here is the result...
Editable header that does not break with Enter key or pasted multi–line content: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the crucial part of this code is that the ACF filters out the rest of block tags (other than <br>). In the case above the ACF works in an automatic mode where it's configured by the enabled features. And since there's no Format dropdown or any other feature creating blocks, none of them is allowed. Read more in the Advanced Content Filter guide.
I expect that one could ask now: "Why can't we configure ACF to filter out <br>s too?"
The answer is that ACF must be able to normalise blocks which are not allowed to some content, and as CKEditor does not support "no enter" mode officially, it choses between normalising to <p>, <div> or <br>. The decision is made based on the enter mode, so that's why it's important to configure such editor to enter mode BR.
I have a standard installation (like samples):
<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>
With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,
<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor, element = editor.element;
if ( element.is( 'h1', 'h2', 'h3' ) ) {
editor.on( 'configLoaded', function() {
editor.config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic' ]
]; // BUG: about "Source"?? NOT AT INTERFACE!
});
} else {
// WHERE PUT THIS ITEM?
customConfig: 'configType2.js';
}
});
</script>
So, my problem is
How to do a customConfig in this context?
Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.
I do,
git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html
and edit samples/myinline.html with the code above.
For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').
If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable1', {
customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
toolbar: [ ... ]
} );
I am using the following code to add ckeditor to my pages.
<textarea class="ckeditor" name="editor1"></textarea>
I would like to define a few toolbar configurations as not all of the textareas in my application need a full toolbar.
I have customized the default toolbar configuration for my needs, but would like to break this down even further to a more basic toolbar for some of my textareas.
Is there a way to do this if I am using the class attribute to set ckeditor?
It's not possible to have different configurations for editors created by class name. In such case, only the global CKEDITOR.config is considered.
Still there's easy workaround for this problem. First, put this script in the top of the document:
<script>
CKEDITOR.replaceClass = null; // Disable replacing by class
</script>
Now define the data-custom-config property (as config.customConfig) for each <textarea> you want to replace like this:
<textarea class="ckeditor" data-custom-config="myCustomConfig.js">
Moo
</textarea>
Finally use the following code to manually replace editors by class name (assuming your class is ckeditor). This code will replace all textareas of the class ckeditor with CKEditor instance driven by the config defined in data-custom-config attribute:
var textareas = Array.prototype.slice.call( document.getElementsByClassName( 'ckeditor' ) ),
textarea, cfg, customCfg;
while ( ( textarea = textareas.pop() ) ) {
textarea = new CKEDITOR.dom.element( textarea );
cfg = {};
if ( ( customCfg = textarea.getAttribute( 'data-custom-config' ) ) )
cfg[ 'customConfig' ] = customCfg;
CKEDITOR.replace( textarea.getId(), cfg )
}
And now comes the cherry on the top. Put your custom toolbar config in myCustomConfig.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
];
};
Of course you can modify this code to involve jQuery for easier element selection, use some object literal instead of config.customConfig and so on. This is just a showcase of how the problem can be solved.
I've written a custom plugin for CKEditor--successful on all fronts, save one currently: I can't, for the life of me, figure out how to customize the image on the button in the toolbar of the editor. As I'm a new user, you'll have to click through to see attached image; the highlighted square in the top left should have a pretty picture (like most of the other toolbar items).
I have written a complete tutorial covering every aspect of CKeditor plugin development, including buttons, context menus, dialogs and more.
The answer is to set the icon property of the button settings like so:
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
Your plugin directory should have an "images" subdirectory where your button should go. In the above snippet, replace "your-plugin.jpg' with the JPG, GIF or PNG image for your button.
This answer, of course, assumes that you know how to create a button image using some image editor like Gimp, Photoshop, etc.
Some info for others try to write plugins for CKEditor 3.0.
I've started by copying the source from plugins/flash and have now got a button with a youtube logo.... this is an extract from plugins/youtube/plugin.js
editor.ui.addButton( 'YouTube',
{
label : editor.lang.common.youtube,
command : 'youtube',
icon: this.path + 'images/youtube.gif'
});
Also you'll need to edit you language file.... e.g. lang/en.js
Add your plugin name to the "common" section (this appears as a tooltip when you hover over the button) and add a whole block for your plugin, with all your strings, like this....
// YouTube Dialog
youtube :
{
properties : 'YouTube Properties',
propertiesTab : 'Properties',
title : 'YouTube Properties',
chkPlay : 'Auto Play',
chkLoop : 'Loop',
chkMenu : 'Enable YouTube Menu',
chkFull : 'Allow Fullscreen',
scale : 'Scale',
scaleAll : 'Show all',
scaleNoBorder : 'No Border',
scaleFit : 'Exact Fit',
access : 'Script Access',
accessAlways : 'Always',
accessSameDomain : 'Same domain',
accessNever : 'Never',
align : 'Align',
alignLeft : 'Left',
alignAbsBottom: 'Abs Bottom',
alignAbsMiddle: 'Abs Middle',
alignBaseline : 'Baseline',
alignBottom : 'Bottom',
alignMiddle : 'Middle',
alignRight : 'Right',
alignTextTop : 'Text Top',
alignTop : 'Top',
quality : 'Quality',
qualityBest : 'Best',
qualityHigh : 'High',
qualityAutoHigh : 'Auto High',
qualityMedium : 'Medium',
qualityAutoLow : 'Auto Low',
qualityLow : 'Low',
windowModeWindow : 'Window',
windowModeOpaque : 'Opaque',
windowModeTransparent : 'Transparent',
windowMode : 'Window mode',
flashvars : 'Variables for YouTube',
bgcolor : 'Background color',
width : 'Width',
height : 'Height',
hSpace : 'HSpace',
vSpace : 'VSpace',
validateSrc : 'URL must not be empty.',
validateWidth : 'Width must be a number.',
validateHeight : 'Height must be a number.',
validateHSpace : 'HSpace must be a number.',
validateVSpace : 'VSpace must be a number.'
}
these are some plugins for CKEditor 3.x
CKEditor Plugins
Highslide JS Plugin,
LrcShow Plugin,
FileIcon Plugin,
InsertHtml Plugin,
SyntaxHighlighter Plugin
Download: CKEditor 3.x Plugins
There is a pretty exhaustive tutorial on CKEditor Documentation Website, see: CKEditor Plugin SDK - Introduction
At this moment it covers:
Creating an Editor Command
Creating the Toolbar Button with an icon
Explanation on how to register the plugin in CKEditor
Creating Plugin Dialog Window with Two tabs
Adding Context Menu
Advanced Content Filter (ACF) integration (on a separate page)
If you are interested in creating your own widgets, check also Widgets SDK Tutorial
To add your custom icon you need to edit skins/moono/*.css
For the editor itself you need to add the same CSS class in the following files
editor.css
editor_gecko.css (firefox)
editor_ie.css
editor_ie7.css
editor_ie8.css
editor_iequirks.css
The format name for a CSS button class is .cke_button__myCustomIcon_icon
You can either use your own image file for the icon or edit the sprite /skins/moono/icons.png to add your's.
In your plugin.js you need to have something like
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
});
Regarding font awesome, I was able to achieve this using CSS:
span.cke_button_icon.cke_button__bold_icon {
position: relative !important;
background-image: none !important;
&:after {
font-family: FontAwesome;
position: absolute;
font-size: 16px;
content: "\f032";
}
}