-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (118 loc) · 8.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html ng-app="ckeditorTest">
<head>
<meta charset="utf-8"/>
<!-- Load files. -->
<!-- <script src="ng.js" type="text/javascript"></script> -->
<script src="angular.js" type="text/javascript"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="index.js" type="text/javascript"></script>
<script type="application/javascript">
angular.module('ckeditorTest', ['ckeditor'])
.controller('CkeditorCtrl', ['$scope', function ($scope) { // Editor options.
$scope.content = 'testing this aa';
$scope.options = {
language: 'en',
allowedContent: true,
entities: false,
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
toolbar: [
{ name: 'clipboard', items: [ 'Undo', 'Redo' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'EmbedSemantic', 'Table' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'editing', items: [ 'Scayt' ] },
{ name: 'alignment', items : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }
],
// Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
// One HTTP request less will result in a faster startup time.
// For more information check http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-customConfig
customConfig: '',
// Enabling extra plugins, available in the standard-all preset: http://ckeditor.com/presets-all
extraPlugins: 'autoembed,embedsemantic,image2,uploadimage,uploadfile',
/*********************** File management support ***********************/
// In order to turn on support for file uploads, CKEditor has to be configured to use some server side
// solution with file upload/management capabilities, like for example CKFinder.
// For more information see http://docs.ckeditor.com/#!/guide/dev_ckfinder_integration
// Uncomment and correct these lines after you setup your local CKFinder instance.
// filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
// filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
/*********************** File management support ***********************/
// Remove the default image plugin because image2, which offers captions for images, was enabled above.
removePlugins: 'image',
// Make the editing area bigger than default.
height: 461,
// An array of stylesheets to style the WYSIWYG area.
// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
contentsCss: [ 'https://cdn.ckeditor.com/4.6.1/standard-all/contents.css', 'mystyles.css' ],
// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
bodyClass: 'article-editor',
// Reduce the list of block elements listed in the Format dropdown to the most commonly used.
format_tags: 'p;h1;h2;h3;pre',
// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
removeDialogTabs: 'image:advanced;link:advanced',
// Define the list of styles which should be available in the Styles dropdown list.
// If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
// (and on your website so that it rendered in the same way).
// Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
// that file, which means one HTTP request less (and a faster startup).
// For more information see http://docs.ckeditor.com/#!/guide/dev_styles
stylesSet: [
/* Inline Styles */
{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },
/* Object Styles */
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},
{
name: 'Compact table',
element: 'table',
attributes: {
cellpadding: '5',
cellspacing: '0',
border: '1',
bordercolor: '#ccc'
},
styles: {
'border-collapse': 'collapse'
}
},
{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },
/* Widget Styles */
// We use this one to style the brownie picture.
{ name: 'Illustration', type: 'widget', widget: 'image', attributes: { 'class': 'image-illustration' } },
// Media embed
{ name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' } },
{ name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' } },
{ name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' } },
{ name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' } },
{ name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' } }
]
};
// Called when the editor is completely ready.
$scope.onReady = function () {
};
}]);
</script>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div ng-controller="CkeditorCtrl">
<div ckeditor="options" ng-model="content" ready="onReady()" id="editor1"></div>
</div>
</body>
</html>