CKEditorバージョンとCKFinder設定(ASP.NET環境)

CKEditorバージョンはPHP、ASP.NET、Javaおよびその他のバックエンドの開発言語のページに結果の専門を使用してテキストエディタです。以前はFCKeditorの、「FCK」として知られているCKEditorバージョンは、エディタフェデリコCaldeira Knabbenの頭字語の名前の著者です。2009は、CKが「コンテンツと知識」を意味し、3.0へのアップデートをリリースし、CKEditorバージョンの名前を変更しました。JavaScriptのAPIがあるプラグインのための新しいユーザーインターフェイス、サポート、および視覚障害者の利用のためのサポートを提供します。includeエディタの新バージョンを更新

CKEditorバージョンのデフォルトは、CKFinderプラグをアップロードする必要がする必要がある場合は「アップロード」ではありません。CKFinderアヤックスは、強力なファイルマネージャで使いやすいWebブラウザです。そのシンプルなインターフェイスは、インターネットに初心者からハイレベルの人材へのユーザーのすべての種類を、学ぶために、それは直感的かつ高速になります。

1、ダウンロードパッケージ

①CKEditorバージョン

「ASP.NETのためのCKEditorバージョン3.6.4」、:CKEditorバージョン各バージョンは、次のような多くの種類、持っている 「Java用CKEditorバージョン3.6.4」 および「標準」。CKEditorバージョン技術は関係なく、バックエンドの言語の、などのフロントエンドのJavaScript、CSS、によって完全に開発されたので、これだけ「標準」バージョンをダウンロードしてください。ダウンロード:ダウンロード| CKEditor.com

②CKFinder

CKEditorバージョン「ファイルのアップロードおよび管理の」プラグイン、CKFinder各バージョンはCKFinderは、例えば、ASP.NETのために、紙のバージョンをPHPやJava、ASPとASP.NET 4種類を持っている、あなたが開発に基づいて適切なタイプを選択する必要がありました、ダウンロード:CKFinder -ゲットとして無料試用版

2、インストールと展開

①CKEditorバージョン

ダウンロードが完了解凍、ウェブサイト上の任意のディレクトリ全体を「CKEditorバージョン」された後、次のように、紙は、「/プラグイン/」ディレクトリの下に置かれます。

②CKFinder

あなたはASP.NET CKFinderと解凍、ウェブサイト上の任意のディレクトリ全体「CKFinder」のバージョンをダウンロードしたら、紙のように、「/プラグイン/」ディレクトリの下に置かれます

3、簡単な構成

CKEditorバージョンとCKFinderより多くの設定項目だけでなく、非常に細かいです。この記事では、通常の使用を確保するだけのシンプルな構成です。

①/PlugIns/ckeditor/config.js

CKEditorバージョンのデフォルトの設定の異なるバージョンが同じではありませんが、ここでは私の習慣の構成があります

CKEDITOR.editorConfig = function( config ) {
    config.language = 'zh-cn';  // 中文
    config.tabSpaces = 4;       // 当用户键入TAB时,编辑器走过的空格数,当值为0时,焦点将移出编辑框
    config.toolbar = "Custom_RainMan";    // 工具条配置
    config.toolbar_Custom_RainMan = [
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format','Font','FontSize'],
        ['TextColor','BGColor'],
        ['Maximize', 'ShowBlocks','Templates','Source']
    ];
};

② /PlugIns/ckfinder/config.ascx

A、更改CheckAuthentication()的返回值

CheckAuthentication()返回True表示可以上传,返回False则表示不能上传,具体能否上传需要开发者自己判断,本文仅简单更改为True(允许上传)。

B、更改License和存储目录

如果没有License则不用更改,CKFinder仍然可以正常使用,不过相关页面中有少部分广告。

CKFinder默认的文件存储目录为"/ckfinder/userfiles/”,可以根据项目需求设置不同存储目录

③ 删除“/ckfinder/_samples”和“/ckfinder/_source”两个文件夹

删除“/ckfinder/_samples”和“/ckfinder/_source”两个文件夹,若不删除则会出现“重复的"AssemblyCompany"特性”的错误,如下图:

④ 添加CKFinder引用

将“/PlugIns/ckfinder/bin/Release/CKFinder.dll”添加到项目引用当中

4、示例

创建编辑也比较简单,引入两JS文件,并使用JavaScript实例化即可,具体如下。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Editor</title>
  <script type="text/javascript" src="/PlugIns/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="/PlugIns/ckfinder/ckfinder.js"></script>
</head>
<body>
  <textarea id ="post_content" name="post_content"><p>编辑器内容</p></textarea>
  <script type="text/javascript">
      var editor = CKEDITOR.replace('post_content');          // 创建编辑器
      CKFinder.setupCKEditor(editor, '/PlugIns/ckfinder/');   // 为编辑器绑定"上传控件"
  </script>
</body>
</html>

效果图:

5、其他

转载于:https://www.cnblogs.com/rainman/p/3223242.html

おすすめ

転載: blog.csdn.net/weixin_33937913/article/details/93561332