• Notifications
      You have 2 unread messages
    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • All notification
    • Erica Hughes

      There are many variations of passages...

      1 hr ago

    • Kori Thomas

      There are many variations of passages...

      58 mins ago

    • Ain Chavez

      There are many variations of passages...

      32 mins ago

    • Mark all as read
  • Elana SaintAdmin
    • Profile
    • Home
    • Inbox
    • Taskboard
    • Settings
    • Log in
  • Back
  • Dashboard
    • Business
    • Helpdesk
    • Social
    • Enterprise
  • Widgets
    • General
    • Chart
  • Ui Kits
    • Typography
    • Avatars
    • helper classes
    • Grid
    • Tag & pills
    • Progress
    • Modal
    • Alert
    • Popover
    • Tooltip
    • Spinners
    • Dropdown
    • Accordion
    • Tabs
      • Bootstrap Tabs
      • Line Tabs
    • Navs
    • Shadow
    • Lists
  • Bonus UiHot
    • Scrollable
    • Tree view
    • Bootstrap Notify
    • Rating
    • dropzone
    • Tour
    • SweetAlert2
    • Animated Modal
    • Owl Carousel
    • Ribbons
    • Pagination
    • Steps
    • Breadcrumb
    • Range Slider
    • Image cropper
    • Sticky
    • Basic Card
    • Creative Card
    • Tabbed Card
    • Draggable Card
    • Timeline
      • Timeline 1
      • Timeline 2
      • Timeline 3
  • Page layout
    • Boxed
    • RTL
    • Light Layout
    • Dark Layout
    • Hide Nav Scroll
    • Footer Light
    • Footer Dark
    • Footer Fixed
  • Builders
    • Form Builder 1
    • Form Builder 2
    • Page Builder
    • Button Builder
  • Animation
    • Animate
    • Scroll Reveal
    • AOS animation
    • Tilt Animation
    • Wow Animation
  • Icons
    • Flag icon
    • Fontawesome Icon
    • Ico Icon
    • Thimify Icon
    • Feather icon
    • Whether Icon
    • Simple line Icon
    • Material Design Icon
    • pe7 icon
    • Typicons icon
    • Ionic icon
  • Buttons
    • Default Style
    • Flat Style
    • Edge Style
    • Raised Style
    • Button Group
  • Forms
    • Form Controls
      • Form Validation
      • Base Inputs
      • Checkbox & Radio
      • Input Groups
      • Mega Options
    • Form Widgets
      • Datepicker
      • Timepicker
      • Datetimepicker
      • Daterangepicker
      • Touchspin
      • Select2
      • Switch
      • Typeahead
      • Clipboard
    • Form layout
      • Default Forms
      • Form Wizard 1
      • Form Wizard 2
      • Form Wizard 3
      • Form Wizard 4
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Sizing Tables
      • Border Tables
      • Styling Tables
      • Table components
    • Data Tables
      • Basic Init
      • Advance Init
      • Styling
      • AJAX
      • Server Side
      • Plug-in
      • API
      • Data Sources
    • Ex. Data Tables
      • Auto Fill
      • Basic Button
      • Column Reorder
      • Fixed Header
      • HTML 5 Export
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
    • Js Grid Table
  • Charts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • PagesNew
    • Landing page
    • Sample page
    • Internationalization
  • Apps
    • Bookmarks
    • Contacts
    • Tasks
    • Maps
      • Maps JS
      • Vector Maps
    • Email
      • Email App
      • Email Compose
    • Ecommerce
      • Product
      • Product page
      • Product list
      • Payment Details
      • Order History
      • Invoice
      • Cart
      • Wishlist
      • Checkout
      • Pricing
    • Blog
      • Blog Details
      • Blog Single
      • Add Post
    • Job Search
      • Cards view
      • List View
      • Job Details
      • Apply
    • Learning
      • Learning List
      • Detailed Course
    • Gallery
      • Gallery Grid
      • Gallery Grid Desc
      • Masonry Gallery
      • Masonry with Desc
      • Hover Effects
    • Chat
      • Chat App
      • Video chat
    • Calender
    • Users
      • Users Profile
      • Users Edit
      • Users Cards
    • Editors
      • CK editor
      • MDE editor
      • ACE code editor
    • Social App
    • To-Do
    • FAQ
    • Knowledgebase
    • Support Ticket
  • Starter kit
  • Others
    Search Pages
    • Search Website
    • Search Images
    • Search Video
    Error Page
    • Error 400
    • Error 401
    • Error 403
    • Error 404
    • Error 500
    • Error 503
    Authentication
    • Login Simple
    • Login with Bg Image
    • Login with Bg video
    • Register Simple
    • Register with Bg Image
    • Register with Bg video
    • Unlock User
    • Forget Password
    • Reset Password
    • Maintenance
    Coming Soon
    • Coming Simple
    • Coming with Bg video
    • Coming with Bg Image
    Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
  1. Apps
  2. Editors
  3. ACE Code Editor

ACE Code Editor

Javascript Mode
/* Sample JavaScript edit source */ // Define a module var app = angular.module('app', ['ui.bootstrap']); // Define a conroller. app.controller('GrokController', ['$scope', '$filter', function($scope, $filter) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.isOpened = false; $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.isOpened = true; }; }]); /* End of sample edit source */
Html Mode
<!--Page header start--> <div class="page-header"> <div class="row"> <div class="col-xl-6"> <h3>Ace Text editor</h3> <small>Xolo Admin panel</small> </div> <div class="col-xl-6"> <ol class="breadcrumb pull-right"> <li class="breadcrumb-item"></li> <li class="breadcrumb-item">Editor </li> <li class="breadcrumb-item active">Ace Text editor</li> </ol> </div> </div> </div> <!--Page header end-->
css Mode
.text-layer { font: 12px Monaco, "Courier New", monospace; font-size: 3vmin; cursor: text; } .blinker { animation: blink 1s linear infinite alternate; } @keyframes blink { 0%, 40% { opacity: 1 } 40.5%, 100% { opacity: 1 } } @document url(http://c9.io/), url-prefix(http://ace.c9.io/build/), domain(c9.io), regexp("https:.*") /**/ { /**/ img[title]:before { content: attr(title) "\AImage \retrieved from" attr(src); /**/ white-space: pre; display: block; background: url(asdasd); "err } } @viewport { min-zoom: 1; max-zoom: 200%; user-zoom: fixed; }
php Mode
<?php function nfact($n) { if ($n == 0) { return 1; } else { return $n * nfact($n - 1); } } echo "\n\nPlease enter a whole number ... "; $num = trim(fgets(STDIN)); // ===== PROCESS - Determing the factorial of the input number ===== $output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n"; echo $output; ?>

Copyright 2022 © Xolo All rights reserved.

Hand crafted & made with