Add CodePen/JSFiddle integration to samples

[AnnaTomanek]

We have planned to add this feature since the beginning, it would be cool to have it now.

There should be a feature to view/edit the code of a particular sample directly in CodePen/JSFiddle to make the samples more usable and developer-friendly. This option should have a high visibility (our "Get Sample Source Code" does not) and be easily accessible (with one click of a button).

Note that we sometimes have a few editor instances per sample page, each with their own configuration code, so the CodePen/JSFiddle links/buttons/tabs should be placed in a way that would make it clear which sample code is going to be opened.

[f1ames]

I moved my feedback to the proper PR (#180) concerning this issue.

[Tade0]

I went through all of the samples and this is their status:

• http://sdk.ckeditor.com/samples/styles.html - even after correcting the CSS paths the sample doesn't work like it should. After clicking the style combo the user sees a blank box and the style combo gets disabled.
• http://sdk.ckeditor.com/samples/accessibilitychecker.html I added jQuery to the samples, but that didn't solve other problems, namely some paths to images are wrong and (this is a bigger issue) when fetching http://sdk.ckeditor.com/samples/assets/plugins/a11ychecker/libs/quail/tests.json I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource. This is interesting, because all the other files that have the right paths are fetched without problems.

[mlewand]

Well, as for Accessibility Checker it's simply cross origin that is blocking us. If it's only for these two examples we could not include codepen/jsfiddle links for those two and add them later on. Let's get this concluded.

[Tade0]

I couldn't agree more.

Added an appropriate commit to the PR.