membuat form field textarea yang berupa code editor
editor_code($name, $value = '', $config = array(), $meta = true);
$name = array(
'id' => 'fieldName',
'fullscreen' => true,
'syntax' => 'php',
'syntaxes' => 'all',
'theme' => 'esoftplay',
'save_callback' => 'test_function'
);
$value = 'echo phpinfo();';
$config = array(
'useSoftTabs' => true,
'showPrintMargin' => true,
'enableLiveAutocompletion' => true
);
echo editor_code($name, $value, $config);
?>
< script type="text/javascript" >
editor1.focus();
function test_function() {var a = editor1.getValue();
console.log(a);
alert("silahkan lihat console log!");
}
< /script >
perhatikan pada javascriptnya, pada contoh langsung menggunakan variable editor1 tanpa ada nya declarasi, karena setiap penggunaan function editor_code maka secara otomatis akan memlbuat variable baru dalam javascript yaitu editor1, editor2, editor3... tergantung berapa kali anda memanggil function ini dalam satu halaman tersebut.$name = array( 'id' => 'input-name', // input/textarea's name in the form 'save_callback' => 'js-func-name', // name of function in javascript to execute on submit 'theme' => 'theme-name', // it's like $config['theme'] only without prefix 'ace/theme/' 'syntax' => 'mode-name', // it's like $config['mode'] only without prefix 'ace/mode/' 'syntaxes' => 'available,mode,name', // Array of available $config['mode'] only without prefix 'ace/mode/' with comma delimiter 'fullscreen' => 'boolean', // Boolean wheter the editor will in full screen );Contoh penggunaan variable $config:
$config = array( // editor options 'selectionStyle' => 'line',// "line"|"text" 'highlightActiveLine' => true, // boolean 'highlightSelectedWord' => true, // boolean 'readOnly' => false, // boolean: true if read only 'cursorStyle' => 'ace', // "ace"|"slim"|"smooth"|"wide" 'mergeUndoDeltas' => true, // false|true|"always" 'behavioursEnabled' => true, // boolean: true if enable custom behaviours 'wrapBehavioursEnabled' => true, // boolean 'autoScrollEditorIntoView' => undefined, // boolean: this is needed if editor is inside scrollable page 'keyboardHandler' => null, // function: handle custom keyboard events 'enableLiveAutocompletion' => false, // auto suggestion as you type somthing in editor // renderer options 'animatedScroll' => false, // boolean: true if scroll should be animated 'displayIndentGuides' => false, // boolean: true if the indent should be shown. See 'showInvisibles' 'showInvisibles' => false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents 'showPrintMargin' => false, // boolean: true if show the vertical print margin 'printMarginColumn' => 80, // number: number of columns for vertical print margin 'printMargin' => undefined, // boolean | number: showPrintMargin | printMarginColumn 'showGutter' => true, // boolean: true if show line gutter 'fadeFoldWidgets' => false, // boolean: true if the fold lines should be faded 'showFoldWidgets' => true, // boolean: true if the fold lines should be shown ? 'showLineNumbers' => true, 'highlightGutterLine' => false, // boolean: true if the gutter line should be highlighted 'hScrollBarAlwaysVisible' => false, // boolean: true if the horizontal scroll bar should be shown regardless 'vScrollBarAlwaysVisible' => false, // boolean: true if the vertical scroll bar should be shown regardless 'fontSize' => 12, // number | string: set the font size to this many pixels 'fontFamily' => undefined, // string: set the font-family css value 'maxLines' => undefined, // number: set the maximum lines possible. This will make the editor height changes 'minLines' => undefined, // number: set the minimum lines possible. This will make the editor height changes 'maxPixelHeight' => 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined. 'scrollPastEnd' => 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance 'fixedWidthGutter' => false, // boolean: true if the gutter should be fixed width 'theme' => 'textmate', // theme string from ace/theme or custom? see example below // mouseHandler options 'scrollSpeed' => 2, // number: the scroll speed index 'dragDelay' => 0, // number: the drag delay before drag starts. it's 150ms for mac by default 'dragEnabled' => true, // boolean: enable dragging 'focusTimout' => 0, // number: the focus delay before focus starts. 'tooltipFollowsMouse' => true, // boolean: true if the gutter tooltip should follow mouse // session options 'firstLineNumber' => 1, // number: the line number in first line 'overwrite' => false, // boolean 'newLineMode' => 'auto', // "auto" | "unix" | "windows" 'useWorker' => true, // boolean: true if use web worker for loading scripts 'useSoftTabs' => false, // boolean: true if we want to use spaces than tabs 'tabSize' => 2, // number 'wrap' => false, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin 'indentedSoftWrap' => true, // boolean 'foldStyle' => 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'. 'mode' => 'ace/mode/text' // string: path to language mode see example below );Mode atau script syntax yang tersedia untuk
$config['mode'] atau $name['syntax'] (without 'ace/mode/'):
$config['mode'] = array_rand(array( 'ace/mode/abap', 'ace/mode/abc', 'ace/mode/actionscript', 'ace/mode/ada', 'ace/mode/apache_conf', 'ace/mode/apex', 'ace/mode/applescript', 'ace/mode/asciidoc', 'ace/mode/asl', 'ace/mode/assembly_x86', 'ace/mode/autohotkey', 'ace/mode/batchfile', 'ace/mode/bro', 'ace/mode/c_cpp', 'ace/mode/c9search', 'ace/mode/cirru', 'ace/mode/clojure', 'ace/mode/cobol', 'ace/mode/coffee', 'ace/mode/coldfusion', 'ace/mode/csharp', 'ace/mode/csound_document', 'ace/mode/csound_orchestra', 'ace/mode/csound_score', 'ace/mode/csp', 'ace/mode/css', 'ace/mode/curly', 'ace/mode/d', 'ace/mode/dart', 'ace/mode/diff', 'ace/mode/django', 'ace/mode/dockerfile', 'ace/mode/dot', 'ace/mode/drools', 'ace/mode/edifact', 'ace/mode/eiffel', 'ace/mode/ejs', 'ace/mode/elixir', 'ace/mode/elm', 'ace/mode/erlang', 'ace/mode/forth', 'ace/mode/fortran', 'ace/mode/fsharp', 'ace/mode/fsl', 'ace/mode/ftl', 'ace/mode/gcode', 'ace/mode/gherkin', 'ace/mode/gitignore', 'ace/mode/glsl', 'ace/mode/gobstones', 'ace/mode/golang', 'ace/mode/graphqlschema', 'ace/mode/groovy', 'ace/mode/haml', 'ace/mode/handlebars', 'ace/mode/haskell_cabal', 'ace/mode/haskell', 'ace/mode/haxe', 'ace/mode/hjson', 'ace/mode/html_elixir', 'ace/mode/html_ruby', 'ace/mode/html', 'ace/mode/ini', 'ace/mode/io', 'ace/mode/jack', 'ace/mode/jade', 'ace/mode/java', 'ace/mode/javascript', 'ace/mode/json', 'ace/mode/jsoniq', 'ace/mode/jsp', 'ace/mode/jssm', 'ace/mode/jsx', 'ace/mode/julia', 'ace/mode/kotlin', 'ace/mode/latex', 'ace/mode/less', 'ace/mode/liquid', 'ace/mode/lisp', 'ace/mode/livescript', 'ace/mode/logiql', 'ace/mode/logtalk', 'ace/mode/lsl', 'ace/mode/lua', 'ace/mode/luapage', 'ace/mode/lucene', 'ace/mode/makefile', 'ace/mode/markdown', 'ace/mode/mask', 'ace/mode/matlab', 'ace/mode/maze', 'ace/mode/mel', 'ace/mode/mixal', 'ace/mode/mushcode', 'ace/mode/mysql', 'ace/mode/nix', 'ace/mode/nsis', 'ace/mode/objectivec', 'ace/mode/ocaml', 'ace/mode/pascal', 'ace/mode/perl', 'ace/mode/perl6', 'ace/mode/pgsql', 'ace/mode/php_laravel_blade', 'ace/mode/php', 'ace/mode/pig', 'ace/mode/plain_text', 'ace/mode/powershell', 'ace/mode/praat', 'ace/mode/prolog', 'ace/mode/properties', 'ace/mode/protobuf', 'ace/mode/puppet', 'ace/mode/python', 'ace/mode/r', 'ace/mode/razor', 'ace/mode/rdoc', 'ace/mode/red', 'ace/mode/redshift', 'ace/mode/rhtml', 'ace/mode/rst', 'ace/mode/ruby', 'ace/mode/rust', 'ace/mode/sass', 'ace/mode/scad', 'ace/mode/scala', 'ace/mode/scheme', 'ace/mode/scss', 'ace/mode/sh', 'ace/mode/sjs', 'ace/mode/slim', 'ace/mode/smarty', 'ace/mode/snippets', 'ace/mode/soy_template', 'ace/mode/space', 'ace/mode/sparql', 'ace/mode/sql', 'ace/mode/sqlserver', 'ace/mode/stylus', 'ace/mode/svg', 'ace/mode/swift', 'ace/mode/tcl', 'ace/mode/terraform', 'ace/mode/tex', 'ace/mode/text', 'ace/mode/textile', 'ace/mode/toml', 'ace/mode/tsx', 'ace/mode/turtle', 'ace/mode/twig', 'ace/mode/typescript', 'ace/mode/vala', 'ace/mode/vbscript', 'ace/mode/velocity', 'ace/mode/verilog', 'ace/mode/vhdl', 'ace/mode/visualforce', 'ace/mode/wollok', 'ace/mode/xml', 'ace/mode/xquery', 'ace/mode/yaml', ));theme atau script highlight yang tersedia untuk
$config['theme'] atau $name['theme'] (without 'ace/theme/'):
$config['theme'] = array_rand(array( 'ace/theme/ambiance', 'ace/theme/chaos', 'ace/theme/chrome', 'ace/theme/clouds_midnight', 'ace/theme/clouds', 'ace/theme/cobalt', 'ace/theme/crimson_editor', 'ace/theme/dawn', 'ace/theme/dracula', 'ace/theme/dreamweaver', 'ace/theme/eclipse', 'ace/theme/github', 'ace/theme/gob', 'ace/theme/gruvbox', 'ace/theme/idle_fingers', 'ace/theme/iplastic', 'ace/theme/katzenmilch', 'ace/theme/kr_theme', 'ace/theme/kuroir', 'ace/theme/merbivore_soft', 'ace/theme/merbivore', 'ace/theme/mono_industrial', 'ace/theme/monokai', 'ace/theme/pastel_on_dark', 'ace/theme/solarized_dark', 'ace/theme/solarized_light', 'ace/theme/sqlserver', 'ace/theme/terminal', 'ace/theme/textmate', 'ace/theme/tomorrow_night_blue', 'ace/theme/tomorrow_night_bright', 'ace/theme/tomorrow_night_eighties', 'ace/theme/tomorrow_night', 'ace/theme/tomorrow', 'ace/theme/twilight', 'ace/theme/vibrant_ink', 'ace/theme/xcode' ));
File Path: includes/function/editor.php function untuk menampilkan form field HTML Editor maupun Code Editor
0 Comment
Post Your Comment