Редактирование новостей для идиотов

[NeoNox]

Вкратце ситуация такова:
Пришел ко мне начальник и говорит: то, что у нас каждый зарегистрированный пользователь может добавлять статьи на сайт. Это хорошо, но нужно сделать так, чтобы каждая домохозяйка(наверное с совковых времен это пошло,блин ) могла добавлять эти самые статьи. Поэтому нужно модифицировать раздел подачи новостей/статей и сделать сервисы его как в ворде. То есть убрать нафик тэги и это окошко textarea сделать визуальным аки на хотмейле.
Вот теперь я сижу и чешу репу, как это воплотить в жизнь...
То есть я подсознательно осознаю, что это делается с использованием активХ, но в каком направлении копать я не оч. хорошо понимаю. Может кто уже боролся с такими вещами? И если есть статьи или готовое решение? В знак благодарности могу там баннерами или деньгами поделиться...

[Daiz13]

У меня есть wysiwyg редактор на JavaScript, может поможет?

[NeoNox]

У меня есть wysiwyg редактор на JavaScript, может поможет?

Сори, а что этоза зверь? Можно взглянуть?

[Daiz13]

Куда посылать?

[Макс]

я как то писал такое, то я там такой интерфейс использовал (но только под 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";
  }
}


[Макс]

А HTML выглядел примерно так:

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

   

ТЕКСТ:     # Выравнивание:
Дата Анонс новости: Текст новости:                                                                                                                                                                                                     Добавить ссылку Добавить фотку Список

[NeoNox]

Макс спасибо!:super: То что доктор прописал...
Я правда на МСДНе нашел. Так, для разнообразия, может кому нужно.

[NeoNox]

Daiz13
csc@ukr.net
Спасибо!

http://www.aspalliance.com/Yusuf/Article10a.asp

[AleksBel]

Господа, код, который дал Макс, замечательно работает. Но только, если создаешь новый текст. Но у меня что-то не получается сделать редактирование уже имеющегося текста. То есть подгружается, например, из базы, текст, который надо отформатировать. Как это сделать? С IFRAME что-то не получается (непонятно, в какое место надо подгружать текст), попытался сделать через обычный textarea - запутался в скриптах. Может, кто подскажет.

[AleksBel]

Я правда на МСДНе нашел. Так, для разнообразия, может кому нужно.
Файл: code.zip
Скачан 22 раз(а).

Слушай, а как его запускать, файл editor.htc (расширение какое-то странное)

[Макс]

если при редактировании текст в файле хранится то просто для фреймов src пропиши к этому файлу. А так надо через javascript примерно такое:
\'">
(только за кавычками следи)

[AleksBel]

Макс, ты меня прости, но что-то у меня ничего не получается.
Чтобы при загрузке файла в редактируемой области уже был какой-то текст, я делаю так (ровно как ты написал):
Но ничего в этом IFRAME не выводится. И вроде с кавычками не запутался. Будь, другом, подскажи, что я делаю не так.
Спасибо.

[Sniper]

Макс
А как у тебя выглядел файл add_visual.php??

Очень заинтересовал меня твой скрипт.
Помоги, ПЛИЗ!!!!

[Макс]

Sniper
там все стандартно:
<?
if (isset($_POST[\'submitF\')) {
  ... // проверка данных
  ... // если не было ошибок сохраняется страница
  ... // и редирект на список созданных страниц
} 
?>
... // далее код который был указан выше

Примерно так.