Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 11.x
  • Verint Community
Verint Community 11.x
API Documentation code UI Component
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • +JavaScript API Modules
      • +jQuery Events
      • +jQuery Plugins
      • -UI Components
        • bookmark UI Component
        • code UI Component
        • collapseexpand UI Component
        • feature UI Component
        • html UI Component
        • like UI Component
        • links UI Component
        • loading UI Component
        • masonry UI Component
        • moderate UI Component
        • page UI Component
        • poll UI Component
        • previewhtml UI Component
        • rate UI Component
        • resizedimage UI Component
        • scheduledfile UI Component
        • searchresult UI Component
        • select UI Component
        • squeezetext UI Component
        • theater UI Component
        • tip UI Component
        • tourtip UI Component
        • UI Component tag
        • viewhtml UI Component
        • webpreview UI Component
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

code UI Component


jQuery.telligent.evolution.ui.components.code

UI Component which enables a body of text to be rendered and optionally editable with syntax highlighting supporting a variety of programming languages using evolutionCodeEditor. The default implementation uses the evolutionCodeEditor plugin. Overrides can be provided at the theme level. When the element is a textarea, it is automatically made editable, and throttled change events are raised on the textarea element, after which its value contains updated content from the syntax highlighter.

Options

Data made available to instances of the component:

  • mode: Syntax highlighting mode. Options include actionscript, applescript, batchfile, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, dockerfile, erlang, golang, html, java, javascript, json, jsp, latex, less, lisp, lua, makefile, markdown, nix, objectivec, ocaml, pascal, perl, pgsql, php, powershell, praat, python, rhtml, ruby, rust, sass, scala, sql, sqlserver, text, typescript, velocity, xml, xquery, yaml
    • default: text
  • theme: Highlighting theme. Options include light and dark
    • default: light
  • minlines: When provided, the editor will have a minimum line height
    • default: null
  • maxlines: When provided, the editor will have a maximum line height. This also triggers auto-resizing, up to maxLines. Scrolling is used beyond maxLines.
    • default: null
  • readonly: Whether or not the text is made editable.
    • default: false when the container is a textarea, true when it is not (pre or div)
  • gutter: Whether or not to show line numbers and other left-aligned elements
    • default: true
  • wordwrap: Whether or not to wrap long lines
    • default: false
  • enablefullscreen: Whether or not to enable full screen
    • default: true
  • sourcecomparison: When provided, uses a diff view
    • default: null

See also

  • evolutionCodeEditor jQuery Plugin
  • evolutionCodeEditorChange jQuery Event

Example

Non-editable example using ui-code.

<pre class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</pre>

Editable example using ui-code. The textarea is automatically updated on changes to the editor, and change events are triggered on the textarea.

<textarea class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</textarea>

Default Implementation

For reference purposes or as the basis for an override:

$.telligent.evolution.ui.components.code = {
    setup: function() { },
    add: function(elm, options) {
        var codeOptions = {};

        if(options.mode) {
            codeOptions.mode = options.mode;
        }

        if(options.theme !== undef) {
            codeOptions.theme = options.theme;
        }

        if(options.minlines !== undef) {
            codeOptions.minLines = parseInt(options.minlines, 10)
        }

        if(options.maxlines !== undef) {
            codeOptions.maxLines = parseInt(options.maxlines, 10)
        }

        if(options.readonly) {
            codeOptions.readOnly = options.readonly === 'true' ? true : false;
        }

        if(options.gutter) {
            codeOptions.gutter = options.gutter === 'true' ? true : false;
        }

        if(options.wordwrap) {
            codeOptions.wordWrap = options.wordwrap === 'true' ? true : false;
        }

        if(options.sourcecomparison) {
            codeOptions.sourceComparison = sourceComparison;
        }

        $(elm).evolutionCodeEditor(codeOptions);
    }
};

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2022 Verint, Inc.
Powered by Verint Community