Очень продвинутый редактор Javascript WYSIWYG - PullRequest
Новая
       6

Очень продвинутый редактор Javascript WYSIWYG

0 голосов
/ 24 января 2009

Мне нужно решение, где пользователь мог бы ввести URL-адрес веб-страницы в моей системе. Страница будет загружена, и тогда пользователь сможет щелкнуть определенный раздел, который он хочет изменить. Поэтому в основном мне нужен способ отображения веб-страницы внутри моего приложения (возможно, с помощью фреймов, но я бы предпочел не иметь горизонтальную полосу прокрутки), а затем другой способ позволить пользователям выбирать блок текста. или элемент страницы.

Т.е., если блок текста находится в div, при наведении указателя мыши над текстом будет выделен элемент div с использованием тусклого зеленого цвета (при наведении курсора будет удалена эта граница / контур), а при нажатии на текст будет нарисована сплошная зеленая граница. вокруг него, чтобы показать, что он был выбран, а затем некоторое содержимое на моей странице покажет идентификатор div, и позволить пользователю указать некоторую другую информацию, которая мне нужна.

Таким образом, мне, вероятно, нужен способ получить все теги <div>s, <table>s, <span>s, <p>s и любые другие «контейнеры», а затем иметь возможность вызывать зависание / щелчок по ним для изменения их свойство style.border и возможность получения их идентификатора / имени,

Для блока текста граница могла бы работать, но как насчет изображений и тому подобного? Кроме того, что если <div> не имеет идентификатора / имени, как его можно указать?

Ответы [ 3 ]

3 голосов
/ 24 января 2009

Вы можете использовать <iframe> теги, а затем установить contentEditable = on. Таким образом, браузер предоставляет функции WYSIWYG. Границы и т. Д. Могут не работать, хотя. Какой-то код: 

var idno = 0;

function addEditor(parent, url) {
    parent.innerHTML += '<iframe src="' + url + '" id="edit' + idno + '"></iframe>';
    var el = document.getElementById("edit" + idno);
    el.contentEditable = true;
    return el;
}

addEditor(document.body, "http://google.com").innerHTML += "Hello!";

Должно работать.

2 голосов
/ 24 января 2009

Если они соответствуют вашему контексту, вы можете подумать об этом с помощью Adobe Flex или Microsoft Silverlight. Оба обеспечивают функциональность и детализацию управления, которую труднее реализовать в javascript или с помощью инфраструктуры, особенно если вам необходимо работать согласованно с несколькими браузерами в Windows, Mac и Linux.

Flex использует расширенную версию javascript для своего языка программирования. Silverlight сделал то же самое с версией 1, хотя с версией 2 они поддерживают только языки .NET (которые могут быть лучше, хуже или безразличны в зависимости от ваших потребностей).

Оба описывают себя как инструменты для RIA (Rich Internet Applications).

0 голосов
/ 24 января 2009

Это очень общий вопрос. Вокруг много систем управления контентом, которые предоставляют что-то вроде этого.

Кроме того, что если <div> не имеет идентификатора / имени, как его можно указать?

Вы можете идентифицировать узел в DOM по пути XPath. Пройдите вверх через parentNode, чтобы создать путь.

Для блока текста граница могла бы работать, но как насчет изображений и тому подобного?

Вы можете установить свойство border почти всех элементов в html.

...