mit wysiwyg-Editor text mit angular2
Ich versuche, wysiwyg in meinem Projekt angular2
wenn ich meinen code in index.html Seite (auf der root Seite, es funktioniert)
aber wenn ich versuche, es zu benutzen in einer untergeordneten Ansicht html es nicht die css-oder (und) javascript-code, um mein wysiwyg richtig
<!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>
in diesem Fall funktioniert es (ich habe meine wysiwyg in meinem index.html
)
aber wenn ich diese auf einem anderen view-Komponente, es funktioniert nicht
<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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
https://www.tinymce.com/
Wenn Winkel 2 Verwenden Tinymce .. Warum tinymce?
Index.html
Übrigen Lesen kann Tinymce
Stimme ich mit @mayur zu verwenden angular2 und tinyMCE.
Wenn Sie brauchen mehr Anleitung, die, WIE auf Basis von @mayur Antwort:
Richtlinien/tiny.Richtlinie.ts:
app.Komponente.ts:
main.ts:
index.html:
hoffe, das hilft
Hier ist die vollständige Erklärung mit den Schritten.
Installieren:
In Datei geben Sie den Pfad zum tinymce-Skript-Dateien
Führen Sie den folgenden Befehl kopiert die Stile innerhalb der assests Ordner.
Erstellen Richtlinie für tinymce so wird es überall verwendet werden, in der Anwendung.
speichern Sie es als einfach-tinymce.Richtlinie.ts
Nun innerhalb der app.- Modul.ts-Datei
Können Sie verwenden, wie unten in der Komponente template
Holen Sie innerhalb der Komponente.ts wie unten
Folgte ich dem Antworten, aber ich konnte nicht damit es funktioniert, vielleicht, weil ich bin mit routing und das dom-element, wo die zur Anwendung der Richtlinie ist nicht bereits verfügbar ist. Ich zog den tinymce-Editor.der init-code aus dem Konstruktor der ngOnInit Funktion und jetzt funktioniert es wie erwartet:
Richtlinien/tiny.Richtlinie.ts: