SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Creating a basic CMS

    hi guys,

    im hoping somebody could help me here. im need to create s simple CMS/WYSIWYG, but im not a pro on js. I found one on a website, but i dont want to resort to stealing codes.

    basically, theres a textarea, where you put in text, and a button for bold, italics and underline, etc. if i highlight something on the textarea and hit the bold button, the text automatically gets surrounded by the <b></b> tags, or or whatevers convinient. when i look at the inline js code from the button, it calls a function, but id rather simplify the code, it should be something like onclick=insertstyle("b","textarea_name");

    i hope you guys can help me, i really need it. if you know something similar online, please reply me with the links.

    thanks a lot guys!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is alot of open source / free variations on the internet. I've tried, and ended up never reaching the same results that you can find online.

    Basic one: http://kevinroth.com/rte/demo.htm

    and from what it looks like a tutorial on how to make your own. http://www.cstruter.com/replyblog.php?ContentID=45


  3. #3
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kevin Roth's editor is one of the best but maybe to heavy for a small project

    Can also take a look at this list
    http://www.geniisoft.com/showcase.nsf/WebEditors

  4. #4
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    the thing is we are trying to avoid any cms, be it a professional one or small time. i couldnt care less, but its a requirement, thats why im calling every JS capable person here.. hehehe

    heres what i have at the moment and i hope you get the picture

    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it will need playing around with.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                #buttons {
                    font-family: verdana, tahoma, sans-serif;
                    font-size: 76&#37;;
                }
                #buttons a {
                    text-decoration: none;
                    color: #666;
                }
                #buttons a:hover {
                    text-decoration: underline;
                    color: #666;
                }
                #box {
                    margin-top: 10px;
                    width: 500px;
                }
                #box textarea {
                    width: 100%;
                    height: 150px;
                }
            </style>
            <script type="text/javascript">
                
                function format(tag) {
                    var el = document.getElementById('content');
                    if (el.setSelectionRange) {
                        el.value = el.value.substring(0,el.selectionStart) + '[' + tag + ']' + el.value.substring(el.selectionStart,el.selectionEnd) + '[/' + tag + ']' + el.value.substring(el.selectionEnd,el.value.length)
                    } else {    
                        if (selectedText != '') {
                            var selectedText = document.selection.createRange().text;
                            var newText = '[' + tag + ']' + selectedText + '[/' + tag + ']';
                            document.selection.createRange().text = newText;
                        } 
                    }
                }
                
                function bold() {
                    format('b');
                }
                function italic() {
                    format('i');
                }
                function underline() {
                    format('u');
                }
                function heading() {
                    format('h1');
                }
            </script>
        </head>
        <body>
            
            <div id="buttons">&#187; <a href="javascript:bold();">Bold</a> &#187; <a href="javascript:italic();">Italic</a> &#187; <a href="javascript:underline();">Underline</a> &#187; <a href="javascript:heading();">Heading</a></div>
    
            <div id="box"><textarea id="content"></textarea></div>
            <br />
            <input type="button" value="Alert Content" onclick="alert(document.getElementById('content').value);" />
    
        </body>
    </html>


  6. #6
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lance I think what you are trying to do is very similar to
    http://www.themaninblue.com/experiment/widgEditor/

    take a look at the code, or use it (why reinvent the wheel)

  7. #7
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by gRoberts View Post
    it will need playing around with.

    Code:
    <script type="text/javascript">
                
                function styleme(tag) {
    	var el = document.getElementById('body');
    	if (el.setSelectionRange) {
        	el.value = el.value.substring(0,el.selectionStart) + '[' + tag + ']' + el.value.substring(el.selectionStart,el.selectionEnd) + '[/' + tag + ']' + el.value.substring(el.selectionEnd,el.value.length)
        } else {
        	if (selectedText != '') {
            	var selectedText = document.selection.createRange().text;
                var newText = '[' + tag + ']' + selectedText + '[/' + tag + ']';
                document.selection.createRange().text = newText;
            }
        }
    }
            </script>
    
    
    
    <li onclick="styleme('b');">&raquo; Bold</li>
    I edited the code a bit ;D

    Thanks a lot groberts! this is exactly what I am looking for. Sorry i haven't check this over the weekend. The only thing i could wish is that whatever i highlighted should still be highlighted after the operation, coz if the textarea has a hefty amount of text, and i am working on the bottom part, the cursor returns at the bottom, but the scroll goes back on top.. Anyway, its very minor, but it will be very beneficial for users (if ever someone else's bumped on this thread and is looking for the same code).

    To GiorgosK, I appreciate the link you gave me, and I also root to use this ones rather than code a new, but its a requirement for us. I downloaded it though for personal use!

    To all the guys who visited and helped, thank you very much!
    Last edited by lance_vincent; Aug 5, 2007 at 19:24.
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IIRC you can use the select method, with the selectStart and selectLength to reselect the selected text (sounds silly dont it)


  9. #9
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im sorry, but i really have 0 javascript skills, though i cant edit a few lines. can you show it for me?
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strangely enough I can make it work in IE but Firefox doesn't want to play.

    I'd play a bit more but I can't guarentee when it will be, as I am busy at the moment.

    Maybe another user can help us?


  11. #11
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  12. #12
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All these posts so far are really just about WYSIWYG editing areas, and there are plenty of those around.

    If you really want a simple CMS, then there needs to be a log in interface, and a way to put the dynamic part of the site into the publicly viewable website. Has anyone put this together, without making it huge? It seems so obvious, I am amazed I haven't found it yet. All of the so called simple CMS I have found so far are basically blogs, when what is really needed is an editable content block inside a normal html page.

  13. #13
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is pretty easy to make this with some basic php

    Quote Originally Posted by Greg_R View Post
    All these posts so far are really just about WYSIWYG editing areas, and there are plenty of those around.

    If you really want a simple CMS, then there needs to be a log in interface, and a way to put the dynamic part of the site into the publicly viewable website. Has anyone put this together, without making it huge? It seems so obvious, I am amazed I haven't found it yet. All of the so called simple CMS I have found so far are basically blogs, when what is really needed is an editable content block inside a normal html page.
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  14. #14
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    i hope i dont get killed for posting a code i found somewhere else, but this is the code that i was trying to come up with, maybe we can figure something out with this..
    Code:
    function bbcodeme(text1, text2, txid)
    {
      var textarea = document.getElementById( txid );
      if ( textarea )
      {
        if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
        {
          var caretPos = textarea.caretPos;
    
          caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
          caretPos.select();
        }
        else if (typeof(textarea.selectionStart) != "undefined")
        {
          var begin = textarea.value.substr(0, textarea.selectionStart);
          var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
          var end = textarea.value.substr(textarea.selectionEnd);
          var newCursorPos = textarea.selectionStart;
          var scrollPos = textarea.scrollTop;
    
          textarea.value = begin + text1 + selection + text2 + end;
    
          if (textarea.setSelectionRange)
          {
            if (selection.length == 0)
              textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
            else
              textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
            textarea.focus();
          }
          textarea.scrollTop = scrollPos;
        }
        else
        {
          textarea.value += text1 + text2;
          textarea.focus(textarea.value.length - 1);
        }
      }
    }
    i will delete this after a few days to give respect to the proper owners.
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  15. #15
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see there being a problem with posting code you found else where. If anything, just provide the original URL to the place you found it, thus giving credit where its due.


  16. #16
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    While i have been using the original CMS groberts have suggested, i was inclined to test out the one which GiorgosK suggested , which is http://www.themaninblue.com/experiment/widgEditor/

    it works as its suppose to be in IE, but on firefox, I'm encountering a problem.

    See, when i used it, i cant access the field after i submitted the form. Heres the exact thing i did.

    I included 3 lines of code for linking to the 3 css files, and another line to link to the javascript file. Next, i used the class to my existing textarea. And the cms pops out beautifully. But as i have said, when you send the form, it cant find the field.

    So i returned to the example.html, and test it with firefox, and it alerts the content of the textarea, so incompatibility is not an issue. i installed the alert feature on my test page. But still, on firefox, it doesn't alert your changes. I mean initially, if the textarea contains "The quick brown fox", and i edited it and completed the phrase, when i submit the form, it alerts the initial content, not the edited one.

    Any idea why is this happening?
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  17. #17
    SitePoint Zealot GiorgosK's Avatar
    Join Date
    Jun 2007
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lance why don't you post a public test page so we can take a look at it in action rather then making hypothetical comments ... because the original demo works just fine with my firefox 2.0.0.6

  18. #18
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys!

    I hope you don't mind visiting the following url for my problem.

    http://www.globalpropertyguide.com/n...efox_test.html

    The example.html file included the the widgeditor works ok with firefox, but when I integrated it with our cms, it doesn't work. The link above works on IE, but not on Firefox.

    I hope you have better luck than me in finding the problem..

    Thanks!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  19. #19
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd start with validating your html. Your code that loops to find the parent form of the textarea element but because in your html, your form is placed in somewhere that I think can't be reached, plus i've noticed there are unclosed tags.

    http://validator.w3.org/


  20. #20
    SitePoint Evangelist lance_vincent's Avatar
    Join Date
    Aug 2004
    Location
    philippines
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks groberts!

    when you mentioned about the <form> that cannot be found, i tried to place my form tags to wrap around my table, and not around my <td></td> (which holds the tables). i wonder why such thing would not make it function..anyway..that was a good hint!
    If you won't dress like the
    Victoria Secret girls,
    don't expect us to act like soap opera guys.

  21. #21
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because your trying to find the form by using the parentNode of the current node, it could technically bypass the form if its not a parent of one of your child nodes.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •