posted time Created time: 2015-07-10 posted time Last updated time:

Source Code Component

Source code component is to handle program, Html, xml, Style Sheet code in the page contents with WYSIWYG editor.

Appearance and usage of Source Code Component

The Source Code is used on the WYSIWYG editor of the CMS. It is to show the source code on the body content.

Source code component

It shows colored source code on the page. The synopsis of the programming languages are supported. The supported languages are below.

  • Html Mixed
  • Javascript
  • Style Sheet (Css)
  • Alinous (SQL + Script)
  • XML

The component uses the CodeMirror library. Therefore, if you want to use other programming languages on it, please include the language extension code of the CodeMirror on the include section of the JavaScript.

Source code of the Source Code Component Component

The Source Code Component consists of Html code, server side program, and Style Sheet. In addition to these code, it uses CodeMirror Javascript library.

Html code

The Html code of the Source Code Component is below.

This Html code has text area and code tag for the CodeMirror library. The text area tag has class whose name is "code-area-cms".

This class is used in specifying text area to activate the CodeMirror instance. When multiple text areas are there, they can be activated by single Javascript code.

Server side program

The server side of the Source Code Component is below.

The program get the text resource to show as the program code by SQL query. The text resource is specified as the parameter of this component.

The "$IN.resource_name" variable is the resource id given as the parameter.

After getting the program code, it convert the "<", ">", and "{" into escaped string.

Style Sheet

The Style Sheet of the Source Code Component is below.

The Style Sheet is for the CodeMirror instance. The width and max height are mainly defined.

Javascript code

The Javascript code of the Source Code Component is below.

This program executes script code to activate CodeMirror widget asynchronously.

The main source code of the CodeMirror is included in the additional header definition section area of this component.

Javascript header

The include files has some default synopsis, those are javascript, htmlmixed, css, alinous, xml and so on. If you extend the language support, please add the include definition here.

Go to Top