angular富文本编辑器tinymce-angular

更新日期: 2019-04-07阅读: 2.8k标签: 富文本

一.使用

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

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所有的配置文件都下载下来了,所以我把所有好用的插件都放了上去.加载速度还是很快的.


链接: https://www.fly63.com/article/detial/2723

pell.js_不到200行Js代码如何实现富文本编辑器

前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。

html5中contenteditable属性如果过滤标签,过滤富文本样式

​​在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了。很明显我们不需要复制富文本样式,那么如何过滤这些标签呢?

在Vue2.0中集成UEditor 富文本编辑器

在vue的’项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

Monaco Editor编辑器的使用

vscode是我们经常在用的编辑器,它的前身是微软的一个叫Monaco Workbench的项目,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码都是共用的

quill 定制富文本编辑器

很多时候 <textarea> 并不能满足我们对文本输入的需求,当我们需要为输入的文本添加格式时,我们需要使用像 quill 这样的富文本编辑器来完成富文本的输入。

编写一个非常简单的 JavaScript 编辑器

当然,我们已经有可以使用的很好的Web编辑器:你只需下载,并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如,我为CodeMirror写了一个插件来支持PlantUML。然而,这些编辑器有一个问题:它们难以扩展和难以理解。

web前端常用的富文本编辑器插件

富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!