npm package: @qlteacher/ng-ueditor
Description: Angular Ueditor Directive
Author: Naono
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @qlteacher/ng-ueditor

**Angular 4+下用的UEditor directive。**

> 除非有特殊的要求，否则不建议使用此类富文本，功能过于冗余，请寻找其它轻量浏览器解决方案进行替换。此外本插件内部重度集成，ueditor中设置了cookie，如想在自建项目中使用，请注意进行修改，关于ueditor的问题请移植[官方](http://ueditor.baidu.com/)进行提问（该项目已经于2016年基本停止维护）

### 使用方法：

复制ueditor至项目相关目录，并在页面上引入./ueditor/dist下的ueditor.all.min.js, ueditor.config.js

```html
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.min.js"></script>
```

项目引用后，在页面上使用ueditor属性对标签进行修饰，并且通过[(content)]进行双向绑定

```typescript
import { UEditorModule } from '@qlteacher/ng-ueditor';

@NgModule({
    imports: [
        UEditorModule
    ]
})

```

### 编辑器工具栏的配置

通过对type进行赋值来进行变更

```html
<textarea ueditor [(content)]="content" type="common"></textarea>
```

common: **默认选项** 

```javascript
common: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'paragraph', 'fontfamily', 'fontsize', '|',
            'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'link', 'unlink', 'insertimage', 'insertvideo', '|',
            'horizontal', 'date', 'time', 'spechars', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
            'print', 'preview', 'searchreplace'
        ]]
```

simple

```javascript
simple: [[
            'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder',
            'strikethrough', 'blockquote', 'pasteplain', '|',
            'forecolor', 'backcolor', 'insertorderedlist',
            'insertunorderedlist', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'paragraph', 'fontfamily', 'fontsize', '|',
            'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow',
            'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells',
            'splittorows', 'splittocols'
        ]]
```

> *如传入了未知的选项将按照common选项执行，如果希望执行ueditor.config.js*中的配置节属性，请传入”config“属性

### z-index

设置zIndex属性，请直接通过**zindex**属性进行赋值，默认为**1040**

> 1.0.1版本中，**zIndex**和**zindex**均可以设置zIndex属性，但仅为了兼容老项目，请使用全部小写的**zindex**进行属性设置

### 开发环境与生产环境需要加载不同的配置节

可以通过**htmlWebpackPlugin.options.metadata.isDevServer**属性在页面上直接判断：

```html
<% if (htmlWebpackPlugin.options.metadata.isDevServer) { %>
<!-- 这里的代码只在开发环境中运行 -->
<style>
    body {
        color: red;
    }
</style>
<% } else { %>
<!-- 这里的代码在非开发环境中运行 -->
<style>
    body {
        color: red;
    }
</style>
<% } %>
```