angular 中使用TinyMCE

最新推荐文章于 2025-04-28 09:08:58 发布

该用户已成仙

最新推荐文章于 2025-04-28 09:08:58 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/qq_39785489/article/details/81361044

angular 专栏收录该内容

6 篇文章

订阅专栏

1. 安装

npm install --save tinymce

2.在.angular-cli.json中引用

      "scripts": [
         ...
        "../node_modules/tinymce/tinymce.js",
        "../node_modules/tinymce/themes/modern/theme.js",
        "../node_modules/tinymce/plugins/link/plugin.js",
        "../node_modules/tinymce/plugins/paste/plugin.js",
        "../node_modules/tinymce/plugins/table/plugin.js",
        "../node_modules/tinymce/plugins/image/plugin.js",
        "../node_modules/tinymce/plugins/media/plugin.js",
        "../node_modules/tinymce/plugins/textcolor/plugin.js",
        "../node_modules/tinymce/plugins/textpattern/plugin.js",
        "../src/assets/zh_CN.js" //中文包 下载地址：https://www.tinymce.com/download/language-packages/
      ],

3. typing.d.ts中声明tinymce全局变量

declare var tinymce: any;

4. 将 node_modules\tinymce下的skins文件夹复制到 assets 目录下，如没有会报错找不到相关css文件

5.在页面中使用

html：

<textarea id="{{elementId}}"></textarea>

ts：

  content: any = 'p'
  elementId: String = 'editortext';
  editor;
  imgurl: any;


ngAfterViewInit(): void {

      let self = this;
      // 初始化富文本框

        // tinymce.updateContent("<p>aaaaaaa<p>")
        tinymce.init({
            selector: '#' + this.elementId,
            height: 400,
            plugins: ['link', 'table', 'image', 'textcolor', 'textpattern', 'media'],
            toolbar: 'insertfile undo redo | styleselect fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l  media  image  | print preview fullpage',
            fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
            skin_url: 'assets/skins/lightgray',
            media_live_embeds: true,
            // image_dimensions: false,
            relative_urls:false,   //让TinyMCE使用全路径,默认情况下TinyMCE会将主机地址(当链接的地址与当前服务器地址一致的时候)替换掉
            remove_script_host:false, //让TinyMCE使用全路径,默认情况下TinyMCE会将主机地址(当链接的地址与当前服务器地址一致的时候)替换掉
            init_instance_callback : function(editor) {
              setTimeout(function(){
                console.log(self.content);
                if (self.content === undefined) {
                  editor.setContent('');
                } else {
                  editor.setContent(self.content);
                }
              },1000)
            },
            setup: editor => {
                console.log(editor)
                // editor.getContent('<p>aaaaa</p>')
                editor.on('keyup change', () => {

                    const content = editor.getContent();
                    // console.log(editor)
                    console.log(editor.getContent())
                    self.content = editor.getContent()
                    // this.onEditorContentChange.emit(content);
                });
            },
            // 图片上传功能
            images_upload_handler: function(blobInfo, success, failure) {
                var formData;
                formData = new FormData();
                formData.append("file", blobInfo.blob(), blobInfo.filename());
                self.uploadFile(`${environment.host}/admin.php/brand/common/upload`, formData).subscribe( response => {
                  var str = JSON.stringify(response);

                  var selfimgurl = JSON.parse(str)
                    // let url = response.link;
                  success(selfimgurl.link);
                });
            }
        });


  }

    // 上传图片

  private uploadFile(url: string, formData: any) {
      var self = this;
      var headers = new HttpHeaders();
      headers.set("Accept", "application/json");
      return self.http.post(url, formData, { headers: headers });
  }
  ngOnDestroy() {
    tinymce.remove(this.editor);
  }