angular富文本编辑器tinymce-angular

一.使用

快速使用富文本,上手很迅速.

tinymce-angular把tinymce分装成angular的一个组件,安装引入后,添加一个editor标签就能使用,以下

1.1 安装与引入

npm install @tinymce/tinymce-angular

在你对应的module里面引用

import { EditorModule } from '@tinymce/tinymce-angular'; 
@NgModule({   
declarations: [AppComponent   ],   
imports: [
    BrowserModule,
    EditorModule // <- Important part  
     ],  
providers: [],   
bootstrap: [AppComponent] 
     })

1.2 使用

@Component({
  selector: 'app-edit',
  template: `<editor apiKey=ptnnw15px4ils3sllw1sv54m6kl6flak2mdocfj72k0jv9w2 
[init]=editParam></editor>
`,
  styleUrls: ['./edit.component.scss']
})
export class EditComponent implements {
  editParam = {
    selector: 'textarea',
   // plugins是tinymce的各类插件
    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample',
   // 语言包可使用tinymce提供的网址,可是墙的缘由,会连不上,因此仍是自行下载,放到assets里面
    language_url: '../../../assets/tinymce/langs/zh_CN.js',  
    language: 'zh_CN',
    // toolbar定义快捷栏的操做, | 用来分隔显示
    toolbar: 'codesample | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft'
      + ' aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo '
      + '| link unlink image code | removeformat | h2 h3 h4',
    height: 400,
    // 这里是代码块的一些语言选择,好像暂时还没支持typescript,因此博文都是js格式
    codesample_languages: [
      { text: 'HTML/XML', value: 'markup' },
      { text: 'JavaScript', value: 'javascript' },
      { text: 'CSS', value: 'css' },
      { text: 'Java', value: 'java' }
    ]
  };
}

angular富文本编辑器angular-tinymce的使用就在此了

二.展现页面

在tinymce中编辑的内容展现出来也很方便,这里用使用ngModel就能绑定内容了

<editor [init]=editParam [(ngModel)]="editData.content"></editor>
 <div [innerHTML]="editData.content"></div>

由于angular的安全策略,会把innerHTML里面的样式过滤掉,这时候就须要信任下content

三.本地配置tinymce

第一步是使用了tinymce云服务来建立编辑器,不少插件,样式等,都是依赖tinymce上的各类文件,由于云在国外,编辑器加载出来很慢.因此须要把云上的文件配置到本地来

首先,下载tinymce

npm install tinymce

而后在angular.json文件中作下配置引入相应文件

"assets": [ 
"src/favicon.ico",
"src/assets",    
//  新增tinymce中的皮肤和插件文件夹,这种写法参考copy-webpack-plugin
//  ng-cli的底层就是webpack
// 这三个分别的皮肤,插件,主题等引用文件夹,初始化的时候能够去控制台看看
{ "glob": "**/*", "input": "./node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "./node_modules/tinymce/plugins", "output": "/plugins/" },
{ "glob": "**/*", "input": "./node_modules/tinymce/themes", "output": "/themes/" }

 ],
 "styles": [
"src/styles.scss",
// prism的样式文件,先忽略
"src/assets/styles/prism.css"
],
"scripts": [
// tinymce基础文件,用来初始化编辑器
"node_modules/tinymce/tinymce.min.js",
// tinymce的codesample的语法高亮用的是prism,代码块回显须要用到,也能用别的高亮插件,此处先忽略
"src/assets/js/prism.js"
 ]

配置完成,就能够本地初始化tinymce的插件了,aot打包试试,看看打包是否有问题.

四. 图片上传插件和自定义上传方法

要能上传上传图片固然先得须要一个上传图片的接口.

tinymce有个默认的上传方法,咱们只须要设置下参数   images_upload_url: uploadUrl 便可.固然默认须要你接口返回的图片地址参数为{location:xxxx}.

固然还有自定义上传的办法,images_upload_handler方法:

editParam = {
    selector: 'textarea',
    mobile: {
      theme: 'silver',
      plugins: [ 'autosave', 'lists', 'autolink' ]
    },
    plugins: `link lists image code table colorpicker fullscreen fullpage help
    textcolor wordcount contextmenu codesample importcss media preview print
    textpattern tabfocus hr directionality imagetools autosave paste`,
    language_url: '../../../assets/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    toolbar: 'codesample | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft'
      + ' aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo '
      + '| link unlink image code | removeformat | h2 h4 | fullscreen preview paste',
    height: 700,
    codesample_languages: [
      { text: 'JavaScript', value: 'javascript' },
      { text: 'HTML/XML', value: 'markup' },
      { text: 'CSS', value: 'css' },
      // { text: 'TypeScript', value: 'typescript' },
      { text: 'Java', value: 'java' }
    ],
    image_caption: true,
    // paset 插件容许粘贴图片
    paste_data_images: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    // 这个即是自定义上传图片方法
    images_upload_handler: function (blobInfo, success, failure) {
      let xhr, formData;
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', '/api/upload');
      xhr.onload = function() {
        let json;
        if (xhr.status !== 200) {
          failure('HTTP Error: ' + xhr.status);
          return;
        }
        json = JSON.parse(xhr.responseText);
        if (!json || typeof json.location !== 'string') {
          failure('Invalid JSON: ' + xhr.responseText);
          return;
        }
        success(json.location);
      };
      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      xhr.send(formData);
    }

  };

这里init的配置多了很多,由于已经把tinymce全部的配置文件都下载下来了,因此我把全部好用的插件都放了上去.加载速度仍是很快的.