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:)