ng-alain 添加tinymce及tinymce图片上传功能模块

tinymce的使用

tinymce中文文档

默认ng-alain 已经内置了tinymc

1. 查看共享模块是否加载了tinymce

import {NgxTinymceModule} from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule];

2. 在appmodule中注册

import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
   imports: [
        BrowserModule,
        NgxTinymceModule.forRoot({

 baseURL: '/assets/tinymce/',
                                         config: {
                                           height: 500,
                                           menubar: false, // 隐藏工具栏
                                           toolbar_mode: 'wrap', // 工具不出现三个点下拉 sliding 滑动下拉
                                           plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image tools textpattern help emoticons autosave  indent2em autoresize',
                                           toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |  table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen |  indent2em',
                                           language: 'zh_CN',
                                           language_url: '/assets/tinymce/langs/zh_CN.js',
                                           automatic_uploads: false, // 自动上传
                                           paste_data_images: true,
                                           //  statusbar:false,  // 隐藏底部 http://tinymce.ax-z.cn/configure/editor-appearance.php
                                           branding: false, // 隐藏右下角技术支持
                                           browser_spellcheck: true, // 拼写检查
                                           placeholder: '请输入内容',
                                           //      toolbar_location:'bottom', //位置底部
                                           /*初始化文字的方法
                                           init_instance_callback: function(editor) {
                                             editor.setContent('请输入');
                                             console.log(editor.content);
                                           },*/         

            } 
	}),

3. 直接使用

 <tinymce [(ngModel)]="userInfo" ></tinymce>

配置tinymce的汉化及工具，添加图片上传功能

• 加载自定义配置

  <tinymce [(ngModel)]="userInfo" [config]="editorConfig" ></tinymce>

editorConfig = {
    height: 200,
    
    images_upload_url: this.upLoadUrl,
    // images_upload_base_path: 'http://212.64.85.235:8041/',
    // 图片上传功能
    images_upload_handler: (blobInfo, success, failure) => {
      let formData;
      formData = new FormData();
      // console.log(blobInfo);
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      // console.log(formData);
      this.http.post(this.upLoadUrl, formData).subscribe(response => {
        //                        // console.log('图片上传结果'把值存在RESPONSE里)console.log(response);
        if (response) {
          const url = response.data;
          // 把图片链接，img src标签显示图片的有效链接放到下面回调函数里
          console.log(url);
          success(url);
        } else {
          if (response && response.msg) {
            failure(response.msg);
          } else {
            failure('上传失败：未知错误');
          }
        }
      });
    }
  };