Next Generation CMS :: Форум поддержки
Вы не зашли.
- Темы: Активные | Без ответов
Объявление
#52 2009-12-11 15:37:14
Re: Визивиг
В общем вот список всего того, что я творила... но так как я с DOM не очень хорошо дружу, надеюсь люди знающие поправят.
И ещё - в IE это вряд ли заведётся, так как у меня его нету, а делала я на локалке, поэтому не проверяла и лично мне надо было чтоб работало в опере. И ориентировалась только на админку.
1. Качаем редактор http://www.openwebware.com/openwysiwyg_v1.4.7.zip
2. Распаковываем и копируем папки style, popup,scripts,images в папку engine
3. в файлах /engine/skins/default/tpl/addnews.tpl , /engine/skins/default/tpl/editnews/edit.tpl , /engine/skins/default/tpl/static/edit.tpl , /engine/skins/default/tpl/static/add.tpl
перед
<form name="DATA_tmp_storage" вставляем
<script language="JavaScript" type="text/javascript" src="./scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="./scripts/wysiwyg-settings.js"></script>
<script language="javascript1.2">
WYSIWYG.attach('content');
</script>И собственно после этого редактор уже должен появиться...
Теперь уберём ненужные панели старого редактора
3. В этих же файлах addnews.tpl и edit.tpl берём в <!-- комментарии--><br /> {smilies} <br /> (получается так <!-- <br /> {smilies} <br />--> )
4. в файлах /engine/skins/default/tpl/qt_news.tpl , /engine/skins/default/tpl/qt_static.tpl
оставляем такое содержание
<span id="save_area" style="display: block;"></span>
<div id="tags">
<a onclick="try{document.forms['DATA_tmp_storage'].area.value='{area}';} catch(err){;} window.open('{php_self}?mod=files&area={area}', '_Addfile', 'height=600,resizable=yes,scrollbars=yes,width=800');return false;" target="DATA_Addfile" title='{l_tags.file}'><img src="{skins_url}/tags/file.gif" width="16" height="16" alt="{l_tags.file}" /></a>
<a onclick="try{document.forms['DATA_tmp_storage'].area.value='{area}';} catch(err){;} window.open('{php_self}?mod=images&area={area}', '_Addimage', 'height=600,resizable=yes,scrollbars=yes,width=800');return false;" target="DATA_Addimage" title='{l_tags.image}'><img src="{skins_url}/tags/image.gif" width="16" height="16" alt="{l_tags.image}" /></a>
</div>Всё остальное - удалить\<!--закомментировать -->
5. Начинаем пляску с бубном.
6. открываем /engine/scripts/wysiwyg.js
В начале идут настройки -
можно обратить внимание на this.Width this.Height - размер редактора
this.DefaultStyle - задать параметры шрифта, чтобы он не отличался от используемого на сайте
По пути можно попереводить текстовые фразы на русский
доходим до this.Toolbar[0] = new Array( ... this.Toolbar[1] = new Array(... в которых можем поубирать ненужные для отображения элементы форматирования
так же в this.Toolbar[1] = new Array( добавляем
"spoiler",
"nextpage",
"more",
"hide"- это элементы которые мы будем прикручивать (!!! Обращаем внимание на запятые, они должны быть после каждого элемента кроме последнего)
7. Скопируем из папки /engine/skins/default/tags файлы "spoiler.gif","nextpage.gif","more.gif","hide.gif" в папку /engine/images/
8. Всё в том же wysiwyg.js доходим до большого списка
// List of available actions and their respective ID and images
ToolbarList: {
//Name buttonID buttonTitle buttonImage buttonImageRolloverставим запятую после 'maximize_on.gif']
и добавляем
"spoiler": ['spoiler', 'Разворачиваемый текст', 'spoiler.gif', 'spoiler.gif'],
"hide": ['hide', 'Скрытие от незарегистрированных', 'hide.gif', 'hide.gif'],
"more": ['more', 'Отделение анонса', 'more.gif', 'more.gif'],
"nextpage": ['nextpage', 'Разбить на страницы', 'nextpage.gif', 'nextpage.gif']Перед
/**
* Insert or modify a link
*
* @param {String} href The url of the link
* @param {String} target Target of the linkВставляем
insertPreview: function(src,cls,width, height, align, border, alt, hspace, vspace,n,srcl) {
// get editor
var doc = this.getEditorWindow(n).document;
// get selection and range
var sel = this.getSelection(n);
var range = this.getRange(sel);
var lin = doc.createElement("a");
WYSIWYG_Core.setAttribute(lin, "href", srcl);
WYSIWYG_Core.setAttribute(lin, "target", "_blank");
var img = this.findParent("img", range);
img = doc.createElement("img");
// set the attributes
WYSIWYG_Core.setAttribute(img, "src", src);
WYSIWYG_Core.setAttribute(img, "style", "width:" + width + ";height:" + height);
if(align != "") { WYSIWYG_Core.setAttribute(img, "align", align); } else { img.removeAttribute("align"); }
WYSIWYG_Core.setAttribute(img, "border", border);
WYSIWYG_Core.setAttribute(img, "alt", alt);
WYSIWYG_Core.setAttribute(img, "hspace", hspace);
WYSIWYG_Core.setAttribute(img, "vspace", vspace);
WYSIWYG_Core.setAttribute(img, "class", cls);
img.removeAttribute("width");
img.removeAttribute("height");
// Check if IE or Mozilla (other)
if (WYSIWYG_Core.isMSIE) {
range.select();
lin.innerHTML = range.htmlText;
range.pasteHTML(img.outerHTML);
range.pasteHTML(lin.outerHTML);
}
else {
var node = range.startContainer;
var pos = range.startOffset;
lin.appendChild(img);
this.insertNodeAtSelection(lin, n);
}
},Находим
// Return
case "Return":
location.replace(this.config[n].Opener);
break;Добавляем ниже
case "spoiler":
this.myparetag(n,"spoiler");
break;
case "hide":
this.myparetag(n,"hide");
break;
case "more":
this.myparetag(n,"more");
(если more используется как [more][/more] если нет, то this.myinstag(n,"more");
break;
case "nextpage":
this.myinstag(n,"nextpage");
break;Находим
/* ---------------------------------------------------------------------- *\
Function : insertNodeAtSelection()Вставляем перед этим
myparetag: function(n,param){
var opspoiler="["+param+"]";
var clspoiler="[/"+param+"]";
doc = WYSIWYG.getEditorWindow(n).document;
var sel = this.getSelection(n)
var range = sel.getRangeAt(0);
newsel=opspoiler+range+clspoiler;
sel.removeAllRanges();
range.deleteContents();
// remove content of current selection from document
range.deleteContents();
if (WYSIWYG_Core.isMSIE) {
this.getEditorWindow(n).document.selection.createRange().pasteHTML(newsel);
}
else {
var el = this.getEditorWindow(n).document.createTextNode(newsel);
el .innerHTML = el
;
this.insertNodeAtSelection(el , n);
}
},
myinstag: function(n,tag){
var mytag="[!--"+tag+"--]";
doc = WYSIWYG.getEditorWindow(n).document;
var sel = this.getSelection(n)
var range = sel.getRangeAt(0);
if (WYSIWYG_Core.isMSIE) {
this.getEditorWindow(n).document.selection.createRange().pasteHTML(mytag);
}
else {
var el = this.getEditorWindow(n).document.createTextNode(mytag);
el .innerHTML = el ;
this.insertNodeAtSelection(el , n);
}
},
В engine/skins/default/tpl/images/table.tpl перед </script>
добавляем
function insertImage (src,width, height, align, border, alt, hspace, vspace,n) {
// close the popup if the opener does not hold the WYSIWYG object
if(!window.opener) window.close();
// bind objects on local vars
var WYSIWYG = window.opener.WYSIWYG;
var WYSIWYG_Core = window.opener.WYSIWYG_Core;
var WYSIWYG_Table = window.opener.WYSIWYG_Table;
var cls;
WYSIWYG.insertImage(src,width, height, align, border, alt, hspace, vspace,n);
window.close();
}
function insertPreview (src,width, height, align, border, alt, hspace, vspace,n,srcl) {
// close the popup if the opener does not hold the WYSIWYG object
if(!window.opener) window.close();
// bind objects on local vars
var WYSIWYG = window.opener.WYSIWYG;
var WYSIWYG_Core = window.opener.WYSIWYG_Core;
var WYSIWYG_Table = window.opener.WYSIWYG_Table;
var cls;
WYSIWYG.insertPreview(src,width, height, align, border, alt, hspace, vspace,n,srcl);
window.close();
}
В engine/skins/default/tpl/files/table.tpl перед </script>
добавляем
function insertHyperLink(href, target, style, styleClass, name,n) {
if(!window.opener) window.close();
// bind objects on local vars
var WYSIWYG = window.opener.WYSIWYG;
var WYSIWYG_Core = window.opener.WYSIWYG_Core;
var WYSIWYG_Table = window.opener.WYSIWYG_Table;
// insert link
WYSIWYG.insertLink(href, target, style, styleClass, name,n );
window.close();
}в /engine/includes/inc/filemanagment.php
находим
if ($type == 'image') {
$tvars['vars']['insert_file'] =ДО вставляем
$align='left';
$border='0';
$vspace='2';
$hspace='2';
$alt='изображение';
$target='_blank';
$style='';
$styleClass='filelink';
$name='';- эти параметры настроить "по вкусу"
Содержимое
if ($type == 'image') {
.....
} else {
}
заменяем на
if ($type == 'image') {
$tvars['vars']['insert_file'] = '<a href="javascript:insertImage(\''.$fileurl.'\',\''.$row['width'].'\',\''.$row['height'].'\',\''.$align.'\',\''.$border.'\',\''.$alt.'\',\''.$vspace.'\',\''.$hspace.'\',\'content\')" title="Insert file"><img src="'.skins_url.'/images/insert_image.gif" border="0"/></a>
';
$tvars['vars']['insert_thumb'] = $row['preview'] ? '<a href="javascript:insertImage(\''.$thumburl.'\',\'\',\'\',\''.$align.'\',\''.$border.'\',\''.$alt.'\',\''.$vspace.'\',\''.$hspace.'\',\'content\')"" title="Insert file"><img src="'.skins_url.'/images/insert_thumb.gif" border="0"/></a>' : '';
$tvars['vars']['insert_preview'] = $row['preview'] ? '<a href="javascript:insertPreview(\''.$thumburl.'\',\'\',\'\',\''.$align.'\',\''.$border.'\',\''.$alt.'\',\''.$vspace.'\',\''.$hspace.'\',\'content\',\''.$fileurl.'\')"" title="Insert file"><img src="'.skins_url.'/images/insert_preview.gif" border="0"/></a>' : '';
$tvars['vars']['view_file'] = '<a target="_blank" href="'.$fileurl.'"><img src="'.skins_url.'/images/insert_image.gif" border="0"/></a>';
$tvars['vars']['view_thumb'] = $row['preview'] ? '<a target="_blank" href="'.$thumburl.'"><img src="'.skins_url.'/images/insert_thumb.gif" border="0"/></a>' : '';
} else {
$tvars['vars']['insert_file'] = '<a href="javascript:insertHyperLink( \''.$fileurl.'\',\''.$target.'\',\''.$style.'\',\''.$styleClass.'\',\''.$name.'\',\'content\')">'.$lang['insert'].'</a>';
}В файле в /engine/includes/inc/functions.inc.php заменяем все <!--nextpage--> на [!--nextpage--] (скобки <> при вставке превращаются в < >) и если используете <!--more--> на [!--more--]
Вроде бы всё. Вот только надо в скриптах бы ещё получше проверку сделать на наличие незакрытых тегов внутри... но я в JS не очень :-(
Изменено CyberMama (2009-12-11 20:40:47)
Не в сети
посмотрю вечерком#54 2009-12-11 16:23:01
Re: Визивиг
даааа.... работа была проделана!
если это ещё и работает то CyberMama ваще респектище!
Не в сети
#55 2009-12-11 17:01:12
Re: Визивиг
Ага, ночка выдалась романтическая... у меня работает... ещё замечу - для вставки файла - надо что-нибудь выделить
т.е. пишем типа "скачать файл такой-то" выделяем и вставляем
Н и разумеется перед добавлением - должна стоять птичка "Использовать HTML"
Не в сети
#56 2009-12-12 01:57:25
Re: Визивиг
CyberMama, а ты не пробовала вот этот WYSIWYG? А то вроде бы привлекательный, и не очень то весомый. 
Для комментов на сайте то что надо. Наверное. 
Изменено Евгений (2009-12-12 02:20:38)
I ♥ NGeneration CMS
Не в сети
#62 2009-12-23 20:16:49
Re: Визивиг
Готовлю :-)) На самом деле тебе ящик пива - редактор действительно классный - у него есть плагин который ещё и в bb-коды всё экспортирует и оч. удобно включается\выключается - т.е. нет проблем особых со вставкой картинок и файлов из встроенных менеджеров. Вот сейчас как раз и занимаюсь тем, что пытаюсь есь формат тегов к одному свести. И код делает в общем-то неплохо
Скажите мне - что валиднее - em, i, b, strong ? или вообще лучше всё в css переводить ?
И ещё интересно - насколько актуальны - цвет фона текста и выбор шрифта (просто имхо всё это должно стандартно-css-ным быть и тупо в одной странице несколькими шрифтами писать и тем более радугу фонами делать)
Изменено CyberMama (2009-12-23 20:26:29)
Не в сети
#65 2009-12-23 22:34:36
Re: Визивиг
CyberMama, насчет валидности, мне кажется что лучше все в css, но если уж очень хочется с тегами, то конечно же b и i, так как strong уже немного устарел, и в общем то сравнялся с b. Для поисковой оптимизации сайта, лучше использовать теги, но если топ 10 не требуется, то можно и без них.
P.S. Это лично мое мнение, если кто то более осведомлен по этой теме, то прошу меня поправить.
I ♥ NGeneration CMS
Не в сети
#66 2009-12-24 04:17:01
Re: Визивиг
В SVN выложено обновление.
Теперь в настройках системы можно выбирать режим редактирования:
* в одном окне (как сейчас)
* в двух окнах (как было раньше - короткая и полная новости разнесены в разные textarea)
Это должно решить проблему с визивигами
Не в сети
#71 2009-12-24 22:19:58
Re: Визивиг
Еще один момент нашелся, если редактируешь новость и в краткую ничего не пишешь, то после нажатия кнопки редактировать, полная новость вставляется в краткую, но вставляется правильно ) <!--more--> перед контентом добавляет.
Не в сети