Code Monkey home page Code Monkey logo

ckeditor5.github.io's Introduction

Installation steps.

npm i

[OPTIONAL] Assuming you've got ckeditor5 cloned (and working) and want to use packages from it (Webpack is configured to use packages/ and node_modules/):

mkdir packages
ln -s /workspace/ckeditor5/packages packages/\@ckeditor

Finally, build CKEditor for the sample:

npm run build

ckeditor5.github.io's People

Stargazers

Sean P. Myrick V19.1.7.2 avatar zjw57 avatar Kasia Kaczmarek-Gut avatar  avatar Aleksander Nowodzinski avatar Piotrek Koszuliński avatar

Watchers

Piotrek Koszuliński avatar Wiktor Walc avatar Kasia Kaczmarek-Gut avatar Sean P. Myrick V19.1.7.2 avatar

ckeditor5.github.io's Issues

Avoid zoom in Mobile

It would be great if we could avoid zoom when the user taps inside the editor demo on iPhone.

There is a chance that, if we set font size in the editing are to 16px, it'll not zoom. Me may give it a try and see if it works and if it will still look good.

As far as I can see, this worked well for the demo in http://ckeditor.com.

How to integrate the documentation with the home page

This is the home page now: http://ckeditor5.github.io/

And the documentation will be a part of this website. This means that:

  1. You must be able to open docs from the home page and vice versa.
  2. The both pieces should look like one website.
  3. We need to integrate these pieces in terms of the building process.
  4. We'll need a new skin for JSDocs (TODO).

Ad 1

This can also be derived from 2. – those pages should share the same (or similar) heading. Home page must link to docs and docs to the home page.

Ad 2

Not only should those pages share the menu, but also stylistics. @RyszardB proposed this for the home page:

ck_landing

The top menu is quite similar (of course colors are totally different, but the rest should be the same – size, fonts, margins, etc.).

To not complicate this too much for now (because we'll be reworking this in the future anyway), I'd propose that:

  1. On the home page we have 4 links in the menu "Documentation" and the socials "GitHub", "Like Us", "Follow Us" (but I'd consider adding icons there).
  2. On the documentation page we'll have "Home page" + "Samples" + "Guides" + ...

I'd prefer if we had exactly the same buttons in the menu in both cases, but the above should be easier to develop, because we won't need to think about grouping things.

Also, I'd like to have social buttons also in the documentation part of the website, so perhaps this means that we should convert them to icons without text (to squeeze more in one place).

Ad 3

This simply needs to be developed. Building, linking, pushing to this repo and also backuping the previous version under releases/ directory. The whole script should land in this repo.

Ad 4

This requires a separate ticket. We shouls approach this in two steps – first at least add a header to the existing JSDoc theme and later on work on a brand new theme. I'll report respective tickets.

"TM" is messed up in logo

Following #2, the logo got messed up. IMHO it is way too big, but the really important point is that the "TM" mark is not aligned :/

Delayed editor creation on load

Currently, it is pretty noticeable the delay on creating the editor in the website. You can even clearly see the ugly editor contents before it is replaced:

flickering

The logo is too small

I'm not joking – it can be missed, because "Developer Preview" is much bigger.

Besides, I'd consider changing the line "Developer Preview" to "CKEditor 5 v0.1.0 – Developer Preview", although if the logo becomes bigger that may not be necessary any more.

New header design

As the logo (TM) is getting messed up #2, we came to the idea to remove it at all and leave only the plain text headline. There is no final CKEditor 5 logo, so doesn't the TM really fit there before the 5.

Proposal:
ckeditor_5_developer_preview_v0 1 0

The font is too light

The default font (used everywhere in the text, in the editor and in the footer) is so light that it's hard to read. It barely renders on low-dpi screens.

Alpha 1 blog post link 404

First alpha version 🎉🎉🎉
Find out more in the CKEditor 5 v1.0.0 first alpha blog post

links to https://ckeditor5.github.io/TODO which results in 404

can't wait to read it^^

congratulations to the first alpha!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉 👍 👍 🥇

The JS code which inits the editor ignores promises

This is incomplete:

            try {
                ClassicEditor.create( document.querySelector( '#editor' ), {
                    toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
                } );
            } catch( e ) {
                _.showCompatibilityMessage();
            }

The code should also .catch(). The .create() method may only throw directly if Promise is not available (which will be true on IE11), so for safety we can use both – try-catch and promise catching.

BTW. to make some debugging easier (and we'll use this website for that maaany many times), it'd be good to publish the editor instance globally:

ClassicEditor.create( document.getElementById( 'editor' ), {
                toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
} )
.then( editor => {
    window.editor = editor;
} )
.catch( err => {
    console.error( err.stack );
} );

Loading Google font is blocking page rendering

AFAICS, loading Google font is blocking rendering:

screen shot 2016-08-23 at 13 39 55

It's not a critical issue at the current stage, but this is a thing that we must keep in mind.

PS. I've noticed that because Google's CDN was lagging for me and I didn't see anything.

Update webpack.config.js and package.json to support PostCSS

diff --git a/package.json b/package.json
index 18261989..d24ae539 100644
--- a/package.json
+++ b/package.json
@@ -30,16 +30,14 @@
     "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-utils": "^5.0.0",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.22",
+    "@ckeditor/ckeditor5-dev-utils": "^7.0.3",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^3.0.4",
     "babel-minify-webpack-plugin": "^0.2.0",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "node-sass": "^4.5.3",
+    "extract-text-webpack-plugin": "^3.0.2",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.6.0",
+    "postcss-loader": "^2.0.10",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0",
     "webpack-sources": "1.0.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 0a258ef2..c1e24a14 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
+const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;

 const BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
@@ -30,19 +31,24 @@ module.exports = {
                                     use: [ 'raw-loader' ]
                            },
                            {
-                                    test: /\.scss$/,
-                                    use: ExtractTextPlugin.extract( {
-                                             fallback: 'style-loader',
-                                             use: [
-                                                      {
-                                                               loader: 'css-loader',
-                                                               options: {
-                                                                        minimize: true
-                                                               }
-                                                      },
-                                                      'sass-loader'
-                                             ]
-                                    } )
+                                    test: /\.css$/,
+                                    use: [
+                                             {
+                                                      loader: 'style-loader',
+                                                      options: {
+                                                               singleton: true
+                                                      }
+                                             },
+                                             {
+                                                      loader: 'postcss-loader',
+                                                      options: getPostCssConfig( {
+                                                               themeImporter: {
+                                                                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+                                                               },
+                                                               minify: true
+                                                      } )
+                                             },
+                                    ]
                            }
                   ]
          },

Nightly documentation builds

Described here: ckeditor/ckeditor5#460

This ticket is required for:

We should also add the entire docs directory to ignored paths in robots.txt because we don't want to have this documentation crawled. It will be available under a different URL once we go with the final release and it's not worth dealing with some redirects from GH pages.

Prepare sample for iteration 5

The new feature – image. Would be good to have one there, in the content, nicely styled, etc.

Other than that, no big changes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.