美文网首页
2019-09-26/CKEditor5和Angular的结合

2019-09-26/CKEditor5和Angular的结合

作者: 呼噜噜睡 | 来源:发表于2019-09-26 17:14 被阅读0次

    今天呢,我们来讨论一下ckeditor5和angular8的结合,前端我也是渣渣,依葫芦画瓢。当初为什么喜欢Angular呢,一方面是使用过angularJs,尽管angular2和angularJs一点也不像,但是情怀啊,忍不住想要探索。另一个就是Angular的风格很像java,跟那个spring的套路有相似的地方。废话也是够多了,现在我们切入主题。
    首先就是搭建环境了,nodejs下载安装一下,什么环境变量,好好配置一下,要不然总会出现ng不是内部或者外部命令。path的环境变量大体有这么几个:

    d:\Program Files\nodejs  nodejs的安装目录
    C:\Program Files\nodejs\node_global  node的目录之子目录
    C:\Program Files\nodejs\node_modules  node的目录之子目录
    

    然后安装Angular cli:

    npm install -g @angular/cli
    

    等待一下时间,angular cli安装完成,cmd中键入ng --version


    ccc.PNG

    说明Angular cli安装好了。
    接下来创建项目,cmd进入某一目录,执行 ng new 项目名。然后就会在这个目录创建项目,遇到不懂得就点击yes。过一会,项目就创建好了。
    然后我们安装其余的依赖
    cmd进入项目:
    依次执行:

    npm install --save @ckeditor/ckeditor5-angular
    npm install --save @ckeditor/ckeditor5-build-classic
    

    依赖至此安装完毕,现在我们来写代码吧。
    使用idea导入项目,找到app.module.ts,引入CKEditorModule :

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { AppRoutingModule } from './app-routing.module';
    import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
    
    import { AppComponent } from './app.component';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        CKEditorModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    我们在AppComponent做演示:

    import {Component, OnInit} from '@angular/core';
    import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
    import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      /**
       * 全局Editor
       */
      public Editor = ClassicEditor;
      /**
       * 配置 20190926 暂时alignment没有效果  ckfinder有问题  ckfinder: {uploadUrl: 'xxx'}这个还没有试验
       */
      public config = {
        alignment: {
          options: [ 'left', 'center', 'right' ]
        },
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'alignment',
          'bulletedList', 'numberedList', 'blockQuote', 'undo',
          'ckfinder', 'imageTextAlternative', 'imageUpload', 'imageStyle:full', 'imageStyle:side'
        ],
        language: 'zh-cn',
        fontFamily: {
          options: [
            'default',
            'Arial, Helvetica, sans-serif',
            'Courier New, Courier, monospace',
            'Georgia, serif',
            'Lucida Sans Unicode, Lucida Grande, sans-serif',
            'Tahoma, Geneva, sans-serif',
            'Times New Roman, Times, serif',
            'Trebuchet MS, Helvetica, sans-serif',
            'Verdana, Geneva, sans-serif',
          ]},
        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' },
          ]
        },
        ckfinder: {
          uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
        }
      };
      /**
       * 内容
       */
      public model = {
        editorData: '<p>Hello, world!哈哈</p>'
      };
      ngOnInit(): void {
      }
      public saveData(): void {
        console.log(this.model.editorData);
      }
    }
    
    

    对应的html:

    <ckeditor
      [editor]="Editor"
      [(ngModel)]="model.editorData"
      [config]="config"
    ></ckeditor>
    <button type="button" (click)="saveData()">保存</button>
    

    页面效果:


    1111111.PNG

    完毕。

    相关文章

      网友评论

          本文标题:2019-09-26/CKEditor5和Angular的结合

          本文链接:https://www.haomeiwen.com/subject/nulnuctx.html