mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-04-07 14:06:16 +08:00
Macros: load ace editor in a frame
This commit is contained in:
Julia Radzhabova
159
vendor/ace/component/AceEditor.html
vendored
Normal file
159
vendor/ace/component/AceEditor.html
vendored
Normal file
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CODE EDITOR</title>
|
||||
<style type="text/css">
|
||||
#editor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ace_content {
|
||||
background: #fff;
|
||||
background: var(--background-normal, #fff);
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
}
|
||||
.ace_layer.ace_gutter-layer.ace_folding-enabled {
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
}
|
||||
.divHeader {
|
||||
border-color: #dfdfdf;
|
||||
border-color: var(--border-divider, #dfdfdf);
|
||||
}
|
||||
.ace_scroller {
|
||||
border-left: none;
|
||||
}
|
||||
.ace_cursor {
|
||||
color: #444 !important;
|
||||
color: var(--text-normal, #444) !important;
|
||||
}
|
||||
.Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description {
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
background-color: #f7f7f7;
|
||||
background-color: var(--background-toolbar, #f7f7f7);
|
||||
}
|
||||
|
||||
.ace-chrome .ace_marker-layer .ace_selected-word {
|
||||
background: rgb(250, 250, 255, 0.3) !important;
|
||||
border: 1px solid rgb(200, 200, 250);
|
||||
}
|
||||
.ace_active-line {
|
||||
border-color: #333 !important;
|
||||
}
|
||||
.ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg {
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
border-color: #eee !important;
|
||||
border-color: var(--canvas-background, #eee) !important;
|
||||
background-color: #fff !important;
|
||||
background-color: var(--background-normal, #fff) !important;
|
||||
}
|
||||
.oo_highlight {
|
||||
background-color: #555 !important;
|
||||
}
|
||||
.ace_line-hover, .ace_autocomplete .ace_active-line {
|
||||
background-color: #e0e0e0; !important;
|
||||
background-color: var(--highlight-button-hover, #e0e0e0) !important;
|
||||
border: none !important;
|
||||
}
|
||||
.ace_completion-highlight {
|
||||
color: #0000ff !important;
|
||||
text-shadow: 0 0 0.01em;
|
||||
}
|
||||
.ace_dark .ace_completion-highlight {
|
||||
color: #4FC1FF !important;
|
||||
}
|
||||
.Ace-Tern-farg {
|
||||
color: gray;
|
||||
}
|
||||
.Ace-Tern-farg-current {
|
||||
color: gray;
|
||||
}
|
||||
.Ace-Tern-type {
|
||||
color: #569CD6;
|
||||
}
|
||||
.Ace-Tern-jsdoc-param-name {
|
||||
color: gray;
|
||||
}
|
||||
.ace_gutter, .gutter_bg {
|
||||
background: #fff !important;
|
||||
background: var(--background-normal, #fff) !important;
|
||||
}
|
||||
.Ace-Tern-jsdoc-tag {
|
||||
color: #FF5E5C;
|
||||
}
|
||||
.Ace-Tern-farg-current-description {
|
||||
color : #FFFFFF;
|
||||
}
|
||||
.Ace-Tern-farg-current-name {
|
||||
color : white;
|
||||
}
|
||||
.Ace-Tern-tooltip {
|
||||
font-size: 11px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-divider);
|
||||
background: #f7f7f7;
|
||||
background: var(--background-toolbar, #f7f7f7);
|
||||
color: #444;
|
||||
color: var(--text-normal, #444);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
bottom: 0;
|
||||
left: 0 !important;
|
||||
top: initial !important;
|
||||
}
|
||||
.Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose {
|
||||
color: #444 !important;
|
||||
color: var(--icon-normal, #444) !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose:hover {
|
||||
opacity: 1;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ace_autocomplete {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
|
||||
scrollbar-color: #adadad #f7f7f7;
|
||||
scrollbar-color: var(--canvas-scroll-thumb-pressed, #adadad) var(--canvas-scroll-thumb, #f7f7f7);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor"></div>
|
||||
|
||||
<script src="../ace.js"></script>
|
||||
<script src="../ext-language_tools.js"></script>
|
||||
|
||||
<!-- code -->
|
||||
<script>
|
||||
function getUrlParams() {
|
||||
var e,
|
||||
a = /\+/g, // Regex for replacing addition symbol with a space
|
||||
r = /([^&=]+)=?([^&]*)/g,
|
||||
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
||||
q = window.location.search.substring(1),
|
||||
urlParams = {};
|
||||
|
||||
while (e = r.exec(q))
|
||||
urlParams[d(e[1])] = d(e[2]);
|
||||
|
||||
return urlParams;
|
||||
}
|
||||
|
||||
var params = getUrlParams();
|
||||
window.editorType = params["editorType"]; // word/cell/slide
|
||||
</script>
|
||||
<script src="AceEditorCode.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
195
vendor/ace/component/AceEditorCode.js
vendored
Normal file
195
vendor/ace/component/AceEditorCode.js
vendored
Normal file
@ -0,0 +1,195 @@
|
||||
/*
|
||||
* (c) Copyright Ascensio System SIA 2010-2024
|
||||
*
|
||||
* This program is a free software product. You can redistribute it and/or
|
||||
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
||||
* version 3 as published by the Free Software Foundation. In accordance with
|
||||
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
||||
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
||||
* of any third-party rights.
|
||||
*
|
||||
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
||||
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
*
|
||||
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* The interactive user interfaces in modified source and object code versions
|
||||
* of the Program must display Appropriate Legal Notices, as required under
|
||||
* Section 5 of the GNU AGPL version 3.
|
||||
*
|
||||
* Pursuant to Section 7(b) of the License you must retain the original Product
|
||||
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
||||
* grant you any rights under trademark law for use of our trademarks.
|
||||
*
|
||||
* All the Product's GUI elements, including illustrations and icon sets, as
|
||||
* well as technical writing content are licensed under the terms of the
|
||||
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
window.initCounter = 0;
|
||||
|
||||
function on_init_server(type)
|
||||
{
|
||||
if (type === (window.initCounter & type))
|
||||
return;
|
||||
window.initCounter |= type;
|
||||
if (window.initCounter === 3)
|
||||
{
|
||||
load_library("onlyoffice", "../libs/" + window.editorType + "/api.js");
|
||||
_postMessage({
|
||||
command: 'aceEditorReady',
|
||||
referer: 'ace-editor'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function load_library(name, url)
|
||||
{
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url, true);
|
||||
xhr.onreadystatechange = function()
|
||||
{
|
||||
if (xhr.readyState == 4)
|
||||
{
|
||||
var EditSession = ace.require("ace/edit_session").EditSession;
|
||||
var editDoc = new EditSession(xhr.responseText, "ace/mode/javascript");
|
||||
editor.ternServer.addDoc(name, editDoc);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
var editor = ace.edit("editor");
|
||||
editor.session.setMode("ace/mode/javascript");
|
||||
editor.container.style.lineHeight = "20px";
|
||||
editor.setValue("");
|
||||
|
||||
editor.getSession().setUseWrapMode(true);
|
||||
editor.getSession().setWrapLimitRange(null, null);
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.$blockScrolling = Infinity;
|
||||
|
||||
ace.config.loadModule('ace/ext/tern', function () {
|
||||
editor.setOptions({
|
||||
enableTern: {
|
||||
defs: ['browser', 'ecma5'],
|
||||
plugins: { doc_comment: { fullDocs: true } },
|
||||
useWorker: !!window.Worker,
|
||||
switchToDoc: function (name, start) {},
|
||||
startedCb: function () {
|
||||
on_init_server(1);
|
||||
},
|
||||
},
|
||||
enableSnippets: false,
|
||||
// tooltipContainer: '#code-editor'
|
||||
});
|
||||
});
|
||||
|
||||
if (!window.isIE) {
|
||||
ace.config.loadModule('ace/ext/language_tools', function () {
|
||||
editor.setOptions({
|
||||
enableBasicAutocompletion: false,
|
||||
enableLiveAutocompletion: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ace.config.loadModule('ace/ext/html_beautify', function (beautify) {
|
||||
editor.setOptions({
|
||||
autoBeautify: true,
|
||||
htmlBeautify: true,
|
||||
});
|
||||
window.beautifyOptions = beautify.options;
|
||||
});
|
||||
|
||||
editor.getSession().on('change', function() {
|
||||
if (window.isDisable) return;
|
||||
_postMessage({
|
||||
command: 'changeValue',
|
||||
data: editor.getValue(),
|
||||
referer: 'ace-editor'
|
||||
});
|
||||
});
|
||||
|
||||
on_init_server(2);
|
||||
|
||||
var editorSetValue = function(data) {
|
||||
window.isDisable = true;
|
||||
editor.setValue(data.value || '');
|
||||
editor.setReadOnly(!!data.readonly);
|
||||
if (!data.readonly) {
|
||||
editor.focus();
|
||||
editor.selection.clearSelection();
|
||||
editor.scrollToRow(0);
|
||||
}
|
||||
window.isDisable = false;
|
||||
};
|
||||
|
||||
var onThemeChanged = function(data) {
|
||||
try {
|
||||
data = window.JSON.parse(data)
|
||||
} catch(e) {
|
||||
data = {};
|
||||
}
|
||||
|
||||
if (!data.colors) return;
|
||||
|
||||
var theme_type = data.type || 'light',
|
||||
colors = data.colors;
|
||||
if ( !!colors ) {
|
||||
var _css_array = [':root ', '{'];
|
||||
for (var c in colors) {
|
||||
_css_array.push('--', c, ':', colors[c], ';');
|
||||
}
|
||||
_css_array.push('}');
|
||||
var _css = _css_array.join('');
|
||||
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = _css;
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
}
|
||||
|
||||
if (theme_type === 'dark')
|
||||
editor.setTheme("ace/theme/vs-dark");
|
||||
else
|
||||
editor.setTheme("ace/theme/vs-light");
|
||||
|
||||
};
|
||||
|
||||
var _postMessage = function(msg) {
|
||||
window.parent && window.JSON && window.parent.postMessage(window.JSON.stringify(msg), "*");
|
||||
};
|
||||
|
||||
var _onMessage = function(msg) {
|
||||
var data = msg.data;
|
||||
if (Object.prototype.toString.apply(data) !== '[object String]' || !window.JSON) {
|
||||
return;
|
||||
}
|
||||
var cmd, handler;
|
||||
|
||||
try {
|
||||
cmd = window.JSON.parse(data)
|
||||
} catch(e) {
|
||||
cmd = '';
|
||||
}
|
||||
|
||||
if (cmd && cmd.referer == "ace-editor") {
|
||||
if (cmd.command==='setValue') {
|
||||
editorSetValue(cmd.data);
|
||||
} else if (cmd.command==='setTheme') {
|
||||
onThemeChanged(cmd.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var fn = function(e) { _onMessage(e); };
|
||||
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent('onmessage', fn);
|
||||
} else {
|
||||
window.addEventListener('message', fn, false);
|
||||
}
|
||||
Reference in New Issue
Block a user