Skip to content

Instantly share code, notes, and snippets.

🚀
Hello!

Piotrek Koszuliński Reinmar

🚀
Hello!
Block or report user

Report or block Reinmar

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Reinmar
Reinmar / html-editors.md
Created Jan 28, 2019 — forked from manigandham/html-editors.md
Rich text / HTML editors and frameworks
View html-editors.md

Strictly Frameworks

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

  • ProseMirror - http://prosemirror.net/ - supports collaborative editing, offers similar options to Mobiledoc for data structure
View i18n.md

Process

  1. We code the features using the t() functions in which we define the English value of a string (and, optionally, a context). E.g. t( 'Bold' ) or t( 'Button [context: clothing]' ) (the [context: clothing] will be automatically removed upon build on, in the dev mode, on runtime). Each context must be defined in lang/contexts.json of a package which uses it or in the ckeditor5-core/lang/contexts.json (for common strings).
  2. From time to time, we run a tool which scans code for all t() usages, extract strings from it, builds a contexts map (based on all lang/contexts.json files) and checks whether all used strings have defined contexts. Then builds a PO file with English strings and contexts and upload it to Transifex.
  3. Then we run a tool which downloads all PO files for all defined language and put them back in lang/ directories.
  4. When building an editor, a specific bundler read PO files and create translation map(s) for chosen language(s) based on them and bundles those as d
View gist:f69303b79157f2ca5764
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> npm set progress=false
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> rm -rf ~/.npm && rm -rf node_modules/
(master 041eec8) p@m /www/ckeditor5/ckeditor5-core> time npm install
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN prefer global jsonlint@1.6.2 should be installed with -g
> guppy-pre-commit@0.3.0 postinstall /www/ckeditor5/ckeditor5-core/node_modules/guppy-pre-commit
> guppy pre-commit
guppy: Installed git-hook: /www/ckeditor5/ckeditor5-core/.git/hooks/pre-commit
View to-use-jquery-or-not-to-use.md

Reasons why it doesn't make sense to make jQuery CKEditor's dependency

  1. CKEditor would use very limited part of jQuery - only basic DOM methods, some tools maybe.
  2. CKEditor needs very specific DOM methods. The vast majority of features implemented in CKEDITOR.dom.* are not available in jQuery. Huge range API, walker, iterator, editing-specific DOM traversal methods, etc. (really - >75% of dom.*) - all of that would have to be implemented.
  3. I don't know how jQuery's API can be extended, but I guess that CKEditor's extensions would look ridiculous. Overall effect could not be good.
  4. CKEditor deals with extreme browser bugs (contenteditable FTW!) and very uncommon DOM operations and algorithms, so even existing jQuery's features may not be suitable in some cases. Currently we have full control over methods' implementation, so we may introduce necessary tweaks.
  5. CKEditor rarely works on collections of elements - jQuery API's biggest feature would not be consumed. Moreover - it would be a perfo
View letsCreateAWysiwygMaybe.md

TL;DR I'm a CKEditor core dev, I watched http://vimeo.com/76219173 in which CKEditor was mentioned, I'm sad now.

Disclaimer: I am a CKEditor core developer since January 2012, so I've been working nearly exclusively with contenteditable for almost two years. That made me an expert in some of fields that WYSIWYG editor deals with and gave me a decent knowledge about the rest. Although, my opinion may be biased.

I watched the video from "contenteditable: Roll for sanity" presentation by Garann Means with great interest. The contenteditable feature is a base for all WYSIWYG editors (except those with completely custom rendering system like Google Docs), but is not popular and most web developers have no idea about such thing (what on the other hand does not surprise me). What's more, those who stumble upon it quite often fall into the standard trap:

Hey, we just met and this is crazy, but we've got few hours so let's create a new WYSIWYG editor maybe!

This approach to web devel

@Reinmar
Reinmar / clipboardData.html
Last active Dec 19, 2015
Clipboard data taken from Chrome's (Blink's) implementation of W3C's Clipboard API. Two paragraphs were copied and pasted in the same location...
View clipboardData.html
<p style="color: rgb(51, 51, 51); font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.796875px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">This is some<span class="Apple-converted-space"> </span><strong>sample text</strong>. You are using CKEditor.</p>
<p style="color: rgb(51, 51, 51); font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.796875px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">WTF...</p>
View gist:7eb57d557d252c689de0
This file has been truncated, but you can view the full file.
12006 silly mapToRegistry uri https://registry.npmjs.org/regjsparser
12007 verbose request uri https://registry.npmjs.org/regenerate
12008 verbose request no auth needed
12009 info attempt registry request try #1 at 11:18:29 PM
12010 verbose request using bearer token for auth
12011 verbose etag "5ON53K48516Y2UVNMVYERXQLI"
12012 http request GET https://registry.npmjs.org/regenerate
12013 verbose request uri https://registry.npmjs.org/regjsparser
12014 verbose request no auth needed
View gist:3046695
CKTESTER.editor = { config : { autoParagraph : false } };
CKTESTER.test(
{
test_a : function()
{
var editor = this.editor,
editable = editor.editable();
editable.setHtml( 'abcdef' );
View gist:1452344
// I've just found shit like this:
var sth =
option.type == 't1'
? v1
: option.type == 't2'
? v2
: option.type == 't3'
? v3
: null;
View gist:1339239
(function self(opts) {
var SLIDE_WIDTH = 180;
console.log(opts);
// ble ble ble...
if (arguments.length > 1) {
self.apply(null, [].slice.call(arguments, 1));
}
}(
You can’t perform that action at this time.