knockout-froala
Version:
Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor
93 lines (76 loc) • 3.78 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Knockout Froala Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Froala files -->
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/froala_style.min.css" />
<!-- Froala plugin stylesheets, remove what you don't need -->
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/char_counter.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/code_view.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/colors.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/draggable.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/emoticons.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/file.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/fullscreen.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/image.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/image_manager.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/line_breaker.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/quick_insert.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/table.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/video.min.css" />
<link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/themes/gray.min.css" />
</head>
<body>
<div id="app">
<h3> Editor </h3>
<textarea data-bind="value: html, froala: html, froalaOptions: options"></textarea>
<div id="edit"></div>
<br>
<h3> Preview Output </h3>
<hr>
<pre data-bind="html: html"></pre>
<hr>
<br>
</div>
<script data-main="js/app" src="js/lib/require.js"></script>
<script>
// Froala Editor plugins list.
var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
'entities', 'file', 'font_family', 'font_size', 'fullscreen',
'image_manager', 'image', 'inline_style', 'line_breaker',
'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',
'save', 'table', 'url', 'video']
// Define paths.
var paths = {
'app': '../app',
'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
'knockout':'../../../bower_components/knockout/dist/knockout.debug',
'knockout-froala':'../../../src/knockout-froala'
};
// Add Froala Editor plugins to path.
for (var i = 0; i < fe_plugins.length; i++) {
paths['fe_' + fe_plugins[i]] = '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';
}
var shim = {
};
for (var i = 0; i < fe_plugins.length; i++) {
shim['fe_' + fe_plugins[i]] = {
deps: ['FroalaEditor']
}
}
// Init RequireJS.
requirejs.config({
'baseUrl': 'js/lib',
'paths': paths,
'shim': shim
});
// Load the main app module to start the app
requirejs(["app"]);
</script>
</body>
</html>