ckeditor / ckeditor4-docs-samples

Code samples for the official CKEditor 4 documentation (https://ckeditor.com/docs/ckeditor4/)

Code samples for CKEditor 4 documentation

This repository contains ready-to-use code samples created for the CKEditor 4 documentation and website.

In order to see a sample in action, copy its source to the CKEditor plugins directory.

1. Download a CKEditor package. Note that for development purposes it is recommended to download the source version. You can do this by downloading your own CKEditor build (note the sample's requirements) and checking the "Source (Big N’Slow)" option at the bottom. You can also clone the CKEditor development repository and proceed from there.

2. Copy the plugin directory which you can find in every sample to the plugins directory in the installed CKEditor package.

For example:

# Clone the CKEditor development repository and this repository with samples.
git clone https://github.com/ckeditor/ckeditor4.git
git clone https://github.com/ckeditor/ckeditor4-docs-samples.git

# Checkout the latest stable branch (equals to latest release available on https://ckeditor.com/ckeditor-4/download/).
cd ckeditor4
git co stable
cd ..

# Enter one of samples directory.
cd ckeditor4-docs-samples/tutorial-simplebox-1/

# Copy plugin directory to CKEditor directory.
cp -R simplebox/ ../../ckeditor4/plugins/

Now open the plugin sample in your browser. The URL will look like:

http://<your-host>/<ckeditor-package-path>/plugins/simplebox/samples/simplebox.html

For example:
http://localhost/ckeditor4/plugins/simplebox/samples/simplebox.html

License

For license details see: LICENSE.md.

ckeditor4-docs-samples's Issues

Simple box should require dialog plugin

After removing dialog from the clipboard plugin (which was a dependency of a widget plugin) the dialog plugin is no longer implicitly loaded.

Since this plugin explicitly uses dialog, it should list it as it's dependency.

SimpleBox example error on iPhone7 iOS 12.2 on Safari

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

CKEditor 4.11.4

This bug is visible on the ckeditor.com site here:

https://ckeditor.com/docs/ckeditor4/latest/examples/simplebox.html

📋 Steps to reproduce

1. in Safari on an iPhone 7 running iOS 12.2 load the simple box widget example: https://ckeditor.com/docs/ckeditor4/latest/examples/simplebox.html
2. add a enough lines below the simple box widget so that it scrolls out of the visible view
3. touch the widget to select it
4. scroll the editor content to the bottom so that the widget is not visible.
5. touch the bottom content somewhere to place the cursor there.

✅ Expected result

The cursor should display

❎ Actual result

The page jumps to the very top and more often than not the editor view scrolls back up to the simple box.

📃 Other details that might be useful

https://drive.google.com/file/d/1_aUO4jdJBxOcBEK4EteO8K0Q5Hnx1WvI/view?usp=sharing

Print Problem in Document Editor

I have been trying to search for this issue from last whole week but unable to find any solution.

I have implemented CKEditor in one of old software but also with content I have to merge header and footer which is dynamic to the print preview of CKEditor.

I tried:

1. I have a button who called editor.execcommand('print') but it only prints content of text editor I can not merge my header and footer to the print

2. The second thing I tried is to redirect to a new page where I will prepare an HTML page with header and footer but I am not getting content correct line spacing and exact line to line words, I am attaching a screenshot here for the reference.

A pdf fro the same has to be generated but the same issue not getting the proper line to line content.

Data is coming from MySQL database I have checked the content that's perfectly fine, I think the issue is with sizes of text editor, HTML page and pdf but don't know how to solve this.

I can not share much code here but if anyone needs it let me know in the comment.

for pdf i am using dompdf.

i am trying to solve this issue from last week, i have serach many questions nothing maches my need so please do not make this as duplicate.

original content:

print view:

pdf view:

How to add this plugin to Angular's ckeditor?

I'm having trouble to finding the right documentation to add the ckeditor4 autocomplete plugin to Angular. How do I add it?

Create proper LICENSE.md file

All the sample plugins should be licensed under the MIT license. Make sure to updated the plugins source code properly.

How can set track change inside sample content box

I want to insert a text with track changes inside the smaple box. but it does not allow me to add content with an ins tag. how can I do that?

Timestamp language options

is possible convert the timestamp.ToString sample to another language, default is English.

Change documentation links to https://ckeditor.com/docs/

All documentation links (API, guides) should be changed from http://docs.ckeditor.com/* to https://ckeditor.com/docs/*.

Duplicated entry in Autotag sample

An entry is duplicated:

https://github.com/ckeditor/ckeditor-docs-samples/blob/a1cee5baa973c01605bc0f28ea7b9e342f24f251/tutorial-autotag/autotag/plugin.js#L66-L67

Simplebox 2 width not posting in CKEditor 4.17.1 to database

Hello,

For some reason my simplebox 2 installation is not posting the width from the Edit Simple Box to the mysql database, but the alignment is being posted to the mysql database. Also, when I add an Edit Simple Box, the css border does not show up like it does on the https://ckeditor.com/docs/ckeditor4/latest/examples/simplebox.html webpage. I do have all the dependency plugins installed: widget, widgetselection and lineutils. The code below is what I have in my config.js file pertaining to Simplebox.

` config.extraPlugins = "youtube,simplebox,widget,lineutils,widgetselection";

// Besides editor's main stylesheet load also simplebox styles.
// In the usual case they can be added to the main stylesheet.
contentsCss: [
	CKEDITOR.basePath + 'contents.css',
	'include/ckeditor_lesson/plugins/simplebox/styles/contents.css'
],`

I have exhausted my search, checks and changes, so any help that can solve my two problems will be greatly appreciated. Thanks.

Document Editor Issues

Hi.

I download and try the sample document editor. Works great out of box but, wishing to use local copy of ckeditor (not CDN).

The docs at http://docs.ckeditor.com/#!/guide/dev_example_setups say based on full package so I download full package and change https://cdn.ckeditor.com/4.6.1/full-all/ckeditor.js to my local copy of ckeditor like:

<script src="ckeditor/ckeditor.js"></script>

My current directory layout is:

ckeditor
index.html
mystyle.css

The editor now loads nonfunctional like:

No errors in dev console (except upload which is expected).

Is this bug? Seems like must be if using the full editor and samples?

Thanks!

Fire file browser from main toolbox

Hello
I would like to ask for a sample, where one can fire file browser directly from main toolbar icon. The code of ckeditor is quite sophisticated. Just can't figure it out.

Thank you and best regards
Wojtek

A4 page height

Is possible to set the page height, and create a new page if is necessary?
So, can I use CKeditor to create document online?

i am not getting how to design third party for ckeditor 4

onOk: { ... this.dialog ... } -> unused vaiable?

I wonder why there is a var this.dialog? It seems to unused... (the tutorial 1 on that plugin uses a different approach in the end, where it is indeed used, but the solution here makes it superfluous, I guess...)

CKEDITOR.dialog.add('abbrDialog', function (editor) {
return {
onOk: function() {

// The context of this function is the dialog object itself.
// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
// ...but it is not needed...?
var dialog = this;
}
}
}

Any explanation would be greatly appreciated!
Thanks!
Robert

Uploadfile-config error

Hi, i tried to use Document Editor, it seems to work, but I get these errors:

[CKEDITOR] Error code: uploadfile-config.
(anonymous) @ ckeditor.js:19
[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-uploadfile-config
(anonymous) @ ckeditor.js:19
[CKEDITOR] Error code: uploadimage-config.
(anonymous) @ ckeditor.js:19
[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-uploadimage-config