リッチテキストエディタCKEditor

ここでは、セットアップ、CKEditorの使用、およびCK Finderを使って画像アップロード機能を実現する.
前に、CKEditorとCK Finderは詳しくて詳しい文書説明があります.全部中に見つけられます.
文書の住所:http://docs.cksource.com/Main_Page
1.ダウンロード
住所:http://ckeditor.com/download
CKEditorは、Baic、Standard、フルバージョンを含み、ダウンロードを選択すればいいです.その後、拡張を追加できます.
2.設定
解凍してサーバーのルートディレクトリの下にインストールして、例えば/www/ckeditor、その後直接ディレクトリの下に訪問することができます/www/ckeditor/samples/index.

その下にいくつかの文書の説明があります.一番上のナビゲーションバーにToolBarをカスタマイズするボタンがあります.
CKEditor文書:http://docs.ckeditor.com/#!/ガイド
ToolBarカスタム画面
選択:TOOLBAR CONFIGURATOR->Advancdは、以下の通りです.

ここで直接に下のコードを修正してToolbarを削除します.
CKeditorのプロファイルはckeditor/config.jsにありますが、なぜ私がこれを修正したのか分かりませんので、直接HTMLに指定しました.

<script>
    var editor = CKEDITOR.replace( 'editor1', {
        width: '100%',//   ，  px   
        height: 350,
        language: 'zh-cn',//  
        extraPlugins: 'justify,panelbutton,colorbutton',//       
        removeDialogTabs : 'image:advanced;image:Link', //              
        toolbar:    //    ToolBar   
        [
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'editing', items: [ 'Scayt' ] },
            { name: 'links', items: [ 'Link', 'Unlink'] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
            { name: 'document', items: [ 'Source' ] },
            { name: 'tools', items: [ 'Maximize' ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
            { name: 'color', items: ['TextColor'] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
            { name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            { name: 'styles', items: [ 'Styles', 'Format' ] }
        ],
        image_previewText: '






                
',//             
    });
    CKFinder.setupCKEditor(editor);//     
script>

上のスクリプトの効果は以下の通りです.

3.配置の詳細
3.1追加の拡張extraPlugins
http://docs.ckeditor.com/#!/ガイド/dev_pluginsここに詳しい説明があります.もし複数の拡張があれば、次のように書きます.

extraPlugins: 'justify,panelbutton,colorbutton'//     ，    

3.2 ToolBar配置
Toolbarの各ボタンの位置は上のように設定されていますが、フォントの色のような機能がない場合は、手動で拡張をインストールして使用できます.
3.3 CKFinderを使って画像またはファイルアップロードを実現する
テキストと画像は分離して保存できます.テキストには写真のURLだけが格納されています.
文書の住所:http://docs.cksource.com/ckfinder3/#!/ガイド/dev_ckeditor
文書の説明はとても詳しくて、一番簡単なやり方は直接にこの文に入れます.

CKFinder.setupCKEditor(editor);//editor CKEDITOR.replace    

もちろんCKEditorを配置することもできます.上のreplace関数はリガの上に下にあります.各urlに対応する役割に注意してください.

filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

4.データの取得と送信
文書の住所:http://docs.ckeditor.com/#!/ガイド/dev_savedata
一言:

var data = CKEDITOR.instances.editor1.getData();

詳細は文書を参照してください
データ(文字列、そして)エンティティを取得すると、POSTを通じてサーバに送信できます.
5.コード
Github:https://github.com/ZJPENG1234/RichTextEditor
転載先:https://www.cnblogs.com/zjpeng1234/p/5954225.html