Hej, nie radzę sobie z właściwym podpięciem tych pluginów, a obecny kod bez nich jednak nie spełnia mojego celu, aby zapisywany tekst na stronie zmieniał treść części pliku html. I na odwrót, oczywiście.
Pomocy:)
index.php
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>cke ed</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<?php
$text = "Strona do edycji";
if((isset($_POST['editor']))&&(!empty($_POST['editor']))){
$text = $_POST['editor'];
}
?>
<form action="" method="post">
<textarea class="ckeditor" name="editor"><?="$text"?></textarea>
<input type="submit" name="zapisz" value="Zapisz">
</form>
<article>
<?="$text"?>
</article>
</body>
</html>
config.js z folderu ckeditor
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins = 'sourcearea';
};
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'sourcedialog';
};
plugin.js z folderu sourcearea
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/**
* @fileOverview The Source Editing Area plugin. It registers the "source" editing
* mode, which displays raw HTML data being edited in the editor.
*/
( function() {
CKEDITOR.plugins.add( 'sourcearea', {
// jscs:disable maximumLineLength
lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
// jscs:enable maximumLineLength
icons: 'source,source-rtl', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
init: function( editor ) {
// Source mode in inline editors is only available through the "sourcedialog" plugin.
if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
return;
var sourcearea = CKEDITOR.plugins.sourcearea;
editor.addMode( 'source', function( callback ) {
var contentsSpace = editor.ui.space( 'contents' ),
textarea = contentsSpace.getDocument().createElement( 'textarea' );
textarea.setStyles(
CKEDITOR.tools.extend( {
// IE7 has overflow the <textarea> from wrapping table cell.
width: CKEDITOR.env.ie7Compat ? '99%' : '100%',
height: '100%',
resize: 'none',
outline: 'none',
'text-align': 'left'
},
CKEDITOR.tools.cssVendorPrefix( 'tab-size', editor.config.sourceAreaTabSize || 4 ) ) );
// Make sure that source code is always displayed LTR,
// regardless of editor language (#10105).
textarea.setAttribute( 'dir', 'ltr' );
textarea.addClass( 'cke_source' ).addClass( 'cke_reset' ).addClass( 'cke_enable_context_menu' );
editor.ui.space( 'contents' ).append( textarea );
var editable = editor.editable( new sourceEditable( editor, textarea ) );
// Fill the textarea with the current editor data.
editable.setData( editor.getData( 1 ) );
// Having to make <textarea> fixed sized to conquer the following bugs:
// 1. The textarea height/width='100%' doesn't constraint to the 'td' in IE6/7.
// 2. Unexpected vertical-scrolling behavior happens whenever focus is moving out of editor
// if text content within it has overflowed. (#4762)
if ( CKEDITOR.env.ie ) {
editable.attachListener( editor, 'resize', onResize, editable );
editable.attachListener( CKEDITOR.document.getWindow(), 'resize', onResize, editable );
CKEDITOR.tools.setTimeout( onResize, 0, editable );
}
editor.fire( 'ariaWidget', this );
callback();
} );
editor.addCommand( 'source', sourcearea.commands.source );
if ( editor.ui.addButton ) {
editor.ui.addButton( 'Source', {
label: editor.lang.sourcearea.toolbar,
command: 'source',
toolbar: 'mode,10'
} );
}
editor.on( 'mode', function() {
editor.getCommand( 'source' ).setState( editor.mode == 'source' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
} );
var needsFocusHack = CKEDITOR.env.ie && CKEDITOR.env.version == 9;
function onResize() {
// We have to do something with focus on IE9, because if sourcearea had focus
// before being resized, the caret ends somewhere in the editor UI (#11839).
var wasActive = needsFocusHack && this.equals( CKEDITOR.document.getActive() );
// Holder rectange size is stretched by textarea,
// so hide it just for a moment.
this.hide();
this.setStyle( 'height', this.getParent().$.clientHeight + 'px' );
this.setStyle( 'width', this.getParent().$.clientWidth + 'px' );
// When we have proper holder size, show textarea again.
this.show();
if ( wasActive )
this.focus();
}
}
} );
var sourceEditable = CKEDITOR.tools.createClass( {
base: CKEDITOR.editable,
proto: {
setData: function( data ) {
this.setValue( data );
this.status = 'ready';
this.editor.fire( 'dataReady' );
},
getData: function() {
return this.getValue();
},
// Insertions are not supported in source editable.
insertHtml: function() {},
insertElement: function() {},
insertText: function() {},
// Read-only support for textarea.
setReadOnly: function( isReadOnly ) {
this[ ( isReadOnly ? 'set' : 'remove' ) + 'Attribute' ]( 'readOnly', 'readonly' );
},
detach: function() {
sourceEditable.baseProto.detach.call( this );
this.clearCustomData();
this.remove();
}
}
} );
} )();
CKEDITOR.plugins.sourcearea = {
commands: {
source: {
modes: { wysiwyg: 1, source: 1 },
editorFocus: false,
readOnly: 1,
exec: function( editor ) {
if ( editor.mode == 'wysiwyg' )
editor.fire( 'saveSnapshot' );
editor.getCommand( 'source' ).setState( CKEDITOR.TRISTATE_DISABLED );
editor.setMode( editor.mode == 'source' ? 'wysiwyg' : 'source' );
},
canUndo: false
}
}
};
/**
* Controls the `tab-size` CSS property of the source editing area. Use it to set the width
* of the tab character in the source view. Enter an integer to denote the number of spaces
* that the tab will contain.
*
* **Note:** Works only with {@link #dataIndentationChars}
* set to `'\t'`. Please consider that not all browsers support the `tab-size` CSS
* property yet.
*
* // Set tab-size to 10 characters.
* config.sourceAreaTabSize = 10;
*
* @cfg {Number} [sourceAreaTabSize=4]
* @member CKEDITOR.config
* @see CKEDITOR.config#dataIndentationChars
*/
editor.ui.addButton( 'sourcearea', {
label: 'Insert sourcearea',
command: 'insertsourcearea',
toolbar: 'insert'
});
}
});
plugn.js z folderu sourcedialog
/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.add( 'sourcedialog', {
// jscs:disable maximumLineLength
lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
// jscs:enable maximumLineLength
icons: 'sourcedialog,sourcedialog-rtl', // %REMOVE_LINE_CORE%
hidpi: true, // %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'
} );
}
}
} );
Wiem że hardkorowe, za poratowanie prześlę hajsik na browarka:)
