Forum Webscript.Ru

Программирование => JavaScript & JScript => Тема начата: NeoNox от 30 Ноября 2001, 15:23:43

Название: Редактирование новостей для идиотов
Отправлено: NeoNox от 30 Ноября 2001, 15:23:43
Вкратце ситуация такова:
Пришел ко мне начальник и говорит: то, что у нас каждый зарегистрированный пользователь может добавлять статьи на сайт. Это хорошо, но нужно сделать так, чтобы каждая домохозяйка(наверное с совковых времен это пошло,блин :( ) могла добавлять эти самые статьи. Поэтому нужно модифицировать раздел подачи новостей/статей и сделать сервисы его как в ворде. То есть убрать нафик тэги и это окошко textarea сделать визуальным аки на хотмейле.
Вот теперь я сижу и чешу репу, как это воплотить в жизнь...
То есть я подсознательно осознаю, что это делается с использованием активХ, но в каком направлении копать я не оч. хорошо понимаю. Может кто уже боролся с такими вещами? И если есть статьи или готовое решение? В знак благодарности могу там баннерами или деньгами поделиться...
Название: Редактирование новостей для идиотов
Отправлено: Daiz13 от 30 Ноября 2001, 16:00:14
У меня есть wysiwyg редактор на JavaScript, может поможет?
Название: Редактирование новостей для идиотов
Отправлено: NeoNox от 30 Ноября 2001, 16:01:07
Цитировать
У меня есть wysiwyg редактор на JavaScript, может поможет?

Сори, а что этоза зверь? Можно взглянуть?
Название: Редактирование новостей для идиотов
Отправлено: Daiz13 от 30 Ноября 2001, 17:43:21
Куда посылать?
Название: Редактирование новостей для идиотов
Отправлено: Макс от 30 Ноября 2001, 17:45:10
я как то писал такое, то я там такой интерфейс использовал (но только под IE5, хотя вроде и в IE4 должен работать)


Код: [Выделить]

// файл editor.js
var anons= null;
var news = null;
var stat= null;

function initEditor()
{
  anons = document.frames["anonsF"].document;
  anons.designMode = "On";
  news = document.frames["newsF"].document;
  news.designMode = "On";
  stat = \'anons\';
}

// делает элемент списка
function setList()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "InsertUnorderedList");

  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (ItalicButton.style.borderStyle == "inset")
  {
     ItalicButton.style.borderStyle = "outset";
  }
  else
  {
     ItalicButton.style.borderStyle = "inset";
  }
}



function execIt(range, command, interf, value)
{
  if (range.text.length > 0)
  {
     r = range.execCommand(command,interf,value);
range.select();
  }
  else
  {
range.pasteHTML(" ");
         range.moveStart("character", -1)
range.select();
     r = range.execCommand(command,interf,value);
range.text = "";
  }
  return r;
}

// делает текст толстым
function setBold()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "Bold");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (boldButton.style.borderStyle == "inset")
  {
     boldButton.style.borderStyle = "outset";
  }
  else
  {
     boldButton.style.borderStyle = "inset";
  }
}


// делает текст толстым
function setItalic()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "Italic");

  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (ItalicButton.style.borderStyle == "inset")
  {
     ItalicButton.style.borderStyle = "outset";
  }
  else
  {
     ItalicButton.style.borderStyle = "inset";
  }
}


// вставляет тег BR
function setBR()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }
 range.pasteHTML("
");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }
range.select();
}

function setColor()
{
   // если цвет не был выбран - error
   if (colorText.value == "")
    {
         alert("Вы не указали цвет !");
         return 0;
        }
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  if (redButton.style.borderStyle == "inset")
  {
     execIt(range,"RemoveFormat");
     redButton.style.borderStyle = "outset";
  }
  else
  {
     execIt(range,"ForeColor",true,"#"+colorText.value);
     redButton.style.borderStyle = "inset";
  }
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }
}

function getEditorHTML()
{
    if (stat == "news")
  {
 alert(news.body.innerHTML);
        }
  else
  {
 alert(anons.body.innerHTML);
        }

}

function insertHR()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }
  range.execCommand("InsertHorizontalRule");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }
}
function AddLink()
{//Identify selected text
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

if (!range=="")
{
    //Create link
     range.execCommand("CreateLink",1);
}
}
function addImage()
{//Identify selected text
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

if (!range=="")
{
    //Create image
     range.execCommand("insertImage",1);
}
}

function addColor1(colorN)
{
 colorText.value=colorN;
 document.all[\'colors\'].style.visibility="hidden";
 setColor();
}

function formSubmit()
{
 document.forma.anonsFF.value=anons.body.innerHTML;
 document.forma.newsFF.value =news.body.innerHTML;
 document.forma.submit();
 return true;
}

// выравнивание текста по левому краю
function alignL()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "JustifyLeft");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (justifyL.style.borderStyle == "inset")
  {
     justifyL.style.borderStyle = "outset";
  }
  else
  {
     justifyL.style.borderStyle = "inset";
  }
}
// выравнивание по центру.
function alignC()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "JustifyCenter");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (justifyC.style.borderStyle == "inset")
  {
     justifyC.style.borderStyle = "outset";
  }
  else
  {
     justifyC.style.borderStyle = "inset";
  }
}

// выравнивание по правому краю
function alignR()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "JustifyRight");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (justifyR.style.borderStyle == "inset")
  {
     justifyR.style.borderStyle = "outset";
  }
  else
  {
     justifyR.style.borderStyle = "inset";
  }
}

// выравнивание по двум краям
function alignF()
{
  if (stat == "news")
  {
 var range = news.selection.createRange();
        }
  else
  {
 var range = anons.selection.createRange();
        }

  execIt(range, "JustifyFull");
  if (stat == "news")
  {
 newsF.focus();
        }
  else
  {
 anonsF.focus();
        }

  if (justifyF.style.borderStyle == "inset")
  {
     justifyF.style.borderStyle = "outset";
  }
  else
  {
     justifyF.style.borderStyle = "inset";
  }
}
Название: часть 2
Отправлено: Макс от 30 Ноября 2001, 17:46:05
А HTML выглядел примерно так:
Код: [Выделить]



Визуальное создание новостей
   







ТЕКСТ:   



 #

Выравнивание:








Дата




Анонс новости:



Текст новости:




                                                                                                                                                                                                   
Название: Редактирование новостей для идиотов
Отправлено: NeoNox от 01 Декабря 2001, 14:54:25
Макс спасибо!:super: То что доктор прописал...
Я правда на МСДНе нашел. Так, для разнообразия, может кому нужно. :)
Название: Редактирование новостей для идиотов
Отправлено: NeoNox от 01 Декабря 2001, 14:58:24
Daiz13
csc@ukr.net
Спасибо!
Название: Редактирование новостей для идиотов
Отправлено: от 05 Декабря 2001, 14:53:20
http://www.aspalliance.com/Yusuf/Article10a.asp
Название: Редактирование новостей для идиотов
Отправлено: AleksBel от 19 Июня 2002, 20:08:17
Господа, код, который дал Макс, замечательно работает. Но только, если создаешь новый текст. Но у меня что-то не получается сделать редактирование уже имеющегося текста. То есть подгружается, например, из базы, текст, который надо отформатировать. Как это сделать? С IFRAME что-то не получается (непонятно, в какое место надо подгружать текст), попытался сделать через обычный textarea - запутался в скриптах. Может, кто подскажет.
Название: Редактирование новостей для идиотов
Отправлено: AleksBel от 19 Июня 2002, 20:12:15
Цитировать
Я правда на МСДНе нашел. Так, для разнообразия, может кому нужно.
Файл: code.zip
Скачан 22 раз(а).

Слушай, а как его запускать, файл editor.htc (расширение какое-то странное)
Название: Редактирование новостей для идиотов
Отправлено: Макс от 19 Июня 2002, 22:54:47
если при редактировании текст в файле хранится то просто для фреймов src пропиши к этому файлу. А так надо через javascript примерно такое:
\'">
(только за кавычками следи)
Название: Редактирование новостей для идиотов
Отправлено: AleksBel от 20 Июня 2002, 20:02:47
Макс, ты меня прости, но что-то у меня ничего не получается.
Чтобы при загрузке файла в редактируемой области уже был какой-то текст, я делаю так (ровно как ты написал):
Но ничего в этом IFRAME не выводится. И вроде с кавычками не запутался. Будь, другом, подскажи, что я делаю не так.
Спасибо.
Название: Редактирование новостей для идиотов
Отправлено: Sniper от 26 Февраля 2003, 14:36:43
Макс
А как у тебя выглядел файл add_visual.php??

Очень заинтересовал меня твой скрипт.
Помоги, ПЛИЗ!!!!
Название: Редактирование новостей для идиотов
Отправлено: Макс от 26 Февраля 2003, 17:42:18
Sniper
там все стандартно:
if (isset($_POST[\'submitF\')) {
  ... // проверка данных
  ... // если не было ошибок сохраняется страница
  ... // и редирект на список созданных страниц
}
?>
... // далее код который был указан выше

Примерно так.
Название: Редактирование новостей для идиотов
Отправлено: Jslab от 26 Февраля 2003, 19:01:32
To NeoNox >
Хотелось бы узнать судьбу того проекта :
" ...чтобы каждая домохозяйка могла ..."
и подобных тоже...
Предполагаю, что трудоёмкость и сложность подобного редактора такова, что дешевле и надёжней было бы
нанять web-редактора  который бы и работал с авторскими статьями... Не каждый автор и в Ворде сможет грамотно сделать, например,  двухколоночную статью с разбивкой по страницам...
Название: Редактирование новостей для идиотов
Отправлено: NeoNox от 26 Февраля 2003, 19:25:14
Jslab Денег немного заплатили, но занимался любовью с ним я долго.
Конечно дешевле знающего человека посадить, но там не требовалось разбивку колонок делать. Просто где-то заболдить, где-то италиком пройтись.
Вообшем It depends от пректа. Сейчас я бы так не страдал.
Название: Редактирование новостей для идиотов
Отправлено: Kwazar от 26 Февраля 2003, 23:31:20
NeoNox
интересно будет посмотреть это на действубщем проекте. ссылкой не поделишься?
Название: Редактирование новостей для идиотов
Отправлено: Макс от 27 Февраля 2003, 01:39:30
[moderator] 2 All
Предлагаю дальнейшее обсуждение результатов работы NeoNox-а перевести  в приват.
(Через пару дней я все мессаги, которые не имеют отношения к теме удалю)
[/moderator]
Название: Редактирование новостей для идиотов
Отправлено: I-v-a-n-n-n от 05 Августа 2003, 15:25:31
Что-то я не очень понимаю, что происходит с вставленной картинкой? Как я заметил, в конечный код (который подставляется в ) подставляется полный УРЛ. А сам файл? Остается на своем месте? А как сделать, чтобы картинка закачалась на сервак? Или тут РНР нужно использовать?
Название: Редактирование новостей для идиотов
Отправлено: Макс от 05 Августа 2003, 20:34:03
I-v-a-n-n-n
ИМХО в идеале должен быть менеджер изображений (который будет заниматься аплоадингом картинок на сервер) и скрипт будет вставлять лишь те изображения, которые уже были закачны на сервер.
И для вставки изображении использовать не имеющуюся функцию а свою, которая вставит в твой документ
Название: Редактирование новостей для идиотов
Отправлено: Tronyx от 05 Августа 2003, 20:58:49
Цитировать
I-v-a-n-n-n:
Или тут РНР нужно использовать?

Именно
Название: Редактирование новостей для идиотов
Отправлено: 4you от 15 Августа 2003, 16:36:34
Цитировать
Макс:
если при редактировании текст в файле хранится то просто для фреймов src пропиши к этому файлу. А так надо через javascript примерно такое:
\'">

Имею один фрейм, в который хочу всавить текст при занрузке страницы. Пытаюсь вставить:
onLoad="document.frames["idContent"].body.innerHTML=\'aaa\';"

код фрейма =
 и получаю ошибку. где я ошибся подскажите плиз.
Название: Редактирование новостей для идиотов
Отправлено: Макс от 16 Августа 2003, 13:08:53
4you
это я написал, не проверив. Такой код не работает.
http://forums.webscript.ru/showthread.php?s=&threadid=10886
Название: Редактирование новостей для идиотов
Отправлено: Oak от 28 Августа 2003, 18:11:15
http://mozile.mozdev.org/

А это чтобы в Mozilla работал  :)
Название: Редактирование новостей для идиотов
Отправлено: Alexandr от 12 Декабря 2003, 17:10:33
Как избавить от большого межстрочного интервала?
пробовал:
document.frames["sql"].document.body.style.lineHeight=\'11px\';
не помогает
ещё так
.....body.innerHTML=\'
 
\';
вообще байда получается
печатает как надо, а вот div переходит в дизайнМод (его можно таскать, изменять размеры.....)
Название: Редактирование новостей для идиотов
Отправлено: Alexandr от 12 Декабря 2003, 17:13:49
line-height не канает в принципе.....
вот свойства document.frames["sql"].document.body.style
fontVariant=
listStylePosition=
backgroundPositionX=
textDecorationLineThrough=false
textDecorationBlink=false
fontStyle=
textUnderlinePosition=
textDecorationOverline=false
font=
fontSize=11px
backgroundPosition=
direction=
fontFamily=\'Courier New\', Courier, monospace
textDecoration=
backgroundPositionY=
fontWeight=
rubyPosition=
position=
textDecorationUnderline=false
textDecorationNone=false
Название: Редактирование новостей для идиотов
Отправлено: Alexandr от 12 Декабря 2003, 17:16:29
Всё нашёл способ:
Код: [Выделить]
$sql=document.frames["sql"].document
$sql.designMode = "On";
$sql.open();
$sql.writeln(\'\');
$sql.close();
$sql.style;
$st=$sql.body.style
$st.fontFamily=\'\\\'Courier New\\\', Courier, monospace\';
$st.fontSize=\'11px\';
$st.backgroundColor=\'#E5F0F6\';
$st.lineHeight=\'11px\';
$sql.body.innerHTML=\'
\';
Название: Редактирование новостей для идиотов
Отправлено: CGVictor от 16 Декабря 2003, 13:48:34
Господа, все это хорошо, но как быть, если у клиента NNavigator (или Opera, Beonex и прочий NetCaptor)? DesignMode работает только в IExplorer и только начиная с версии 5.5 .
Так что же, остальные остаются ни с чем???
Название: Редактирование новостей для идиотов
Отправлено: Макс от 16 Декабря 2003, 14:20:45
CGVictor
Opera пока не позволяет WYSIWYG-редакторы
Для NN вроде есть плагин, но это слухи, я его ни разу не видел.
Мозила имеет возможность (в сети полно описаний).
IE4 - через DesignMode = On
IE5.5 -

Есть еще ActiveX для IE - не знаю с какими версиями работает
Название: Редактирование новостей для идиотов
Отправлено: CGVictor от 16 Декабря 2003, 16:14:14
Макс
Вот то-то и оно...
Если Мозилла позволяет - это уже замечательно. А то у меня чего-то не хочет...
Для IE - уже понял, сейчас сижу, пишу. Интересно, кстати, получается.

И все-таки:
Как быть с NN?
(Ну не хочу я BBCode делать!)
Название: Редактирование новостей для идиотов
Отправлено: Vic Pitman от 05 Ноября 2005, 15:06:20
Макс, хороший код, спасибо. Долго правда с ним разбирался, т.к. с половиной понятий до этого не сталкивался. Но вот только как редактировать готовый так и не понял. Елси указывать параметр src="источник" то при попытке редактирования появляется сообщение об ошибке "Разрешение отклонено". Что делать.