被围观了 446 次

CKEditor在线富文本编辑器是目前最流行的且是开源的,而Angular是流行的前端开发框架,整合这二者是非常有意义的。下图就是我的项目效果图:

1、CKEditor功能定制

从官方网站默认安装的ckeditor5-build-classic少了很多功能,比如对齐方式,字体颜色和大小等,为了定制化这些功能,最好是从源代码开始定制。

#同步源代码下来:
cd ~
git clone -b stable git@github.com:ckeditor5-build-classic.git
cd ckeditor5-build-classic/

#安装对齐插件:
npm install --save-dev @ckeditor/ckeditor5-alignment

#安装字体颜色、字体背景色和字体大小插件:
npm install --save-dev @ckeditor/ckeditor5-font

#安装Simple upload adapter图片上传插件(不用默认的CKFinder插件):
npm install --save-dev ckeditor5-simple-upload

#安装编译需要的模块:
npm install

#修改ckeditor.js文件:
vim src/ckeditor.js

#1)、再增加三条导入语句:
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Font from '@ckeditor/ckeditor5-font/src/font';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

#2)、屏蔽下面一行导入语句:
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';

#3)、在ClassicEditor.builtinPlugins = [...]中增加下面三行:
Alignment,
Font,
SimpleUploadAdapter,

#4)、屏蔽ClassicEditor.defaultConfig = {...}中的如下一行:
CKFinderUploadAdapter,

#5)、在ClassicEditor.defaultConfig = {...}中的items: [...]中的'|'后增加下面三行:
'fontcolor',
'fontbackgroundcolor',
'fontsize',

#6)、语言改为'zh',即:
language: 'zh'

#7)、修改文件webpack.config.js,把里面的语言改为'zh':
vim webpack.config.js
#找到 plugins: [下的language,改为:
language: 'zh',

#编译打包(打包后的文件放在build目录下):
nmp run build

#把‘段落’修改为‘正文’:
sed -i 's|段落|正文|g' build/translations/zh-cn.js

 

2、在angular项目中使用

#进入angular的项目根目录,安装ckeditor5:
npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

#把第1步中编译打包的文件拷贝过来:
cp -r ~/ckeditor5-build-classic/build/* node_modules/@ckeditor/ckeditor5-build-classic/build/

#修改src/app/app.module.ts:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

  imports: [
        …
CKEditorModule,
    …
  ],
 

#修改目标组件的相关文件(比如我的组件是myprofile):
#1)、修改src/app/components/myprofile/myprofile.component.ts:
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export class MyprofileComponent implements OnInit {
public ckEditor = ClassicEditor;
public user: any = {profile: '<p>Hello CKEditor</p>'};
public config = {
language: 'zh-cn',
heading: {
options: [
{ model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: '标题1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: '标题2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: '标题3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: '标题4', class: 'ck-heading_heading4' },
]
},
simpleUpload: {
uploadUrl: 'http://www.store.com/uploadImage.php?userID='
}
};

#2)、修改src/app/components/myprofile/myprofile.component.html:

<h3>2、详细介绍:</h3>
<ckeditor [editor]="ckEditor" [config]="config" [(ngModel)]="user.profile"  name="myProfile" ></ckeditor>

/*说明:上面的language: 'zh-cn'设置提示语言为简体中文,另外'zh'为繁体中文,'en'为英语。当点击“插入图片”时CKEditor5会调用simpleUpload.uploadUrl通过XHR方法上传图片文件到服务器。*/

3、后台图片上传php程序

#Simple upload adapter图片上传插件与后台采用XHR协议通讯,后台程序返回:

1)、如果上传成功返回JSON:

{
url:<带路径的图片文件名>
}

2)、如果失败返回:

{
error:{
message:<错误信息>
}
}

 

我的后台程序采用php语言编写,uploadImage.php代码如下:

<?php

header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS, FILES');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

if(isset($_FILES['upload']) && $_FILES['upload']['error'] == 0){
    $tmps = explode('.',$_FILES['upload']['name']);
    $file_ext = strtolower(end($tmps));
    if($_FILES['upload']['size'] > 2097152){
        echo json_encode(array("error"=>array("message"=>"文件大小超过2MB!")));
        return;
    }

    $file_tmp = $_FILES['upload']['tmp_name'];
    $fields = explode(DIRECTORY_SEPARATOR,$file_tmp);
    if(isset($_GET['userID'])){
        $uploadimage = 'assets'. DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . 'users' . DIRECTORY_SEPARATOR.$_GET["userID"] . "_" . end($fields) . '.' . $file_ext;
    }else{
        $uploadimage = 'assets'. DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . 'myshops' . DIRECTORY_SEPARATOR.$_GET["myshipID"] . "_" . end($fields) . '.' .$file_ext;
    }

    if(move_uploaded_file($file_tmp, dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $uploadimage)){
        echo json_encode(array("url"=>$uploadimage));
    } else {
        echo json_encode(array("error"=>array("message"=>"文件移动失败!")));
    }
}

?>

 

 
目前有0条回应
Comment
Trackback
你目前的身份是游客,请输入昵称和电邮!

Verify Code   If you cannot see the CheckCode image,please refresh the page again!