Skip to content
Permalink
Browse files

Merge branch 't/9713' into major

  • Loading branch information...
oleq committed Feb 19, 2013
2 parents a998cba + 30b5e41 commit 7754ef704703650c24d4cbb3ff12fd2edd4a1bf2
@@ -4,6 +4,7 @@ CKEditor 4 Changelog
## CKEditor 4.1

* [#9907](http://dev.ckeditor.com/ticket/9907): Added contentPreview event for preview data manipulation.
* [#9713](http://dev.ckeditor.com/ticket/9713): Introduced `sourcedialog` plugin that brings raw HTML editing for inline editor instances.

## CKEditor 4.0.2

@@ -560,7 +560,11 @@ CKEDITOR.tools.extend( CKEDITOR.dom.node.prototype, {
if ( $.nodeName && ( name = $.nodeName.toLowerCase(), ( typeof reference == 'string' ? name == reference : name in reference ) ) )
return new CKEDITOR.dom.node( $ );

$ = $.parentNode;
try {
$ = $.parentNode;
} catch( e ) {
$ = null;
}
}
return null;
},
@@ -1288,7 +1288,7 @@
if ( restore ) {
// Saved selection may be outdated (e.g. anchored in offline nodes).
// Avoid getting broken by such.
var common = selectedElement || ranges[ 0 ].getCommonAncestor();
var common = selectedElement || ranges[ 0 ] && ranges[ 0 ].getCommonAncestor();
if ( !( common && common.getAscendant( 'body', 1 ) ) )
return;

@@ -279,13 +279,15 @@ CKEDITOR.plugins.add( 'dialogui', {
attributes.rows = elementDefinition.rows || 5;
attributes.cols = elementDefinition.cols || 20;

attributes[ 'class' ] = 'cke_dialog_ui_input_textarea ' + ( elementDefinition[ 'class' ] || '' );

if ( typeof elementDefinition.inputStyle != 'undefined' )
attributes.style = elementDefinition.inputStyle;

var innerHTML = function() {
attributes[ 'aria-labelledby' ] = this._.labelId;
this._.required && ( attributes[ 'aria-required' ] = this._.required );
var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea id="', domId, '" ' ];
for ( var i in attributes )
html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[ i ] ) + '" ' );
html.push( '>', CKEDITOR.tools.htmlEncode( me._[ 'default' ] ), '</textarea></div>' );
@@ -0,0 +1,76 @@
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.dialog.add( 'sourcedialog', function( editor ) {
var size = CKEDITOR.document.getWindow().getViewPaneSize();

// Make it maximum 800px wide, but still fully visible in the viewport.
var width = Math.min( size.width - 70, 800);

// Make it use 2/3 of the viewport height.
var height = size.height / 1.5;

// Store old editor data to avoid unnecessary setData.
var oldData;

return {
title: editor.lang.sourcedialog.title,
minWidth: 100,
minHeight: 100,

onShow: function() {
this.setValueOf( 'main', 'data', oldData = editor.getData() );
},

onOk: (function() {
function setData( newData ) {
var that = this;

editor.setData( newData, function() {
that.hide();

// Ensure correct selection.
var range = editor.createRange();
range.moveToElementEditStart( editor.editable() );
range.select();
} );
}

return function( event ) {
// Remove CR from input data for reliable comparison with editor data.
var newData = this.getValueOf( 'main', 'data' ).replace( /\r/g, '' );

// Avoid unnecessary setData. Also preserve selection
// when user changed his mind and goes back to wysiwyg editing.
if ( newData === oldData )
return true;

// Set data asynchronously to avoid errors in IE.
CKEDITOR.env.ie ?
CKEDITOR.tools.setTimeout( setData, 0, this, newData )
:
setData.call( this, newData );

// Don't let the dialog close before setData is over.
return false;
};
})(),

contents: [{
id: 'main',
label: editor.lang.sourcedialog.title,
elements: [{
type: 'textarea',
type: 'textarea',
id: 'data',
inputStyle: 'cursor:auto;' +
'width:' + width + 'px;' +
'height:' + height + 'px;' +
'tab-size:4;',
'class': 'cke_source'
}]
}]
};
});
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,9 @@
/*
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.plugins.setLang( 'sourcedialog', 'en', {
toolbar: 'Source',
title: 'Source'
});
@@ -0,0 +1,26 @@
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.plugins.add( 'sourcedialog', {
lang: 'en', // %REMOVE_LINE_CORE%
icons: 'sourcedialog,sourcedialog-rtl', // %REMOVE_LINE_CORE%

init: function( editor ) {
// Register the "source" command, which simply opens the "source" dialog.
editor.addCommand( 'sourcedialog', new CKEDITOR.dialogCommand( 'sourcedialog' ) );

// Register the "source" dialog.
CKEDITOR.dialog.add( 'sourcedialog', this.path + 'dialogs/sourcedialog.js' );

// If the toolbar is available, create the "Source" button.
if ( editor.ui.addButton ) {
editor.ui.addButton( 'Sourcedialog', {
label: editor.lang.sourcedialog.toolbar,
command: 'sourcedialog',
toolbar: 'mode,10'
});
}
}
});
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html>
<head>
<title>Raw HTML editing with dialog-based source editor &mdash; CKEditor Sample</title>
<meta charset="utf-8">
<script src="../../../ckeditor.js"></script>
<link rel="stylesheet" href="../../../samples/sample.css">
<meta name="ckeditor-sample-name" content="Raw HTML editing with dialog-based source editor">
<meta name="ckeditor-sample-group" content="Plugins">
<meta name="ckeditor-sample-description" content="Editing HTML content of both inline and framed editor instances.">
<meta name="ckeditor-sample-isnew" content="1">
<style>
#editable
{
padding: 10px;
float: left;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Raw HTML editing with dialog-based source editor
</h1>
<div class="description">
<p>
<strong>Sourcedialog</strong> plugin provides an easy way to edit raw HTML content
of an editor, similarly to what is possible with <strong>Sourcearea</strong>
plugin for framed instances but using dialogs. Thanks to that, it's also possible
to manipulate raw content of inline editor instances.
</p>
<p>
This plugin extends the toolbar with a button,
which opens a dialog window with a source code editor. It works with both framed
and inline instances. To enable this
plugin, basically add <code>extraPlugins: 'sourcedialog'</code> to editor's
config:
</p>
<pre class="samples">
// Inline editor.
CKEDITOR.inline( 'editable', {
<strong>extraPlugins: 'sourcedialog'</strong>
});

// Framed editor.
CKEDITOR.replace( 'textarea_id', {
<strong>extraPlugins: 'sourcedialog'</strong>,
removePlugins: 'sourcearea'
});
</pre>
<p>
Note that you may want to include <code>removePlugins: 'sourcearea'</code>
in your config when using <strong>Sourcedialog</strong> in framed instances.
This prevents feature redundancy.
</p>
<p>
Note that <code>editable</code> in the code above is the <code>id</code>
attribute of the <code>&lt;div&gt;</code> element to be converted into an inline instance.
</p>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
</p>
</div>
<div>
<label for="editor1">
Inline editor:
</label>
<div id="editor1" contenteditable="true" style="padding: 5px 20px;">
<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</div>
</div>
<br>
<div>
<label for="editor2">
Framed editor:
</label>
<textarea cols="80" id="editor2" name="editor2" rows="10">
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;.
</textarea>
</div>
<script>
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var config = {
toolbarGroups: [
{ name: 'mode' },
{ name: 'basicstyles' },
{ name: 'links' }
],
extraPlugins: 'sourcedialog',
removePlugins: 'sourcearea'
}
CKEDITOR.inline( 'editor1', config );
CKEDITOR.replace( 'editor2', config );
</script>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a>
- Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
@@ -139,6 +139,9 @@ <h2 class="samples">

<dt><a class="samples" href="../plugins/htmlwriter/samples/outputforflash.html">Output for Flash</a></dt>
<dd>Configuring CKEditor to produce HTML code that can be used with Adobe Flash.</dd>

<dt><a class="samples" href="../plugins/sourcedialog/samples/sourcedialog.html">Raw HTML editing with dialog-based source editor</a> <span class="new">New!</span></dt>
<dd>Editing HTML content of both inline and framed editor instances.</dd>
<!-- %REMOVE_END% -->

<!-- ADVANCED_SAMPLES -->
@@ -4,7 +4,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
*/

/* "Source" button label */
.cke_button__source_label
.cke_button__source_label,
.cke_button__sourcedialog_label
{
display: inline;
}
@@ -4,7 +4,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
*/

/* "Source" button label */
.cke_button__source_label
.cke_button__source_label,
.cke_button__sourcedialog_label
{
display: inline;
}

0 comments on commit 7754ef7

Please sign in to comment.
You can’t perform that action at this time.