In CKEDITOR's documentation there are suggestions to use the following in the config.js file:
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
{ name: 'document', items : [ 'Source','-',
'Save','NewPage','DocProps','Preview',
'Print','-','Templates' ] }
];
config.toolbar = 'Full';
};
Though that actually does not work. It only works without the parens:
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
[ 'Source','-','Save','NewPage','DocProps',
'Preview','Print','-','Templates' ]
];
config.toolbar = 'Full';
};
Now, Perch also has this little rig: CKEDITOR.replace that is meant to be used inline, but I would like to use it in the config.js file. How do I rewrite the call to CKEDITOR.replace so that it works inside config.js?
CKEDITOR.replace( 'editor1', {
toolbar : 'Full'
});
CKEDITOR.replace( 'editor2', {
toolbar : 'Basic'
});
As I replied in CKEditor forums, you must be using an old version of CKEditor, that toolbar syntax was introduced in CKEditor 3.6
Just load the CKEditor with your custom config:
CKEDITOR.replace( 'editor1', {
toolbar: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ]
});
Or define your custom toolbar and load it:
CKEDITOR.replace( 'editor2', {
toolbar_Custom: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
toolbar: 'Custom'
});
Related
I am using swagger api documentation tool for my backend, and I need to view the contents of the .yaml file in the browser when the url is called. But instead, I always end up having the file downloaded.
This is the content of my SwaggerUI tag:
<script>
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
url: "./app.yaml",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
</script>
I need to add a custom button to CKEditor 4.6.2 instance without plugin.
I've tried solution suggested at similar question How to add a custom button to the toolbar that calls a JavaScript function?
The difference is that I don't want to replace existing instance, but instead modify it after it's initialised. Like here: http://jsfiddle.net/paragonid/8r4gk45n/1/
CKEDITOR.replace('container', {
on: {
instanceReady: function( evt ) {
console.log('instanceReady', evt)
evt.editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
evt.editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
}
});
But button doesn't appear in this case.
I also faced the same issue, this is how I resolved mine-
var editor = CKEDITOR.replace(ck, {
toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
{name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]
});
editor.addCommand("insertImgCmd", {
exec: function(edt) {
helper.showdlg(component);
}
});
editor.ui.addButton('InsertCustomImage', {
label: "Insert Image",
command: 'insertImgCmd',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
While setting the toolbar, I inserted a custom command name "InsertCustomImage".
Now while creating new button below, set the same name as "InsertCustomImage" in addButton function.
I want to add a close a button in CK Editor (v4.4) and want to align it right, below screen shot shows the end product.
With the help of documentation from CKEditor website I was able to create a simple close plugin. With the help of little jQuery hack I am able align it right but if possible I would like to align it using standard toolbar creation approach rather then below hack.
Current working hack
<script>
$(document).ready(function () {
var rteComment = CKEDITOR.replace("txtPluginDemo", {
toolbar: [
['NumberedList', '-', 'Image'],
['Save'],
['CKClose'],
],
toolbarCanCollapse: false,
allowedContent: 'p img ol br',
disallowedContent: 'script',
extraAllowedContent: 'img[*]{*}(*)',
extraPlugins: 'ckclose',
image_previewText: "Image preview will be displayed here.",
disableNativeSpellChecker: false,
//If true <p></p> will be converted to <p> ,</p>
fillEmptyBlocks: true,
removePlugins: 'contextmenu,liststyle,tabletools',
skin: 'moonocolor',
});
rteComment.on("close", function (evt) {
alert("Ok time to close it.");
return true;
});
rteComment.on("instanceReady", function (evt) {
//THIS IS HACK
$(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" });
});
})
</script>
I am hoping that there will be some option in the below code which will let me specify the my css class here.
CKEDITOR.plugins.add('ckclose', {
// Register the icons. They must match command names.
icons: 'ckclose',
// The plugin initialization logic goes inside this method.
init: function (editor) {
// Define an editor command that inserts a timestamp.
editor.addCommand('closeEditor', {
// Define the function that will be fired when the command is executed.
exec: function (editor) {
if (editor.fire("close")) {
editor.destroy();
}
}
});
// Create the toolbar button that executes the above command.
editor.ui.addButton('CKClose', {
label: 'Discard changes and close the editor',
command: 'closeEditor',
toolbar: 'insert'
});
}
});
Below image is the Inspect Element View from Firefox.
I got help from the above answer slightly change the code its worked for me
CKEDITOR.on("instanceReady", function (evt) {
$(".cke_button__custom").closest(".cke_toolbar").css({ "float": "right" });
});
"custom" is my button name. Thank you,
You can put this piece
rteComment.on("instanceReady", function (evt) {
$(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" });
});
rignt inside
init: function( editor ) {
(e.g., before its closing bracket). That should be enough.
Also, you don't need to put initialization info in a SCRIPT tag of your main file. It can be cleaner to use config.js
http://docs.ckeditor.com/#!/guide/dev_configuration
Also, see an interesting example of a plugin here:
How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
How do I set text in CKEditor? CKEditor also needs to integrate with ckfinder.
I tried doing
// I need to set ckeditor text with a value in code behind. To get that value from code bhind, I am using a div which would be set in code behind. This is not hidden currently but I would do that eventually. I need to set this value to my ckeditor.
<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
window.onload = function () {
var edt = CKEDITOR.replace('editor1', { toolbar: 'Basic' });
CKFinder.setupCKEditor(edt, '/ckfinder/');
var t = <%=editortext.InnerText %>;
CKEDITOR.instances.editor1.setData(t);
}
If I put some static text for t, var t = "Some Text";
and then set
CKEDITOR.instances.editor1.setData(t); it works fine.
If I use,
var t = <%=editortext.InnerText %>;
CKEDITOR.instances.editor1.setData(t);
ckeditor is no longer displayed. Only text area is displayed. How to set text in ckeditor ? Please help
This syntax may be useful here:
CKEDITOR.instances['editor1'].setData(t); // where editor1 is id
OR try this
edt.setData(t);
<script>
function SetContents(value ) {
var oEditor = CKEDITOR.instances.MainContent_editor1;
var t = document.getElementById('<%=editor1.ClientID %>').value ;
oEditor.setData(t);
}
</script>
<script type="text/javascript">
var ckEditor = CKEDITOR.replace('<%=editor1.ClientID %>', {
// extraPlugins: 'bbcode',
// fullPage : true,
extraPlugins: 'docprops',
removeDialogTabs: 'image:advanced',
filebrowserImageUploadUrl: 'Upload.ashx',
resize_enabled: false,
toolbar: [
['Source', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['FontSize', 'TextColor', 'BGColor'],
['Image']
]
});
var oEditor = CKEDITOR.instances.MainContent_editor1;
var t = document.getElementById('<%=editor1.ClientID %>').value;
oEditor.setData(t);
function pageLoad() { // this is because after postback jquery not working
var instance = CKEDITOR.instances['<%=editor1.ClientID %>'];
if (instance) {
CKEDITOR.remove(ckEditor);
}
CKEDITOR.replace('<%=editor1.ClientID %>', {
// extraPlugins: 'bbcode',
// fullPage : true,
extraPlugins: 'docprops',
removeDialogTabs: 'image:advanced',
filebrowserImageUploadUrl: 'Upload.ashx',
resize_enabled: false,
toolbar: [
['Source', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['FontSize', 'TextColor', 'BGColor'],
['Image']
]
});
var oEditor = CKEDITOR.instances.MainContent_editor1;
var t = document.getElementById('<%=editor1.ClientID %>').value;
oEditor.setData(t);
}
</script>
Check in your browser's console for errors first. Also observe what is rendered from your backend code into this template. Most likely what you're missing are quotation marks "" and/or your rendered string contains unescaped apostrophes/quot. marks.
Console is everything.
this post is quote old but I hope I am not too late for others to see this:
You forgot to enclose the server side code with quotes:
var t = "<%=editortext.InnerText %>";
the page will be rendered like this:
var t = "your text here";
instead of
var t = your text here;
using your code will definitely break javascript's parser
You just put double quotes
for example :-
var mata = CKEDITOR.replace('meta_des');
var editor = CKEDITOR.replace('des1');
mata.setData("meta_des; ?>");
editor.setData("description1 ;?>");
here my meta_des is ckeditor and i want past my value in that ckeditor i will just put double quotes on my php tag and simply it will print my value that comes in database it will print.
I am using CKE Editor in my project. My requirement is to remove "FORM TOOLS" and make size of the CKE Editor ADJUSTABLE . So far I have displayed editor in web page successfully. I have searched google but unluckily i have got nothing. kindly help me on this.
just try this
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.removePlugins = 'forms';
};
Found one solution by reading documentation,
I added following configuration in config.js,
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
CKEDITOR.config.resize_enabled = true;
CKEDITOR.config.width = 600;
CKEDITOR.config.autoGrow_minHeight = 600;
CKEDITOR.config.autoGrow_maxHeight = 600;
CKEDITOR.config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
// ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], // here i disable the form tools
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['BidiLtr', 'BidiRtl' ],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];
};