1 (изменено: SergeyA, 2012-07-25 09:36:47)

Тема: Редактор с подсветкой синтаксиса (HTA, JS)

Как сделать цикл чтобы он обрабатывал всё что введётся в <div> и заменял на нужное, поставил while но он полностью тормазит весь скрипт.

<html>
    <title>Editor with syntax highlighting</title>
    <head>
        <META Http-equiv="MSThemeCompatible" content="Yes">
        <script>
            function GUISetPosition(Left, Top, Width, Height){
                if (Left == -1){ Left = ((window.screen.width / 2) - (Width / 2)); }
                if (Top == -1){ Top = ((window.screen.height / 2) - (Height / 2)); }
                window.resizeTo(Width, Height);
                window.moveTo(Left, Top);
            }
            function Highlight(){
                while (true) {
                    var str = window.document.getElementById("QControlEdit").innerHTML;
                    var str = str.replace('#include', '<font color="#D67FFF"><kbd><em>#include</em></kbd></font>');
                    window.document.getElementById("QControlEdit").innerHTML = str;
                    break;
                }
            }
            GUISetPosition(-1, -1, 669, 338);
        </script>
        <HTA:APPLICATION ID="oHTA"
            APPLICATIONNAME="WMPTour"
            BORDER="thick"
            BORDERSTYLE="normal"
            CAPTION="yes"
            maximizeButton="yes"
            minimizeButton="yes"
            ICON="explorer.exe"
            SHOWINTASKBAR="no"
            SINGLEINSTANCE="yes"
            SYSMENU="yes"
            VERSION="1.0"
            WINDOWSTATE="normal"
        />
    </head>
    <style>
        * {
            margin: 0; 
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: none;
        }
        .ClassEditor {
            position: releative;
            left: 0px;
            top: 0px;
            padding: 5px;
            background-color: #F4F4F4;
            width: 100%;
            height: 100%;
            overflow: auto;
            color: #808080;
        }
    </style>
    <body onLoad="Highlight();">
        <div id="QControlEdit" class="ClassEditor" contenteditable="true">
            #include
        </div>
    </body>
</html>

2

Re: Редактор с подсветкой синтаксиса (HTA, JS)

Коллега, цвета выделения, типы циклов и, даже, язык программирования рекомендую оставить на потом. Попробуйте продумать логику работы самого редактора. То, что Вы привели в своём посте, работать не будет. Точнее, будет работать настолько активно, что на отображение результатов работы просто не останется времени.

3

Re: Редактор с подсветкой синтаксиса (HTA, JS)

Serge Yolkin пишет:

будет работать настолько активно, что на отображение результатов работы просто не останется времени.

Я догадался, по этому и написал, не нужны советы, нужны решения.

4

Re: Редактор с подсветкой синтаксиса (HTA, JS)

Цикл не нужен. То, что вы хотите, выполняется, как XSL-преобразование над XML-документом.
Возьмите стандартный файл Windows: msxml4.exe Создайте XSL нужного формата, и примените к Вашему HTML-документу.

5 (изменено: Serge Yolkin, 2012-07-26 12:14:55)

Re: Редактор с подсветкой синтаксиса (HTA, JS)

SergeyA
Решения чего нужны? В рамках заданной Вами логики - непрерывная проверка содержимого DIV'а - я не вижу корректного решения. Попробуйте привязать проверку к событию keypress, например, или keyup. trash0000 предложил интересный вариант, правда, я с XSLT-преобразованиями ещё не на "ты".

trash0000
В моей винде нет "стандартного файла Windows: msxml4.exe".
W7HB32SP1

6

Re: Редактор с подсветкой синтаксиса (HTA, JS)

Возможно, вы правы, и msxml4.exe  - нестандартный компонент Windows. Погуглите, "msxml".

Но физически, это представляет собой один файл msxml.exe и msxml4.dll где-то в недрах system32. Причем, dll зарегистрирована, как класс. Но ее можно не регистрировать, а, просто, подложить рядом к msxml.exe

XSLT-преобразование - прекрасная вещь для временной подсветки синтаксиса. Причем, можно написать, как прямое, так и обратное преобразование. Этот проект - хороший повод изучить XSLT-преобразования. Фактически, XSLT - это "великий и могучий" язык программирования, решающий специфическую задачу обхода и преобразования одних древовидных структур XML в другие XML.

Однако, немного поразмыслил. Есть ложка дегтя. XSLT работает только с правильными XML. А термин "HTML-редактор" предполагает, что текст в редакторе может в быть невалидным XML-кодом. Тогда вся эта кухня с XSLT работать не будет. В этом случае, в самом деле, эффективнее будет прямой цикл по тексту в редакторе и замена одних комбинаций текста (идентифицированных, как теги) на другие комбинации текста.