Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: [MOD] Simple text editor styles (sNews 1.4)  (Read 3498 times)

benjer

  • Newbie
  • *
  • Karma: 0
  • Posts: 20
[MOD] Simple text editor styles (sNews 1.4)
« on: July 24, 2006, 09:25:48 pm »

I've added some simple functions to the text area - bold, edit, underline, quote, img and url.

Firstly save this js as editor.js
Code: [Select]
// insertcode is used for bold, italic, underline and quote and just
// wraps the tags around a selection or prompts the user for some
// text to apply the tag to

function insertcode(tag, desc, textarea)
{
    // our textfield
    if (!textarea) textarea = document.getElementById("txtMessage");

    // our open tag
    var open = "<" + tag + ">";

    // our close tag
    var close = "";

    if(!textarea.setSelectionRange)
    {
        var selected = document.selection.createRange().text;
        if(selected.length <= 0)
        {
            // no text was selected so prompt the user for some text
var promptValue= prompt("Please enter the text you'd like to " + desc, "");
if(promptValue!=null && promptValue!=""){
           textarea.value += open + promptValue + close;
}
        }
        else
        {
            // put the code around the selected text
            document.selection.createRange().text = open + selected + close;
        }
    }
    else
    {
        // the text before the selection
        var pretext = textarea.value.substring(0, textarea.selectionStart);
       
        // the selected text with tags before and after
        var codetext = open + textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) + close;

        // the text after the selection
        var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
       
        // check if there was a selection
        if(codetext == open + close)
        {
            //prompt the user
            codetext = open + prompt("Please enter the text you'd like to " + desc, "") + close;
        }

        // update the text field
     if(codetext!=open+null+close && codetext!=""){
           textarea.value = pretext + codetext + posttext;
}
 
 
    }

    // set the focus on the text field
    textarea.focus();
}

// inserts an image by prompting the user for the url
function insertimage(textarea)
{
    // our textfield
    if (!textarea) document.getElementById("txtMessage");

    // our image
    var sInput = prompt("Please enter the url", "http://")
    if (sInput&&sInput!='http://') {
var image = "";

if(!textarea.setSelectionRange)
{
// get selected text
var selected = document.selection.createRange().text;

if(selected.length <= 0)
{
// no text was selected so add the image to the end
textarea.value += image;
}
else
{
// replace the selection with the image
document.selection.createRange().text = image;
}
}
else
{
// the text before the selection
var pretext = textarea.value.substring(0, textarea.selectionStart);

// the text after the selection
var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

// update the text field
textarea.value = pretext + image + posttext;
}
}

    // set the focus on the text field
    textarea.focus();
}

// inserts a link by prompting the user for a url
function insertlink(textarea)
{
    // our textfield
    if (!textarea) document.getElementById("txtMessage");
//var selected = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
    // our link
    var url = prompt("Please enter the url", "http://");
    if (url&&url!='http://') {
var link = "" + url + "";

if(!textarea.setSelectionRange)
{
// get selected text
var selected = document.selection.createRange().text;

if(selected.length <= 0)
{
// no text was selected so add the link to the end
textarea.value += link;
}
else
{
// replace the selection with the link
document.selection.createRange().text = "[url]" + selected + "[/url]";
}
}
else
{
// the text before the selection
var pretext = textarea.value.substring(0, textarea.selectionStart);

// the text after the selection
var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);


// update the text field
textarea.value = pretext + link + posttext;
}
}
// set the focus on the text field
    textarea.focus();
}
Now open up sNews.php and find //NEW ARTICLE and find this line
Code: [Select]


     

Replace with this code
Code: [Select]

      class="shadow">
onkeypress="insertcode('b', 'bold', txtMessage);" value="Bold"
class="btnBold">onclick="insertcode('i', 'make italic', txtMessage);"
onkeypress="insertcode('i', 'make italic', txtMessage);"
value="Italics" class="btnItal">onkeypress="insertcode('u', 'underline', txtMessage);"
value="Underline" class="btnUnderline">title="quote selected text" onclick="insertcode('blockquote', 'quote',
txtMessage);" onkeypress="insertcode('blockquote', 'quote', txtMessage);"
value="Quote" class="btn">onclick="insertimage(txtMessage);"
onkeypress="insertimage(txtMessage);" value="Image" class="btn">type="button" title="insert link" onclick="insertlink(txtMessage);"
onkeypress="insertlink(txtMessage);" value="Link"
class="btn">
Scroll down to // EDIT ARTICLE  and find this line
Code: [Select]
   

Replace with this
Code: [Select]

      class="shadow">
onkeypress="insertcode('b', 'bold', txtMessage);" value="Bold"
class="btnBold">onclick="insertcode('i', 'make italic', txtMessage);"
onkeypress="insertcode('i', 'make italic', txtMessage);"
value="Italics" class="btnItal">onkeypress="insertcode('u', 'underline', txtMessage);"
value="Underline" class="btnUnderline">title="quote selected text" onclick="insertcode('blockquote', 'quote',
txtMessage);" onkeypress="insertcode('blockquote', 'quote', txtMessage);"
value="Quote" class="btn">onclick="insertimage(txtMessage);"
onkeypress="insertimage(txtMessage);" value="Image" class="btn">type="button" title="insert link" onclick="insertlink(txtMessage);"
onkeypress="insertlink(txtMessage);" value="Link"
class="btn">

Ive also made some simple CSS
Code: [Select]
.shadow {

border:1px solid #000;

border-left-color:#fff;

border-top-color:#fff;

width:404px;

min-width:404px;

padding:10px 3px 3px 3px;

background:#ccc;

color:#fff;


}


.forumBtn input {

padding:2px 3px;

margin-right:4px;

border:1px solid #000;

border-left-color:#ccc;

border-top-color:#ccc

}



.forumBtn input:hover, .forumBtn input:focus {

cursor:pointer;

border:1px solid #fff!important;

border-left-color:#000!important;

border-top-color:#000!important

}

.forumBtn {

margin:2px 0;

text-align:center;

width:400px;

}

.btnBold {

font-weight:bold;

}

.btnItal {

font-style:italic;

}

.btnUnderline {

text-decoration: underline!important;

}

#txtSubject, #txtMessage {

margin:0!IMPORTANT;

padding:4px;

width:394px;

border:1px solid #ccc!important;

border-left-color:#000!important;

border-top-color:#000!important;
height:150px

}
Enjoy
Ben
Logged

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
[MOD] Simple text editor styles (sNews 1.4)
« Reply #1 on: July 24, 2006, 09:29:38 pm »

nice! something similar wil be done in 1.5, but i'll surely test your code, benjer. thx!
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

ketut

  • Full Member
  • ***
  • Karma: 0
  • Posts: 115
    • Book Bali Hotels
[MOD] Simple text editor styles (sNews 1.4)
« Reply #2 on: July 25, 2006, 07:50:04 am »

have anybody use rte from http://www.kevinroth.com/rte/ on sNews?
i have implemented but fail to write to database - please help.
Pages: [1]
« previous next »