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

tinymce的使用

tinymce中文文档

默认ng-alain 已经内置了tinymc

  1. 查看共享模块是否加载了tinymce
import {NgxTinymceModule} from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule];
  1. 在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);
                                           },*/         

            } 
	}),
  1. 直接使用
 <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('上传失败:未知错误');
          }
        }
      });
    }
  };


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值