Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add plugins to config the Code Snippet UI component #241

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add plugins to config the Code Snippet UI component #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52eab4c
Merge pull request #1 from a-ono/master
archonwang Mar 9, 2017
533835a
Added Code Snippet
archonwang Mar 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
190 changes: 190 additions & 0 deletions assets/ckeditor-contrib/plugins/clipboard/dev/clipboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Clipboard playground &ndash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link href="../../../samples/old/sample.css" rel="stylesheet">
<style>
body {
margin: 0;
}

#editables, #console
{
width: 48%;
}
#editable {
padding: 5px 10px;
}

#console {
position: fixed;
top: 10px;
right: 30px;
height: 500px;
border: solid 3px #555;
overflow: auto;
}
#console > p {
border-bottom: solid 1px #555;
margin: 0;
padding: 0 5px;
background: rgba(0, 0, 0, 0.25);
transition: background-color 1s;
}
#console > p.old {
background: rgba(0, 0, 0, 0);
}
#console time, #console .prompt {
padding: 0 5px;
display: inline-block;
}
#console time {
background: #999;
background: rgba(0, 0, 0, 0.5 );
color: #FFF;
margin-left: -5px;
}
#console .prompt {
background: #DDD;
background: rgba(0, 0, 0, 0.1 );
min-width: 200px;
}
.someClass {
color: blue;
}
.specChar {
color: #777;
background-color: #EEE;
background-color: rgba(0, 0, 0, 0.1);
font-size: 0.8em;
border-radius: 2px;
padding: 1px;
}
</style>
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; clipboard plugin playground
</h1>
<div id="editables">
<p>
<label for="editor1">
Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor2">
Editor 2:</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is more &lt;strong class="MsoNormal"&gt;sample text&lt;/strong&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor3">
Editor 3:</label>
<textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This editor &lt;strong&gt;forces pasting in text mode&lt;/strong&gt; by listening for "beforePaste" event.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor4">
Editor 4:</label>
<textarea cols="80" id="editor4" name="editor4" rows="10">&lt;p&gt;This editor &lt;strong&gt;forces pasting in text mode&lt;/strong&gt; by "forcePasteAsPlainText" config option.&lt;/p&gt;</textarea>
</p>
<p>
<label for="editor5">
Editor 5:</label>
<textarea cols="80" id="editor5" name="editor5" rows="10">Editor with autoParagraphing set to off.</textarea>
</p>
<div id="editor6" contenteditable="true" style="font-family: Georgia; font-size: 14px">
<h1>Editor 6</h1>
<p>Content content content.</p>
<p class="someClass">Styled by <code>.someClass</code>.</p>
</div>
</div>
<div id="console">
</div>
<script>
( function()
{
'use strict';

var log = window.__log = function( title, msg ) {
var msgEl = new CKEDITOR.dom.element( 'p' ),
consoleEl = CKEDITOR.document.getById( 'console' ),
time = new Date().toString().match( /\d\d:\d\d:\d\d/ )[ 0 ],
format = function( tpl ) {
return tpl.replace( /{time}/g, time ).replace( '{title}', title ).replace( '{msg}', msg || '' );
};

window.console && console.log && console.log( format( '[{time}] {title}: {msg}' ) );

msg = ( msg || '' ).replace( /\r/g, '{\\r}' ).replace( /\n/g, '{\\n}' ).replace( /\t/g, '{\\t}' );
msg = CKEDITOR.tools.htmlEncode( msg );
msg = msg.replace( /\{(\\\w)\}/g, '<code class="specChar">$1</code>' );

msgEl.setHtml( format( '<time datetime="{time}">{time}</time><span class="prompt">{title}</span> {msg}' ) );
consoleEl.append( msgEl );
consoleEl.$.scrollTop = consoleEl.$.scrollHeight;
setTimeout( function() { msgEl.addClass( 'old' ); }, 250 );
};

var observe = function( editor, num ) {
var p = 'EDITOR ' + num + ' > ';

editor.on( 'paste', function( event ) {
log( p + 'paste(prior:-1)', event.data.type + ' - "' + event.data.dataValue + '"' );
}, null, null, -1 );
editor.on( 'paste', function( event ) {
log( p + 'paste(prior:10)', event.data.type + ' - "' + event.data.dataValue + '"' );
} );
editor.on( 'paste', function( event ) {
log( p + 'paste(prior:999)', event.data.type + ' - "' + event.data.dataValue + '"' );
}, null, null, 999 );
editor.on( 'beforePaste', function( event ) {
log( p + 'beforePaste', event.data.type );
} );
editor.on( 'beforePaste', function( event ) {
log( p + 'beforePaste(prior:999)', event.data.type );
}, null, null, 999 );
editor.on( 'afterPaste', function( event ) {
log( p + 'afterPaste' );
} );
editor.on( 'copy', function( event ) {
log( p + 'copy' );
} );
editor.on( 'cut', function( event ) {
log( p + 'cut' );
} );
};

CKEDITOR.disableAutoInline = true;
var config = {
height: 120,
toolbar: [ [ 'Source' ] ],
allowedContent: true
},
editor1 = CKEDITOR.replace( 'editor1', config ),
editor2 = CKEDITOR.replace( 'editor2', config ),
editor3 = CKEDITOR.replace( 'editor3', config ),
editor4 = CKEDITOR.replace( 'editor4', CKEDITOR.tools.extend( { forcePasteAsPlainText: true }, config ) ),
editor5 = CKEDITOR.replace( 'editor5', CKEDITOR.tools.extend( { autoParagraph: false }, config ) ),
editor6 = CKEDITOR.inline( document.getElementById( 'editor6' ), config );

editor3.on( 'beforePaste', function( evt ) {
evt.data.type = 'text';
} );

observe( editor1, 1 );
observe( editor2, 2 );
observe( editor3, 3 );
observe( editor4, 4 );
observe( editor5, 5 );
observe( editor6, 6 );

})();
</script>
</body>
</html>
49 changes: 49 additions & 0 deletions assets/ckeditor-contrib/plugins/clipboard/dev/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/

/* global CKCONSOLE */

'use strict';

( function() {
var pasteType, pasteValue;

CKCONSOLE.add( 'paste', {
panels: [
{
type: 'box',
content:
'<ul class="ckconsole_list">' +
'<li>type: <span class="ckconsole_value" data-value="type"></span></li>' +
'<li>value: <span class="ckconsole_value" data-value="value"></span></li>' +
'</ul>',

refresh: function() {
return {
header: 'Paste',
type: pasteType,
value: pasteValue
};
},

refreshOn: function( editor, refresh ) {
editor.on( 'paste', function( evt ) {
pasteType = evt.data.type;
pasteValue = CKEDITOR.tools.htmlEncode( evt.data.dataValue );
refresh();
} );
}
},
{
type: 'log',
on: function( editor, log, logFn ) {
editor.on( 'paste', function( evt ) {
logFn( 'paste; type:' + evt.data.type )();
} );
}
}
]
} );
} )();
Loading