Получение атрибутов элементов в редактируемом iframe ondblclick - PullRequest
Новая
       7

Получение атрибутов элементов в редактируемом iframe ondblclick

1 голос
/ 08 января 2012

Я занимаюсь разработкой wysiwyg HTML-редактора с использованием javascript и редактируемого iframe. Прежде чем приступить к разработке редактора, я провел некоторые исследования в других редакторах HTML, которые используют javascript и iframes (включая CKEditor ), и есть одна особенность, которую я пытаюсь дублировать.

В некоторых редакторах HTML на основе iframe / JS, если пользователь желает получить доступ или отредактировать атрибуты элемента (например, размеры изображения, URL-адрес гиперссылки, ширину таблицы), он может просто дважды щелкнуть элемент, и появится модальный div с текстовые поля, содержащие значения атрибутов этого элемента и / или элементов этого элемента.

До сих пор самым близким к разработке такой функции было создание сценария, который предупреждает HTML-код области внутри фрейма, на которой пользователь дважды щелкает. Я добавил этот код на свою HTML-страницу; 

<iframe name="wysiwyg" id="wysiwyg" onload="dblClick();"></iframe>

и добавил этот код в мой файл JavaScript; 

function dblClick(){
        document.getElementById("wysiwyg").contentWindow.document.ondblclick=dblClicked;
        window.frames["wysiwyg"].document.body.ondblclick=dblClicked;
}

function dblClicked (){
        txt = wysiwyg.document.selection.createRange().htmlText;
        alert(txt);
}

Проблема в том, что этот код работает только тогда, когда пользователь дважды щелкает и выделяет часть текста, например, двойной щелчок по выделенному жирному тексту предупреждает пользователя об этом куске кода; 

<b>text</b>

Все, что я дважды нажимаю, предупреждает об ошибке. Кроме того, он работает правильно только в Internet Explorer. Когда я тестировал его в Firefox, Opera, Chrome и Safari, сценарий либо не работал, либо не работал должным образом (в Firefox сценарий предупреждал об ошибках сразу после загрузки страницы).

Мне нужен скрипт, который позволяет конечному пользователю просматривать все свойства любого элемента, на котором они дважды щелкают в редактируемом iframe, и работает во всех основных браузерах.

Я знаю, что было бы проще просто использовать существующий редактор wysiwyg, но я предпочитаю создавать свой собственный с нуля, поскольку мне нравится этот вызов. Кроме того, я знаю, что CKEditor, по-видимому, не использует iframe, как мой, но я ссылаюсь на него как на пример той функциональности, которой я хочу достичь.

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 08 января 2012

Здесь есть различные проблемы / недоразумения:

  • Вы используете только старый выбор IE и TextRange API, который не поддерживается в других браузерах;
  • Вы, похоже, не знаете, как получить доступ к документу iframe и подключаете обработчик dblclick дважды, без необходимости.
  • CKEditor использует iframes

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

var iframeWin;

function dblClick() {
    iframeWin = document.getElementById("wysiwyg").contentWindow;
    iframeWin.document.ondblclick = dblClicked;
}

function dblClicked(evt) {
    evt = evt || iframeWin.event;
    var target = evt.target || evt.srcElement;
    alert(target.tagName);
}
0 голосов
/ 08 января 2012

Я бы посоветовал пошагово разобраться с проблемой, а не пытаться объединить все сразу. Например, я бы разбил это как:

  1. Сначала выясните, какой код нужно реализовать, чтобы обеспечить желаемое поведение двойного щелчка на текущей веб-странице . Возможно, это потребует некоторого простого кода для итеративного назначения обработчика двойного щелчка каждому элементу на странице, а не только самому элементу <body>. В конечном счете, это код, который будет работать внутри вашего <iframe>, и вы можете поместить его туда, либо добавив его непосредственно в <iframe> HTML, либо запустив некоторый код в контексте вызывающей страницы, как вы это делаете в настоящее время. .

  2. При необходимости реорганизовать реализацию обработчика двойного щелчка, чтобы была вызвана одна функция, которой передается вся информация, необходимая для обработки щелчка по любому элементу. Определите эту функцию в легко доступной области, например, window._doubleClickHandler. Это определение функции принадлежит вашему <iframe>.

  3. Удалите определение функции, которое вы придумали на шаге # 2, но оставьте на месте весь код, который ссылается на него / использует его. Теперь на вашей вмещающей странице есть удобная точка для взаимодействия с событиями кликов, исходящими из <iframe>.

  4. Когда загружается <iframe>, включающая страница может предоставить свое собственное определение для функции, которую вы определили на шаге № 2, а затем удалили на шаге № 3.

И если вы пройдете через все это, я бы посоветовал, что есть более полезные вещи, которые вы могли бы сделать, а затем показать предупреждение с разметкой выбранного элемента внутри него. Как автоматический выбор / выделение соответствующей разметки в редакторе HTML или загрузка фрагмента разметки в редактируемый интерфейс лайтбокса, где пользователь может вносить изменения, а затем автоматически применять их к редактируемому HTML-документу.

...