Skip to content
This repository has been archived by the owner on Nov 2, 2023. It is now read-only.

Commit

Permalink
build: Support Angular5, releases: 1.0.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@cipchk
cipchk committed Nov 2, 2017
1 parent 4058749 commit 8ecf26e
Show file tree
Hide file tree
Showing 21 changed files with 2,354 additions and 1,887 deletions.
6 changes: 4 additions & 2 deletions .angular-cli.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
"polyfills": "polyfills.ts",
"test": "../../scripts/test.ts",
"tsconfig": "tsconfig.json",
"testTsconfig": "../../src/tsconfig.spec.json",
"prefix": "",
"serviceWorker": false,
"styles": [
],
"scripts": [],
Expand All @@ -28,12 +30,12 @@
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
"config": "protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
"config": "karma.conf.js"
}
},
"defaults": {
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# 1.0.9

+ Support Angular5.

# 1.0.8

+ fix: 由于随机ID可能引起重复问题。close #12
Expand Down
28 changes: 14 additions & 14 deletions demo/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<nav class="navbar navbar-toggleable-md navbar-light bg-faded mb-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" routerLink="/">ngx-ueditor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ngx-ueditor</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dev">二次开发</a>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dev">二次开发</a>
</li>
</ul>
</div>
</nav>
<p class="mb-3">Angular2 百度UEditor组件，有关更多细节见<a href="https://github.com/cipchk/ngx-ueditor/blob/master/README.md" target="_blank">README.md</a></p>
<p class="mt-3 mb-3">Angular2 百度UEditor组件，有关更多细节见<a href="https://github.com/cipchk/ngx-ueditor/blob/master/README.md" target="_blank">README.md</a></p>
<router-outlet></router-outlet>
`,
encapsulation: ViewEncapsulation.None
Expand Down
160 changes: 80 additions & 80 deletions demo/src/app/components/demo.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,80 @@
<div class="card mb-3">
<div class="card-header">完整示例</div>
<div class="card-block">
<textarea highlight-js>&lt;ueditor [(ngModel)]="full_source" #full></ueditor></textarea>
<ueditor [(ngModel)]="full_source" #full></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-block">
<blockquote class="card-blockquote" [innerHTML]="full_source"></blockquote>
</div>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">语言切换</h5>
<div class="mb-3">
<button type="button" (click)="setLanguage('zh-cn')" class="btn btn-primary btn-sm">zh-cn</button>
<button type="button" (click)="setLanguage('en')" class="btn btn-primary btn-sm">en</button>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">常用API</h5>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="getAllHtml()">获得整个html的内容</button>
<button class="btn btn-primary btn-sm" (click)="getContent()">获得内容</button>
<button class="btn btn-primary btn-sm" (click)="setContent(false)">写入内容</button>
<button class="btn btn-primary btn-sm" (click)="setContent(true)">追加内容</button>
<button class="btn btn-primary btn-sm" (click)="getContentTxt()">获得纯文本</button>
<button class="btn btn-primary btn-sm" (click)="getPlainTxt()">获得带格式的纯文本</button>
<button class="btn btn-primary btn-sm" (click)="hasContent()">判断是否有内容</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.focus()">使编辑器获得焦点</button>
</div>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="getText()">获得当前选中的文本</button>
<button class="btn btn-primary btn-sm" (click)="insertHtml()">插入给定的内容</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setEnabled()">可以编辑</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setDisabled('fullscreen')">不可编辑</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setHide()">隐藏编辑器</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setShow()">显示编辑器</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setHeight(300)">设置编辑器的高度为300</button>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">事件监听</h5>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="addListenerFocus()">监听focus事件</button>
<button class="btn btn-primary btn-sm" (click)="removeListenerFocus()">移除focus事件</button>
focus: {{focus}}
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">配置项</div>
<div class="card-block">
<div class="row">
<div class="col-sm-6">
<textarea highlight-js>
// config
{
toolbars: [['FullScreen', 'Source', 'Undo', 'Redo', 'Bold' ]],
autoClearinitialContent: true,
wordCount: false
}
</textarea>
</div>
<div class="col-sm-6">
<ueditor [(ngModel)]="config_source" [config]="config"></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-block">
<blockquote class="card-blockquote" [innerHTML]="config_source"></blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<form #mForm="ngForm">
<div class="card mb-3">
<div class="card-header">表单非空校验</div>
<div class="card-block">
<textarea highlight-js>&lt;ueditor [(ngModel)]="full_source" #full required></ueditor></textarea>
<ueditor [(ngModel)]="form_source" required name="form_source"></ueditor>
<div class="text-right mt-3">
<button class="btn btn-primary btn-block" [disabled]="!mForm.form.valid || !mForm.form.dirty" type="submit">保存</button>
</div>
</div>
</div>
</form>
<div class="card mb-3">
<div class="card-header">完整示例</div>
<div class="card-body">
<textarea highlight-js>&lt;ueditor [(ngModel)]="full_source" #full></ueditor></textarea>
<ueditor [(ngModel)]="full_source" #full></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-body">
<blockquote class="card-bodyquote" [innerHTML]="full_source"></blockquote>
</div>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">语言切换</h5>
<div class="mb-3">
<button type="button" (click)="setLanguage('zh-cn')" class="btn btn-primary btn-sm">zh-cn</button>
<button type="button" (click)="setLanguage('en')" class="btn btn-primary btn-sm">en</button>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">常用API</h5>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="getAllHtml()">获得整个html的内容</button>
<button class="btn btn-primary btn-sm" (click)="getContent()">获得内容</button>
<button class="btn btn-primary btn-sm" (click)="setContent(false)">写入内容</button>
<button class="btn btn-primary btn-sm" (click)="setContent(true)">追加内容</button>
<button class="btn btn-primary btn-sm" (click)="getContentTxt()">获得纯文本</button>
<button class="btn btn-primary btn-sm" (click)="getPlainTxt()">获得带格式的纯文本</button>
<button class="btn btn-primary btn-sm" (click)="hasContent()">判断是否有内容</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.focus()">使编辑器获得焦点</button>
</div>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="getText()">获得当前选中的文本</button>
<button class="btn btn-primary btn-sm" (click)="insertHtml()">插入给定的内容</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setEnabled()">可以编辑</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setDisabled('fullscreen')">不可编辑</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setHide()">隐藏编辑器</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setShow()">显示编辑器</button>
<button class="btn btn-primary btn-sm" (click)="full.Instance.setHeight(300)">设置编辑器的高度为300</button>
</div>
<h5 style="border-bottom:1px solid #eee;" class="mt-3 mb-3 pb-3">事件监听</h5>
<div class="mb-3">
<button class="btn btn-primary btn-sm" (click)="addListenerFocus()">监听focus事件</button>
<button class="btn btn-primary btn-sm" (click)="removeListenerFocus()">移除focus事件</button>
focus: {{focus}}
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">配置项</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<textarea highlight-js>
// config
{
toolbars: [['FullScreen', 'Source', 'Undo', 'Redo', 'Bold' ]],
autoClearinitialContent: true,
wordCount: false
}
</textarea>
</div>
<div class="col-sm-6">
<ueditor [(ngModel)]="config_source" [config]="config"></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-body">
<blockquote class="card-bodyquote" [innerHTML]="config_source"></blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<form #mForm="ngForm">
<div class="card mb-3">
<div class="card-header">表单非空校验</div>
<div class="card-body">
<textarea highlight-js>&lt;ueditor [(ngModel)]="full_source" #full required></ueditor></textarea>
<ueditor [(ngModel)]="form_source" required name="form_source"></ueditor>
<div class="text-right mt-3">
<button class="btn btn-primary btn-block" [disabled]="!mForm.form.valid || !mForm.form.dirty" type="submit">保存</button>
</div>
</div>
</div>
</form>
130 changes: 65 additions & 65 deletions demo/src/app/components/dev.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,65 @@
<div class="card mb-3">
<div class="card-header">自定义按钮</div>
<div class="card-block">
<p>示例只是针对当前UEditor实例，如果想所有实例都通用，可以尝试在 Module 中注册。</p>
<div class="row">
<div class="col-sm-6">
<textarea highlight-js>
&lt;ueditor [(ngModel)]="custom_source"
(onPreReady)="onPreReady($event)"
[config]="custom">
&lt;/ueditor>
</textarea>
<textarea highlight-js>

onPreReady(comp: UEditorComponent) {
UE.registerUI('button', function(editor, uiName) {
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: uiName,
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -500px 0;',
//点击时执行的命令
onclick: function() {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为你是添加button,所以需要返回这个button
return btn;
}, 5, comp.id);
// comp.id 是指当前UEditor实例Id
}
</textarea>
</div>
<div class="col-sm-6">
<ueditor [(ngModel)]="custom_source" (onPreReady)="onPreReady($event)" [config]="custom"></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-block">
<blockquote class="card-blockquote" [innerHTML]="custom_source"></blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">自定义按钮</div>
<div class="card-body">
<p>示例只是针对当前UEditor实例，如果想所有实例都通用，可以尝试在 Module 中注册。</p>
<div class="row">
<div class="col-sm-6">
<textarea highlight-js>
&lt;ueditor [(ngModel)]="custom_source"
(onPreReady)="onPreReady($event)"
[config]="custom">
&lt;/ueditor>
</textarea>
<textarea highlight-js>

onPreReady(comp: UEditorComponent) {
UE.registerUI('button', function(editor, uiName) {
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: uiName,
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -500px 0;',
//点击时执行的命令
onclick: function() {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为你是添加button,所以需要返回这个button
return btn;
}, 5, comp.id);
// comp.id 是指当前UEditor实例Id
}
</textarea>
</div>
<div class="col-sm-6">
<ueditor [(ngModel)]="custom_source" (onPreReady)="onPreReady($event)" [config]="custom"></ueditor>
<div class="card card-outline-secondary mt-3">
<div class="card-body">
<blockquote class="card-bodyquote" [innerHTML]="custom_source"></blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
5 changes: 3 additions & 2 deletions demo/src/assets/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 8ecf26e

Please sign in to comment.