scriptIndex.blade.php 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <style>
  8. #container {
  9. width: 1000px;
  10. margin: 20px auto;
  11. }
  12. .ck-editor__editable[role="textbox"] {
  13. /* editing area */
  14. min-height: 200px;
  15. }
  16. .ck-content .image {
  17. /* block images */
  18. max-width: 80%;
  19. margin: 20px auto;
  20. }
  21. </style>
  22. <!--
  23. The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
  24. See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
  25. -->
  26. <script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/super-build/ckeditor.js"></script>
  27. <!--
  28. Uncomment to load the Spanish translation
  29. <script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/super-build/translations/es.js"></script>
  30. -->
  31. <script>
  32. // This sample still does not showcase all CKEditor 5 features (!)
  33. // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
  34. CKEDITOR.ClassicEditor.create(document.getElementById("presentation"), {
  35. // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
  36. toolbar: {
  37. items: [
  38. 'exportPDF','exportWord', '|',
  39. 'findAndReplace', 'selectAll', '|',
  40. 'heading', '|',
  41. 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
  42. 'bulletedList', 'numberedList', 'todoList', '|',
  43. 'outdent', 'indent', '|',
  44. 'undo', 'redo',
  45. '-',
  46. 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
  47. 'alignment', '|',
  48. 'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
  49. 'specialCharacters', 'horizontalLine', 'pageBreak', '|',
  50. 'textPartLanguage', '|',
  51. 'sourceEditing'
  52. ],
  53. shouldNotGroupWhenFull: true
  54. },
  55. // Changing the language of the interface requires loading the language file using the <script> tag.
  56. // language: 'es',
  57. list: {
  58. properties: {
  59. styles: true,
  60. startIndex: true,
  61. reversed: true
  62. }
  63. },
  64. // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
  65. heading: {
  66. options: [
  67. { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
  68. { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
  69. { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
  70. { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
  71. { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
  72. { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
  73. { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
  74. ]
  75. },
  76. // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
  77. placeholder: 'Welcome to CKEditor 5!',
  78. // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
  79. fontFamily: {
  80. options: [
  81. 'default',
  82. 'Arial, Helvetica, sans-serif',
  83. 'Courier New, Courier, monospace',
  84. 'Georgia, serif',
  85. 'Lucida Sans Unicode, Lucida Grande, sans-serif',
  86. 'Tahoma, Geneva, sans-serif',
  87. 'Times New Roman, Times, serif',
  88. 'Trebuchet MS, Helvetica, sans-serif',
  89. 'Verdana, Geneva, sans-serif'
  90. ],
  91. supportAllValues: true
  92. },
  93. // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
  94. fontSize: {
  95. options: [ 10, 12, 14, 'default', 18, 20, 22 ],
  96. supportAllValues: true
  97. },
  98. // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
  99. // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
  100. htmlSupport: {
  101. allow: [
  102. {
  103. name: /.*/,
  104. attributes: true,
  105. classes: true,
  106. styles: true
  107. }
  108. ]
  109. },
  110. // Be careful with enabling previews
  111. // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
  112. htmlEmbed: {
  113. showPreviews: true
  114. },
  115. // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
  116. link: {
  117. decorators: {
  118. addTargetToExternalLinks: true,
  119. defaultProtocol: 'https://',
  120. toggleDownloadable: {
  121. mode: 'manual',
  122. label: 'Downloadable',
  123. attributes: {
  124. download: 'file'
  125. }
  126. }
  127. }
  128. },
  129. // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
  130. mention: {
  131. feeds: [
  132. {
  133. marker: '@',
  134. feed: [
  135. '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
  136. '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
  137. '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
  138. '@sugar', '@sweet', '@topping', '@wafer'
  139. ],
  140. minimumCharacters: 1
  141. }
  142. ]
  143. },
  144. // The "super-build" contains more premium features that require additional configuration, disable them below.
  145. // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
  146. removePlugins: [
  147. // These two are commercial, but you can try them out without registering to a trial.
  148. // 'ExportPdf',
  149. // 'ExportWord',
  150. 'CKBox',
  151. 'CKFinder',
  152. 'EasyImage',
  153. // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
  154. // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
  155. // Storing images as Base64 is usually a very bad idea.
  156. // Replace it on production website with other solutions:
  157. // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
  158. // 'Base64UploadAdapter',
  159. 'RealTimeCollaborativeComments',
  160. 'RealTimeCollaborativeTrackChanges',
  161. 'RealTimeCollaborativeRevisionHistory',
  162. 'PresenceList',
  163. 'Comments',
  164. 'TrackChanges',
  165. 'TrackChangesData',
  166. 'RevisionHistory',
  167. 'Pagination',
  168. 'WProofreader',
  169. // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
  170. // from a local file system (file://) - load this site via HTTP server if you enable MathType
  171. 'MathType'
  172. ]
  173. });
  174. CKEDITOR.ClassicEditor.create(document.getElementById("details"), {
  175. // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
  176. toolbar: {
  177. items: [
  178. 'exportPDF','exportWord', '|',
  179. 'findAndReplace', 'selectAll', '|',
  180. 'heading', '|',
  181. 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
  182. 'bulletedList', 'numberedList', 'todoList', '|',
  183. 'outdent', 'indent', '|',
  184. 'undo', 'redo',
  185. '-',
  186. 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
  187. 'alignment', '|',
  188. 'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
  189. 'specialCharacters', 'horizontalLine', 'pageBreak', '|',
  190. 'textPartLanguage', '|',
  191. 'sourceEditing'
  192. ],
  193. shouldNotGroupWhenFull: true
  194. },
  195. // Changing the language of the interface requires loading the language file using the <script> tag.
  196. // language: 'es',
  197. list: {
  198. properties: {
  199. styles: true,
  200. startIndex: true,
  201. reversed: true
  202. }
  203. },
  204. // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
  205. heading: {
  206. options: [
  207. { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
  208. { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
  209. { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
  210. { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
  211. { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
  212. { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
  213. { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
  214. ]
  215. },
  216. // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
  217. placeholder: 'Welcome to CKEditor 5!',
  218. // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
  219. fontFamily: {
  220. options: [
  221. 'default',
  222. 'Arial, Helvetica, sans-serif',
  223. 'Courier New, Courier, monospace',
  224. 'Georgia, serif',
  225. 'Lucida Sans Unicode, Lucida Grande, sans-serif',
  226. 'Tahoma, Geneva, sans-serif',
  227. 'Times New Roman, Times, serif',
  228. 'Trebuchet MS, Helvetica, sans-serif',
  229. 'Verdana, Geneva, sans-serif'
  230. ],
  231. supportAllValues: true
  232. },
  233. // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
  234. fontSize: {
  235. options: [ 10, 12, 14, 'default', 18, 20, 22 ],
  236. supportAllValues: true
  237. },
  238. // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
  239. // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
  240. htmlSupport: {
  241. allow: [
  242. {
  243. name: /.*/,
  244. attributes: true,
  245. classes: true,
  246. styles: true
  247. }
  248. ]
  249. },
  250. // Be careful with enabling previews
  251. // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
  252. htmlEmbed: {
  253. showPreviews: true
  254. },
  255. // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
  256. link: {
  257. decorators: {
  258. addTargetToExternalLinks: true,
  259. defaultProtocol: 'https://',
  260. toggleDownloadable: {
  261. mode: 'manual',
  262. label: 'Downloadable',
  263. attributes: {
  264. download: 'file'
  265. }
  266. }
  267. }
  268. },
  269. // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
  270. mention: {
  271. feeds: [
  272. {
  273. marker: '@',
  274. feed: [
  275. '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
  276. '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
  277. '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
  278. '@sugar', '@sweet', '@topping', '@wafer'
  279. ],
  280. minimumCharacters: 1
  281. }
  282. ]
  283. },
  284. // The "super-build" contains more premium features that require additional configuration, disable them below.
  285. // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
  286. removePlugins: [
  287. // These two are commercial, but you can try them out without registering to a trial.
  288. // 'ExportPdf',
  289. // 'ExportWord',
  290. 'CKBox',
  291. 'CKFinder',
  292. 'EasyImage',
  293. // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
  294. // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
  295. // Storing images as Base64 is usually a very bad idea.
  296. // Replace it on production website with other solutions:
  297. // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
  298. // 'Base64UploadAdapter',
  299. 'RealTimeCollaborativeComments',
  300. 'RealTimeCollaborativeTrackChanges',
  301. 'RealTimeCollaborativeRevisionHistory',
  302. 'PresenceList',
  303. 'Comments',
  304. 'TrackChanges',
  305. 'TrackChangesData',
  306. 'RevisionHistory',
  307. 'Pagination',
  308. 'WProofreader',
  309. // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
  310. // from a local file system (file://) - load this site via HTTP server if you enable MathType
  311. 'MathType'
  312. ]
  313. });
  314. </script>
  315. </body>
  316. </html>