使用带有 angular2 的所见即所得编辑器文本
using wysiwyg Editor text with angular2
我正在尝试在我的项目 angular2 中使用所见即所得
当我在 index.html 页面中添加我的代码时(在根页面上,它有效)
但是当我尝试在子视图中使用它时 html 它没有获得 css 或(和)javascript 代码来正确获取我的所见即所得
<!doctype>
<html>
<head>
<base href="/">
<title>Arkloud Adservio</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!--bootsrat https-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/app.css">
<link rel="stylesheet" href="src/css/loginCss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/froala_editor.css">
<link rel="stylesheet" href="/css/froala_style.css">
<link rel="stylesheet" href="/css/plugins/code_view.css">
<link rel="stylesheet" href="/css/plugins/colors.css">
<link rel="stylesheet" href="/css/plugins/emoticons.css">
<link rel="stylesheet" href="/css/plugins/image_manager.css">
<link rel="stylesheet" href="/css/plugins/image.css">
<link rel="stylesheet" href="/css/plugins/line_breaker.css">
<link rel="stylesheet" href="/css/plugins/table.css">
<link rel="stylesheet" href="/css/plugins/char_counter.css">
<link rel="stylesheet" href="/css/plugins/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<my-app>Loading...</my-app>
<div id="editor">
<form>
<textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
<h1>Textarea</h1>
<p>The editor can also be initialized on a textarea.</p>
</textarea>
<input type="submit">
</form>
</div>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="/js/froala_editor.min.js"></script>
<script type="text/javascript" src="/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="/js/plugins/save.min.js"></script>
<script>
$(function () {
$('#edit').froalaEditor({
fullPage: true,
toolbarBottom: false
})
});
</script>
</body>
</html>
在这种情况下它有效(我把我的所见即所得放在我的 index.html
中)
但是当我把它放在另一个视图组件上时它不起作用
<div id="editor">
<form>
<textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
<h1>Textarea</h1>
<p>The editor can also be initialized on a textarea.</p>
</textarea>
<input type="submit">
</form>
</div>
如果angular 2 使用Tinymce .. Why tinymce?
//.ts
import {EditorDirectory} from '/../directives';
@Component({
selector: 'Foo'
directives: [EditorDirectory],
template: '<textarea [htmlEditor]="Form.find('Text')"></textarea>'
})
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
tinymce.init({
selector: '.tinymce-editor',
schema: 'html5',
});
Index.html
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
剩余可读Tinymce
我同意@mayur 使用angular2 和tinyMCE。
如果您需要更多关于如何基于@mayur 的回答的指导:
directives/tiny.directive.ts:
import {Directive} from '@angular/core';
declare var tinymce: any;
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
export class EditorDirective{
constructor(){
tinymce.init({
selector: 'textarea', //change this to a specific class/id
schema: 'html5',
});
}
}
app.component.ts:
import { Component } from '@angular/core';
import {EditorDirective} from './directives/tiny.directive';
@Component({
selector: 'my-app',
directives: [EditorDirective],
templateUrl: '<textarea [htmlEditor]></textarea>' //having [htmlEditor]="Form.find('Text')" caused an error for me, your mileage may vary
})
export class AppComponent {
}
main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
index.html:
<html>
<head>
<!--include title/metadata etc. here-->
<!-- 1. Load libraries -->
<!--
include libraries here
follow angular2 quickstart for help
tinymce may require a jquery import here
-->
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
<!--don't forget styles!-->
</head>
<body>
<div>
<my-app>Loading...</my-app>
</div>
</body>
希望这对您有所帮助
我按照答案进行了操作,但无法正常工作,可能是因为我正在使用路由,而应用指令的 dom 元素尚不可用。我刚刚将 tinymce.init 代码从构造函数移至 ngOnInit 函数,现在它按预期工作:
directives/tiny.directive.ts:
import {Directive, OnInit} from '@angular/core';
declare var tinymce: any;
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
export class EditorDirective implements OnInit { }
ngOnInit(){
tinymce.init({
selector: 'textarea', //change this to a specific class/id
schema: 'html5',
});
}
这里是完整的解释和步骤。
安装:
npm install --save tinymce
在文件中给出tinymce脚本文件的路径
"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"
],
运行下面的命令会复制assests文件夹里面的样式。
xcopy /I /E node_modules\tinymce\skins src\assets\skins
为 tinymce 创建指令,以便在应用程序的任何地方使用它。
import { Directive,
EventEmitter,
Input,
Output, ElementRef,OnInit,
AfterViewInit, OnDestroy } from '@angular/core';
declare var tinymce:any
@Directive({
selector: '[htmlEditor]'
})
export class SimpleTinyMceDirective implements OnInit,OnDestroy{
private htmlContent:any;
private editor;
@Output() private htmlEditorKeyUp : EventEmitter<any> = new EventEmitter();
constructor(private el:ElementRef){
}
ngOnInit(){
tinymce.init({
selector: '#' + this.el.nativeElement.id,
plugins: ['link', 'paste', 'table'],
skin_url: 'assets/skins/lightgray',
setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
const content = editor.getContent();
this.htmlEditorKeyUp.emit(content);
});
},
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
简单保存-tinymce.directive.ts
现在在 app.module.ts 文件中
import * as tinymce from 'tinymce'; //"importing tinymce"
import {SimpleTinyMceDirective} from './common/simple-tinymce/simple-tinymce.directive'; //import the directive your path of directive may be different than mine.
您可以在组件模板中像下面这样使用
<textarea id="description" class="form-control" name="description" placeholder="Enter the description" required [(ngModel)]='description' #description='ngModel'
(htmlEditorKeyUp)="onHtmlEditorKeyUp($event)" htmlEditor></textarea>
你可以像下面这样在component.ts里面获取
onHtmlEditorKeyUp(content:any):void{
console.log(content);
}
我正在尝试在我的项目 angular2 中使用所见即所得 当我在 index.html 页面中添加我的代码时(在根页面上,它有效)
但是当我尝试在子视图中使用它时 html 它没有获得 css 或(和)javascript 代码来正确获取我的所见即所得
<!doctype>
<html>
<head>
<base href="/">
<title>Arkloud Adservio</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!--bootsrat https-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/app.css">
<link rel="stylesheet" href="src/css/loginCss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/froala_editor.css">
<link rel="stylesheet" href="/css/froala_style.css">
<link rel="stylesheet" href="/css/plugins/code_view.css">
<link rel="stylesheet" href="/css/plugins/colors.css">
<link rel="stylesheet" href="/css/plugins/emoticons.css">
<link rel="stylesheet" href="/css/plugins/image_manager.css">
<link rel="stylesheet" href="/css/plugins/image.css">
<link rel="stylesheet" href="/css/plugins/line_breaker.css">
<link rel="stylesheet" href="/css/plugins/table.css">
<link rel="stylesheet" href="/css/plugins/char_counter.css">
<link rel="stylesheet" href="/css/plugins/video.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<style>
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<my-app>Loading...</my-app>
<div id="editor">
<form>
<textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
<h1>Textarea</h1>
<p>The editor can also be initialized on a textarea.</p>
</textarea>
<input type="submit">
</form>
</div>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="/js/froala_editor.min.js"></script>
<script type="text/javascript" src="/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="/js/plugins/save.min.js"></script>
<script>
$(function () {
$('#edit').froalaEditor({
fullPage: true,
toolbarBottom: false
})
});
</script>
</body>
</html>
在这种情况下它有效(我把我的所见即所得放在我的 index.html
中)
但是当我把它放在另一个视图组件上时它不起作用
<div id="editor">
<form>
<textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
<h1>Textarea</h1>
<p>The editor can also be initialized on a textarea.</p>
</textarea>
<input type="submit">
</form>
</div>
如果angular 2 使用Tinymce .. Why tinymce?
//.ts
import {EditorDirectory} from '/../directives';
@Component({
selector: 'Foo'
directives: [EditorDirectory],
template: '<textarea [htmlEditor]="Form.find('Text')"></textarea>'
})
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
tinymce.init({
selector: '.tinymce-editor',
schema: 'html5',
});
Index.html
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
剩余可读Tinymce
我同意@mayur 使用angular2 和tinyMCE。 如果您需要更多关于如何基于@mayur 的回答的指导:
directives/tiny.directive.ts:
import {Directive} from '@angular/core';
declare var tinymce: any;
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
export class EditorDirective{
constructor(){
tinymce.init({
selector: 'textarea', //change this to a specific class/id
schema: 'html5',
});
}
}
app.component.ts:
import { Component } from '@angular/core';
import {EditorDirective} from './directives/tiny.directive';
@Component({
selector: 'my-app',
directives: [EditorDirective],
templateUrl: '<textarea [htmlEditor]></textarea>' //having [htmlEditor]="Form.find('Text')" caused an error for me, your mileage may vary
})
export class AppComponent {
}
main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
index.html:
<html>
<head>
<!--include title/metadata etc. here-->
<!-- 1. Load libraries -->
<!--
include libraries here
follow angular2 quickstart for help
tinymce may require a jquery import here
-->
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
<!--don't forget styles!-->
</head>
<body>
<div>
<my-app>Loading...</my-app>
</div>
</body>
希望这对您有所帮助
我按照答案进行了操作,但无法正常工作,可能是因为我正在使用路由,而应用指令的 dom 元素尚不可用。我刚刚将 tinymce.init 代码从构造函数移至 ngOnInit 函数,现在它按预期工作:
directives/tiny.directive.ts:
import {Directive, OnInit} from '@angular/core';
declare var tinymce: any;
// Tinymce directive
@Directive({
inputs: ['htmlEditor'],
selector: '[htmlEditor]'
})
export class EditorDirective implements OnInit { }
ngOnInit(){
tinymce.init({
selector: 'textarea', //change this to a specific class/id
schema: 'html5',
});
}
这里是完整的解释和步骤。
安装:
npm install --save tinymce
在文件中给出tinymce脚本文件的路径
"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" ],
运行下面的命令会复制assests文件夹里面的样式。
xcopy /I /E node_modules\tinymce\skins src\assets\skins
为 tinymce 创建指令,以便在应用程序的任何地方使用它。
import { Directive, EventEmitter, Input, Output, ElementRef,OnInit, AfterViewInit, OnDestroy } from '@angular/core'; declare var tinymce:any @Directive({ selector: '[htmlEditor]' }) export class SimpleTinyMceDirective implements OnInit,OnDestroy{ private htmlContent:any; private editor; @Output() private htmlEditorKeyUp : EventEmitter<any> = new EventEmitter(); constructor(private el:ElementRef){ } ngOnInit(){ tinymce.init({ selector: '#' + this.el.nativeElement.id, plugins: ['link', 'paste', 'table'], skin_url: 'assets/skins/lightgray', setup: editor => { this.editor = editor; editor.on('keyup', () => { const content = editor.getContent(); this.htmlEditorKeyUp.emit(content); }); }, }); } ngOnDestroy() { tinymce.remove(this.editor); } }
简单保存-tinymce.directive.ts
现在在 app.module.ts 文件中
import * as tinymce from 'tinymce'; //"importing tinymce" import {SimpleTinyMceDirective} from './common/simple-tinymce/simple-tinymce.directive'; //import the directive your path of directive may be different than mine.
您可以在组件模板中像下面这样使用
<textarea id="description" class="form-control" name="description" placeholder="Enter the description" required [(ngModel)]='description' #description='ngModel' (htmlEditorKeyUp)="onHtmlEditorKeyUp($event)" htmlEditor></textarea>
你可以像下面这样在component.ts里面获取
onHtmlEditorKeyUp(content:any):void{ console.log(content); }