Ne işe yarar:
Ana Sayfa: http://www.ecardmax.com/WYSIWYG, İngilizcede "What You See Is What You Get" teriminin başharflerinden oluşan bir bilgisayar terimidir. Türkçesi tam olarak oturmasa da, Ne görüyorsanız onu alırsınız denebilir. Yani ekranda görülene çok benzer bir çıktı alabileceğiniz ortamları tanımlar.
Kelime işlemci (word processor) ve yazı değiştiriciler (editör) kategorisinde kullanılmaktadır. Terim, uygulamalardan ziyade, bu amaçla kullanılan arabirimlerin özelliğidir.
Bir WYSIWYG aracını diğer uygulamalardan ayıran en önemli özellik, yeni yaratılan veya değiştirilen bir bilgisayar nesnesinin sonlandırılmış halinin (önizlemesinin) gerçek veya gerçeğe yakın zamanlı olarak gösterebilmesidir. Yazı editörleri arasında, bu farklılık sayesine WYSIWYG editörleri daha çok tercih edilmektedir.
WYSIWYG tanımında göz önüne alınması gereken bir diğer nokta, aslında hiçbir editörün gerçek anlamda birebir önizleme yapmadığı fakat bu terimin bilgisayar terminolojisine bu şekilde yerleştiğidir. Örneğin bir WYSIWYG yazı editörü genelde tüm değiştiricilerde olduğu gibi bit atamalı olarak haritalanmış (bit-map veya bitmap) fontlar kullanmaktadır. Bu durumda aslında bilgisayar ekranında görülen orijinal dosya ile bu dosyadan kağıda basılacak olan doküman arasında gözle hissedilir bir farka yol açmaktadır; zira standart bir lazer yazıcı ortalama 300 dpi çözünürlüğünde iken, iyi bir bilgisayar ekranının çözünürlüğü 100 dpi civarındadır.
kaynak: wikipedia
Demo: http://www.ecardmax.com/smf_111
Download: http://www.ecardmax.com/ehelpmax/resource/download/f390f754/hoteditor_smf_mod.zip
Hızlı cevapta hoteditor olmasın diyorsanız display.template.php dosyasını düzenlemeyiniz.
Eğer olsun diyorsanız
Not Forum seçeneklerinide "Url'leri göstermeden kullan " seçeneğini kapatın. Aksi takdirde gözükmez
Kurulum
########DEĞİŞİKLİK YAPILACAK DOSYALAR##########
## Themes/default/Display.template.php,
## Themes/default/Post.template.php,
## Themes/default/Profile.template.php,
## Themes/default/script.js
## Themes/classic/Post.template.php
## Sources/Subs.php
##
#-----[ AÇ]------------------------------------------
Kod:
Themes/default/Display.template.php
#-----[ BUL]------------------------------------------
Kod:
<textarea cols="75" rows="7" style="width: 95%; height: 100px;" name="message" tabindex="1"></textarea><br />
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
<!--//HotEditor MOD - Quick Reply -->
<textarea style="visibility:hidden;position:absolute;top:-20;left:-20;width:1px;height:1px" cols="75" rows="7" id="message" name="message" tabindex="1"></textarea>
<style type="text/css">@import url(richedit/styles/office2007/style.css);</style>
<script language="JavaScript" type="text/javascript" src="richedit/editor.js?version=4.2"></script>
<script language="JavaScript" type="text/javascript">
var getdata =document.getElementById("message").value;
Instantiate("min","editor", getdata , "100%", "150px");
function get_hoteditor_data(){
if (HTML_ON == "no"){
alert ("Please uncheck the HTML checkbox");
return false;
}
else{
setCodeOutput();
var bbcode_output=document.getElementById("hoteditor_bbcode_ouput_editor").value;//Output to BBCode
document.getElementById("message").value = bbcode_output;
}
}
</script><br />
<!--//HotEditor MOD Quick Reply -->
#-----[ BUL]------------------------------------------
Kod:
var smf_template_body_edit = \'<div id="error_box" style="padding: 4px; color: red;"></div><textarea class="editor" name="message" rows="12" style="width: 94%; margin-bottom: 10px;">%body%</textarea><br /><input type="hidden" name="sc" value="', $context['session_id'], '" /><input type="hidden" name="topic" value="', $context['current_topic'], '" /><input type="hidden" name="msg" value="%msg_id%" /><div style="text-align: center;"><input type="submit" name="post" value="', $txt[10], '" onclick="return modify_save(\\\'' . $context['session_id'] . '\\\');" accesskey="s" /> ', $context['show_spellchecking'] ? '<input type="button" value="' . $txt['spell_check'] . '" onclick="spellCheck(\\\'quickModForm\\\', \\\'message\\\');" /> ' : '', '<input type="submit" name="cancel" value="', $txt['modify_cancel'], '" onclick="return modify_cancel();" /></div>\';
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
//HotEditor MOD QUICK EDIT / MODIFY POST
var edit_session_id = "', $context['session_id'], '";
var smf_template_body_edit = \'<div id="error_box" style="padding: 4px; color: red;"></div><iframe frameborder=0 width=100% height=550px src="hoteditor_quickedit.html" scrolling=no target="_top"></iframe><textarea style="visibility:hidden;width:1px;height:1px" id="message" class="editor" name="message" rows="12" style="width: 94%; margin-bottom: 10px;">%body%</textarea><input type="hidden" name="sc" value="', $context['session_id'], '" /><input type="hidden" name="topic" value="', $context['current_topic'], '" /><input type="hidden" name="msg" value="%msg_id%" /><div style="text-align: center;"><input type="hidden" name="post" value="', $txt[10], '" onclick="return modify_save(\\\'' . $context['session_id'] . '\\\');" accesskey="s" /> ', $context['show_spellchecking'] ? '<input type="button" value="' . $txt['spell_check'] . '" onclick="spellCheck(\\\'quickModForm\\\', \\\'message\\\');" /> ' : '', '<input type="hidden" name="cancel" value="', $txt['modify_cancel'], '" onclick="return modify_cancel();" /></div>\';
#-----[ AÇ]------------------------------------------
Kod:
Themes/default/Post.template.php
#-----[ BUL]------------------------------------------
Kod:
// Finally the most important bit - the actual text box to write in!
echo '
<tr>
<td valign="top" align="right"></td>
<td>
<textarea class="editor" name="', $context['post_box_name'], '" rows="', $context['post_box_rows'], '" cols="', $context['post_box_columns'], '" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" tabindex="', $context['tabindex']++, '"', isset($context['post_error']['no_message']) || isset($context['post_error']['long_message']) ? ' style="border: 1px solid red;"' : '', '>', $message, '</textarea>
</td>
</tr>';
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
// Finally the most important bit - the actual Hoteditor box to write in!
//HotEditor MOD
print<<<EOF
<tr>
<td valign="top" align="right"></td>
<td>
<textarea style="visibility:hidden;position:absolute;top:-20;left:-20;width:1px;height:1px" class="editor" id="hoteditor_holder" name="$context[post_box_name]" >$message</textarea>
<style type="text/css">@import url(richedit/styles/office2007/style.css);</style>
<script language="JavaScript" type="text/javascript" src="richedit/editor.js?version=4.2"></script>
<script language="JavaScript" type="text/javascript">
var getdata =document.getElementById("hoteditor_holder").value;
getdata=getdata.replace(/\[S\]/gi,"[STRIKE]");
getdata=getdata.replace(/\[\/S\]/gi,"[/STRIKE]");
Instantiate("max","editor", getdata , "100%", "300px");
function get_hoteditor_data(){
if (HTML_ON == "no"){
alert ("Please uncheck the HTML checkbox");
return false;
}
else{
setCodeOutput();
var bbcode_output=document.getElementById("hoteditor_bbcode_ouput_editor").value;//Output to BBCode
document.getElementById("hoteditor_holder").value = bbcode_output;
}
}
</script>
</td>
</tr>
EOF;
#-----[ BUL]------------------------------------------
Kod:
foreach ($smiley_row['smileys'] as $smiley)
echo '
<a href="javascript:void(0);" onclick="replaceText(\' ', $smiley['code'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;"><img src="', $settings['smileys_url'], '/', $smiley['filename'], '" align="bottom" alt="', $smiley['description'], '" title="', $smiley['description'], '" /></a>';
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
foreach ($smiley_row['smileys'] as $smiley)
{
//Hoteditor MOD
$smiley_src= $settings['smileys_url'] . '/' . $smiley['filename'];
print "<img style='cursor:pointer' onmousedown=\"if(editor_type==1){WriteHTML('<img src=$smiley_src>','editor');}else{WriteTEXT('\[IMG\]$smiley_src\[\/IMG\]','editor');}\" src=\"$smiley_src\" alt=\"$smiley[description]\" title=\"$smiley[description]\" /> ";
}
#-----[ BUL]------------------------------------------
Kod:
// Assuming BBC code is enabled then print the buttons and some javascript to handle it.
if ($context['show_bbc'])
{
echo '
<tr>
<td align="right"></td>
<td valign="middle">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function bbc_highlight(something, mode)
{
something.style.backgroundImage = "url(" + smf_images_url + (mode ? "/bbc/bbc_hoverbg.gif)" : "/bbc/bbc_bg.gif)");
}
// ]]></script>';
// The below array makes it dead easy to add images to this page. Add it to the array and everything else is done for you!
$context['bbc_tags'] = array();
$context['bbc_tags'][] = array(
'bold' => array('code' => 'b', 'before' => '[b]', 'after' => '[/b]', 'description' => $txt[253]),
'italicize' => array('code' => 'i', 'before' => '[i]', 'after' => '[/i]', 'description' => $txt[254]),
'underline' => array('code' => 'u', 'before' => '[u]', 'after' => '[/u]', 'description' => $txt[255]),
'strike' => array('code' => 's', 'before' => '[s]', 'after' => '[/s]', 'description' => $txt[441]),
array(),
'glow' => array('code' => 'glow', 'before' => '[glow=red,2,300]', 'after' => '[/glow]', 'description' => $txt[442]),
'shadow' => array('code' => 'shadow', 'before' => '[shadow=red,left]', 'after' => '[/shadow]', 'description' => $txt[443]),
'move' => array('code' => 'move', 'before' => '[move]', 'after' => '[/move]', 'description' => $txt[439]),
array(),
'pre' => array('code' => 'pre', 'before' => '[pre]', 'after' => '[/pre]', 'description' => $txt[444]),
'left' => array('code' => 'left', 'before' => '[left]', 'after' => '[/left]', 'description' => $txt[445]),
'center' => array('code' => 'center', 'before' => '[center]', 'after' => '[/center]', 'description' => $txt[256]),
'right' => array('code' => 'right', 'before' => '[right]', 'after' => '[/right]', 'description' => $txt[446]),
array(),
'hr' => array('code' => 'hr', 'before' => '[hr]', 'description' => $txt[531]),
array(),
'size' => array('code' => 'size', 'before' => '[size=10pt]', 'after' => '[/size]', 'description' => $txt[532]),
'face' => array('code' => 'font', 'before' => '[font=Verdana]', 'after' => '[/font]', 'description' => $txt[533]),
);
$context['bbc_tags'][] = array(
'flash' => array('code' => 'flash', 'before' => '[flash=200,200]', 'after' => '[/flash]', 'description' => $txt[433]),
'img' => array('code' => 'img', 'before' => '[img]', 'after' => '[/img]', 'description' => $txt[435]),
'url' => array('code' => 'url', 'before' => '[url]', 'after' => '[/url]', 'description' => $txt[257]),
'email' => array('code' => 'email', 'before' => '[email]', 'after' => '[/email]', 'description' => $txt[258]),
'ftp' => array('code' => 'ftp', 'before' => '[ftp]', 'after' => '[/ftp]', 'description' => $txt[434]),
array(),
'table' => array('code' => 'table', 'before' => '[table]', 'after' => '[/table]', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '[tr]', 'after' => '[/tr]', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '[td]', 'after' => '[/td]', 'description' => $txt[437]),
array(),
'sup' => array('code' => 'sup', 'before' => '[sup]', 'after' => '[/sup]', 'description' => $txt[447]),
'sub' => array('code' => 'sub', 'before' => '[sub]', 'after' => '[/sub]', 'description' => $txt[448]),
'tele' => array('code' => 'tt', 'before' => '[tt]', 'after' => '[/tt]', 'description' => $txt[440]),
array(),
'code' => array('code' => 'code', 'before' => '[code]', 'after' => '
'quote' => array('code' => 'quote', 'before' => '
', 'description' => $txt[260]),', 'after' => '
array(),
'list' => array('code' => 'list', 'before' => '
- \n[li]', 'after' => '[/li]\n\n
);
$found_button = false;
// Here loop through the array, printing the images/rows/separators!
foreach ($context['bbc_tags'][0] as $image => $tag)
{
// Is there a "before" part for this bbc button? If not, it can't be a button!!
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;
$found_button = true;
// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection .
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// Okay... we have the link. Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
elseif ($found_button)
{
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
$found_button = false;
}
}
// Print a drop down list for all the colors we allow!
if (!isset($context['disabled_tags']['color']))
echo ' <select onchange="surroundText(\'[color=\' + this.options[this.selectedIndex].value.toLowerCase() + \']\', \'[/color]\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); this.selectedIndex = 0; document.forms.', $context['post_form'], '.', $context['post_box_name'], '.focus(document.forms.', $context['post_form'], '.', $context['post_box_name'], '.caretPos);" style="margin-bottom: 1ex;">
<option value="" selected="selected">', $txt['change_color'], '</option>
<option value="Black">', $txt[262], '</option>
<option value="Red">', $txt[263], '</option>
<option value="Yellow">', $txt[264], '</option>
<option value="Pink">', $txt[265], '</option>
<option value="Green">', $txt[266], '</option>
<option value="Orange">', $txt[267], '</option>
<option value="Purple">', $txt[268], '</option>
<option value="Blue">', $txt[269], '</option>
<option value="Beige">', $txt[270], '</option>
<option value="Brown">', $txt[271], '</option>
<option value="Teal">', $txt[272], '</option>
<option value="Navy">', $txt[273], '</option>
<option value="Maroon">', $txt[274], '</option>
<option value="LimeGreen">', $txt[275], '</option>
</select>';
echo '<br />';
$found_button = false;
// Print the buttom row of buttons!
foreach ($context['bbc_tags'][1] as $image => $tag)
{
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;
$found_button = true;
// If there's no after, we're just replacing the entire selection in the post box.
if (!isset($tag['after']))
echo '<a href="javascript:void(0);" onclick="replaceText(\'', $tag['before'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// On the other hand, if there is one we are surrounding the selection .
else
echo '<a href="javascript:void(0);" onclick="surroundText(\'', $tag['before'], '\', \'', $tag['after'], '\', document.forms.', $context['post_form'], '.', $context['post_box_name'], '); return false;">';
// Okay... we have the link. Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
elseif ($found_button)
{
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';
$found_button = false;
}
}
echo '
</td>
</tr>';
}
[/CODE]
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
//Hoteditor MOD - Remove original BBCode
#-----[ BUL]------------------------------------------
Kod:
replaceText(text, document.forms.postmodify.message);
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
//HotEditor MOD
if(editor_type=="0"){//BBCode Editor
WriteTEXT(text,"editor");
}
else{//WYSIWYG Editor
text=BBCodeToHTML(text);
WriteHTML(text,"editor");
}
#-----[ BUL]------------------------------------------
Kod:
// Finally, the submit buttons.
echo '
<tr>
<td align="center" colspan="2">
<span class="smalltext"><br />', $txt['smf16'], '</span><br />
<input type="submit" name="post" value="', $context['submit_label'], '" tabindex="', $context['tabindex']++, '" onclick="return submitThisOnce(this);" accesskey="s" />
<input type="submit" name="preview" value="', $txt[507], '" tabindex="', $context['tabindex']++, '" onclick="return event.ctrlKey || previewPost();" accesskey="p" />';
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
// HotEditor MOD - add code get_hoteditor_data() - Finally, the submit buttons.
echo '
<tr>
<td align="center" colspan="2">
<span class="smalltext"><br />', $txt['smf16'], '</span><br />
<input type="submit" name="post" value="', $context['submit_label'], '" tabindex="', $context['tabindex']++, '" onclick="return get_hoteditor_data();submitThisOnce(this);" accesskey="s" />
<input type="submit" name="preview" value="', $txt[507], '" tabindex="', $context['tabindex']++, '" onclick="return event.ctrlKey || get_hoteditor_data();previewPost();" accesskey="p" />';
#-----[ AÇ]------------------------------------------
Kod:
Themes/default/Profile.template.php
#-----[ BUL]------------------------------------------
Kod:
echo '
</td>
<td>
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols=
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
//HotEditor MOD
$sign_message=$context['member']['signature'];
print<<<EOF
</td>
<td>
<textarea style="visibility:hidden;position:absolute;top:-20;left:-20;width:1px;height:1px" class="editor" id="signature" name="signature" rows="5" cols="50">$sign_message</textarea><br />
<style type="text/css">@import url(richedit/styles/office2007/style.css);</style>
<script language="JavaScript" type="text/javascript" src="richedit/editor.js?version=4.2"></script>
<script language="JavaScript" type="text/javascript">
var getdata =document.getElementById("signature").value;
getdata=getdata.replace(/\[S\]/gi,"[STRIKE]");
getdata=getdata.replace(/\[\/S\]/gi,"[/STRIKE]");
Instantiate("min","editor", getdata , "100%", "200px");
function get_hoteditor_data(){
if (HTML_ON == "no"){
alert ("Please uncheck the HTML checkbox");
return false;
}
else{
setCodeOutput();
var bbcode_output=document.getElementById("hoteditor_bbcode_ouput_editor").value;//Output to BBCode
document.getElementById("signature").value = bbcode_output;
}
}
</script>
EOF;
#-----[ BUL]------------------------------------------
Kod:
// The main containing header.
echo '
<form action="', $scripturl, '?action=profile2" method="post" accept-charset="', $context['character_set'], '" name="creator" id="creator" enctype="multipart/form-data">
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
// The main containing header.
//HotEditor MOD - add code onsubmit="return get_hoteditor_data();"
echo '
<form onsubmit="return get_hoteditor_data();" action="', $scripturl, '?action=profile2" method="post" accept-charset="', $context['character_set'], '" name="creator" id="creator" enctype="multipart/form-data">
#-----[ AÇ]------------------------------------------
Kod:
Themes/default/script.js
#-----[ BUL]------------------------------------------
Kod:
function submitThisOnce(form)
{
#-----[ SONRASINA EKLE ]------------------------------------------
Kod:
//HotEditor MOD
get_hoteditor_data();
#-----[ BUL]------------------------------------------
Kod:
function submitonce(theform)
{
smf_formSubmitted = true;
}
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
function submitonce(theform)
{
//HotEditor MOD
get_hoteditor_data();
smf_formSubmitted = true;
}
#-----[ BUL]------------------------------------------
Kod:
// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
caretPos.select();
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;
textarea.value = begin + text + end;
if (textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
textarea.value += text;
textarea.focus(textarea.value.length - 1);
}
}
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
//HotEditor MOD
// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
if(editor_type==1){
text=BBCodeToHTML(text);
WriteHTML(text,"editor");
}
else{
WriteTEXT(text,"editor");
}
}
#-----[ AÇ]------------------------------------------
Kod:
Sources/Subs.php
#-----[ BUL]------------------------------------------
Kod:
$codes = array(
#-----[ SONRASINA EKLE]------------------------------------------
Kod:
//HotEditor MOD
array(
'tag' => 'highlight',
'type' => 'unparsed_equals',
'test' => '(#[\da-fA-F]{3}|#[\da-fA-F]{6}|[A-Za-z]{1,12})\]',
'before' => '<span style="background-color: $1;">',
'after' => '</span>',
),
array(
'tag' => 'strike',
'before' => '<strike>',
'after' => '</strike>',
),
#-----[ BUL]------------------------------------------
Kod:
'before' => '<table style="font: inherit; color: inherit;">',
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
'before' => '<table align=center style="border-collapse: collapse;border-spacing: 0px;border: 1px solid #6CAFF7;background-color: #F4F4F4;width:98%;font-family:Verdana,Arial,Sans-Serif,Tahoma;font-size:12px;color: black;">',
#-----[ BUL]------------------------------------------
Kod:
'before' => '<td valign="top" style="font: inherit; color: inherit;">',
#-----[ DEĞİŞTİR]------------------------------------------
Kod:
'before' => '<td style="height:25px; border: 1px solid #6CAFF7">',