1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Editor</title>
- <style type="text/css" media="screen">
- .ace_editor, .toolbar {
- border: 1px solid lightgray;
- margin: auto;
- width: 80%;
- }
- .ace_editor {
- height: 200px;
- }
- </style>
- </head>
- <body>
- <!-- load ace -->
- <script src="../src/ace.js"></script>
- <!-- load ace language_tools extension -->
- <script src="../src/ext-language_tools.js"></script>
- <script>
- var buildDom = require("ace/lib/dom").buildDom;
- var editor = ace.edit();
- editor.setOptions({
- theme: "ace/theme/tomorrow_night_eighties",
- mode: "ace/mode/markdown",
- maxLines: 30,
- minLines: 30,
- autoScrollEditorIntoView: true,
- });
- var refs = {};
- function updateToolbar() {
- refs.saveButton.disabled = editor.session.getUndoManager().isClean();
- refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
- refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
- }
- editor.on("input", updateToolbar);
- editor.session.setValue(localStorage.savedValue || "Welcome to ace Toolbar demo!")
- function save() {
- localStorage.savedValue = editor.getValue();
- editor.session.getUndoManager().markClean();
- updateToolbar();
- }
- editor.commands.addCommand({
- name: "save",
- exec: save,
- bindKey: { win: "ctrl-s", mac: "cmd-s" }
- });
-
- buildDom(["div", { class: "toolbar" },
- ["button", {
- ref: "saveButton",
- onclick: save
- }, "save"],
- ["button", {
- ref: "undoButton",
- onclick: function() {
- editor.undo();
- }
- }, "undo"],
- ["button", {
- ref: "redoButton",
- onclick: function() {
- editor.redo();
- }
- }, "redo"],
- ["button", {
- style: "font-weight: bold",
- onclick: function() {
- editor.insertSnippet("**${1:$SELECTION}**");
- editor.renderer.scrollCursorIntoView()
- }
- }, "bold"],
- ["button", {
- style: "font-style: italic",
- onclick: function() {
- editor.insertSnippet("*${1:$SELECTION}*");
- editor.renderer.scrollCursorIntoView()
- }
- }, "Italic"],
- ], document.body, refs);
- document.body.appendChild(editor.container)
-
- window.editor = editor;
- </script>
- </body>
- </html>
|