6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

experience with wysiwyg and cms?

by DavidMeade
5 replies
Hi folks,

I was putting to gether a cms system for myself but ran into an issue with getting values from the wysiwyg editor.

Basically what I'm doing is taking data as it is entered in a form and passing that information to a preview window that sits in an iframe.

It all works until I start using a wysiwyg editor instead of a standard form textarea.

As soon as I attach a wysiwyg editor to the textarea I can no longer get the value from that form field.

Does anyone know the syntax for retrieving the contents of a wysiwyg editor so I can then pass that data to my preview window?

It might be a case of looking in the wysiwyg.js and finding the relevant functions? If that's the case then it will probably be a different function call for different wysiwyg editors.

Would appreciate any help or pointers.

Thanks,
Dave
#cms #experience #wysiwyg
  • Profile picture of the author wayfarer
    Which wysiwyg are you using? Normally you get the values as a result of a POST, but they normally also have special JavaScript functions you can use to get it. You've asked such a vague, general question, it is pretty well impossible to answer.

    If you need a good editor, I recommend the Tiny MCE: TinyMCE - Home
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[7427091].message }}
    • Profile picture of the author DavidMeade
      Hi wayfarer,

      I wasn't sure how specific to get. I was hoping someone might have had direct experience and known how to do it

      I'm using openwysiwyg from Open WYSIWYG although I've tried several.

      Here's the basic code. Hopefully I can paste it to the comment area.

      <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

      <script language="JavaScript" type="text/javascript" src="wysiwyg/scripts/wysiwyg.js"></script>
      <script language="javascript" type="text/javascript">
      // attach the editor to the textarea with the identifier 'textarea1'.
      WYSIWYG.attach('content1');
      </script>

      <title></title>
      <link rel="stylesheet" href="style.css">

      </head>
      <body>

      <div style="width:100%;">


      <div style="float:left; width:50%;">
      <form name="myform" id="myform" method="post">
      <textarea name="content1" id="content1" border="5px" style="border:1px #black solid" cols="50" rows="14">data1</textarea>
      <textarea name="content2" id="content2" border="5px" style="border:1px #black solid" cols="50" rows="14">data2</textarea>
      </form>


      <iframe name="copyContent" id="copyContent" frameborder="0" marginwidth="0" scrolling="no" align="middle" style="width:100%; height:490px; "></iframe>
      </div>
      </div>

      </div>
      </div>
      <script>

      (function() {

      function addListeners(){
      document.getElementById('content2').addEventListen er("keyup",typingfunc, false);

      // Write functions here
      function typingfunc(){
      var frame = $('#copyContent');
      var contents = frame.contents();
      var body = contents.find('body');

      var newContent = document.getElementById('content2').value;

      body.html(newContent);
      }
      }
      window.onload = addListeners;
      })();
      </script>
      </body>
      </html>
      {{ DiscussionBoard.errors[7427361].message }}
      • Profile picture of the author DavidMeade
        The above code is listening for the "keyup" event to happen in the textarea "content2". It then types the value I entered into the iframe named "copyContent".

        When I change the event listener to listend for keyup in "content1" it doesn't work. The textarea "content1" is attached to the wysiwyg editor.

        Does that make sense?
        {{ DiscussionBoard.errors[7427372].message }}
  • Profile picture of the author wayfarer
    I'll tell you from experience that the actual "editor" is probably inside of its own IFRAME. So to get the content, you'd have to get the content of the IFRAME, not the TEXTAREA. The problem is, they usually have their own special way of marking up the content there, so just doing things the regular JavaScript way likely won't work. You really need to read the documentation for the editor to see if it's even possible. It most likely is.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[7427462].message }}
    • Profile picture of the author DavidMeade
      I figured it was going to be something like that. I've had a look at the source code and I think I see what I need but I haven't programmed in years so might have to get a friend to help with it.

      Thanks for the feedback.
      {{ DiscussionBoard.errors[7428235].message }}

Trending Topics