WYSIWYG Editor in PHPBB3

Generic, discuss anything about or related to phpBB3 (Olympus) here.
-- No support or MOD requests --
Forum rules
READ: StarTrekGuide.com Board Rules

Generic discussion of anything phpBB or phpBB3 "Olympus" related.
Only specific phpBB discussions please.

No Support or MOD Requests

Re: WYSIWYG Editor in PHPBB3

Postby Zohall » 28 Nov 2010, 04:29

Hi Roger
i tested in prosilver too but not yet working. ( not smilies not BBcode dropdown )

i do this in subsilver2/template/posting_body.html but not working

i found
Code: Select all
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;" style="line-height: 20px;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a>


replaced with this code
Code: Select all
<span style="cursor:pointer;" onmousedown="if(editor_type=='1'){WriteHTML('<img src={smiley.SMILEY_IMG}>','editor');}else{WriteTEXT('[IMG]{smiley.SMILEY_IMG}[/IMG]','editor');}"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></span>


and in /subsilver2/template/posting_smilies.html

found
Code: Select all
<td class="row1" align="center" valign="middle"><!-- BEGIN smiley --> <a href="#" onclick="initInsertions(); insert_text('{smiley.A_SMILEY_CODE}', true, true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a> <!-- END smiley --><br />{PAGINATION}<br /><a class="nav" href="#" onclick="window.close(); return false;">{L_CLOSE_WINDOW}</a></td>


replaced with this code
Code: Select all
              <td class="row1" align="center" valign="middle">
               <!-- BEGIN smiley -->
                   
                    <span style="cursor:pointer;" onmousedown="if(window.opener.editor_type=='1'){window.opener.WriteHTML('<img src={smiley.SMILEY_IMG}>','editor');}else{window.opener.WriteTEXT('[IMG]{smiley.SMILEY_IMG}[/IMG]','editor');}"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></span>
               <!-- END smiley -->
               <br /><a class="nav" href="#" onclick="window.close(); return



in your site
Code: Select all
http://three-dog.homelinux.com/phpbb/posting.php?mode=post&f=4

there isnt smilies box i cant test in your board.

1-so can u create a MODX for this editor.
2- i working on Quick reply with this editor and i Failed have u any idea for ADD on Quick reply?

for my english Excuse me.
User avatar
Zohall    
Lieutenant
Lieutenant
 
Posts: 201
Joined: 16 Aug 2010, 05:39
Location: Hecatompylos
Favorite Team: Real Madrid
Gender: Male
phpBB Knowledge: 6




phpBB Academy at StarTrekGuide
Support STG
Using PayPal Donate

Re: WYSIWYG Editor in PHPBB3

Postby Krupski » 28 Nov 2010, 23:41

Zohall wrote:Hi Roger
i tested in prosilver too but not yet working. ( not smilies not BBcode dropdown )


OK, I have the original smilies box enabled. Check out the board again, look at the code and see if you can figure it out.

If you need any help, let me know.

-- Roger
''Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto.'' -- Mikhail T. Kalashnikov
User avatar
Krupski    
Lieutenant
Lieutenant
 
Posts: 287
Joined: 26 Mar 2010, 20:25
Location: PHPBB 3.0.10 with full WYSIWYG Editor. Try it with UN: "tester" and PW: "tester"
Gender: Male
phpBB Knowledge: 5

Re: WYSIWYG Editor in PHPBB3

Postby Zohall » 30 Nov 2010, 01:41

oh... u change your board every day.. i cant look at your code... can u send your code with smilies box for me before changing board?

and any idea use editor for user signature ?
User avatar
Zohall    
Lieutenant
Lieutenant
 
Posts: 201
Joined: 16 Aug 2010, 05:39
Location: Hecatompylos
Favorite Team: Real Madrid
Gender: Male
phpBB Knowledge: 6

Re: WYSIWYG Editor in PHPBB3

Postby Krupski » 30 Nov 2010, 09:21

Zohall wrote:oh... u change your board every day.. i cant look at your code... can u send your code with smilies box for me before changing board?

and any idea use editor for user signature ?


(1) Yes I'm still working on it. I'm fine tuning the BBCode javascript. I found a bug in my implementation which I have to fix.

(2) Yes the editor works just fine for the user signature. In fact I specifically set it up that way.

Please don't use or deploy the code yet. Feel free to look at anything you wish, but wait until I get the bugs fixed before you try to deploy it.

Thanks.....

-- Roger
''Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto.'' -- Mikhail T. Kalashnikov
User avatar
Krupski    
Lieutenant
Lieutenant
 
Posts: 287
Joined: 26 Mar 2010, 20:25
Location: PHPBB 3.0.10 with full WYSIWYG Editor. Try it with UN: "tester" and PW: "tester"
Gender: Male
phpBB Knowledge: 5

Re: WYSIWYG Editor in PHPBB3

Postby Zohall » 30 Nov 2010, 12:50

very good. im working too..
we waiting for you.
User avatar
Zohall    
Lieutenant
Lieutenant
 
Posts: 201
Joined: 16 Aug 2010, 05:39
Location: Hecatompylos
Favorite Team: Real Madrid
Gender: Male
phpBB Knowledge: 6

Re: WYSIWYG Editor in PHPBB3

Postby stef775 » 30 Nov 2010, 14:04

Hi Roger

I was wondering why you remove the start <p> end end tag </p>
ForumHulp.com
Webhosting, Custom MODs, Technical management, MOD installation and Webdesign
stef775
Ensign
Ensign
 
Posts: 88
Joined: 05 Oct 2008, 16:00
Gender: Male
phpBB Knowledge: 8

Re: WYSIWYG Editor in PHPBB3

Postby Zohall » 30 Nov 2010, 23:59

for activation user signature we need to edit a .php file. this file is ucp.php ? or include ucp_prefs ? ( in your board i change my signature but in my account this signature is damage ) see http://three-dog.homelinux.com/phpbb/me ... ofile&u=54 if find a way tell me too :grin:
and i thing it will very good if u working on subsilver2 style too.
thank u
User avatar
Zohall    
Lieutenant
Lieutenant
 
Posts: 201
Joined: 16 Aug 2010, 05:39
Location: Hecatompylos
Favorite Team: Real Madrid
Gender: Male
phpBB Knowledge: 6

Re: WYSIWYG Editor in PHPBB3

Postby Krupski » 01 Dec 2010, 19:18

Zohall wrote:for activation user signature we need to edit a .php file. this file is ucp.php ? or include ucp_prefs ? ( in your board i change my signature but in my account this signature is damage ) see http://three-dog.homelinux.com/phpbb/me ... ofile&u=54 if find a way tell me too :grin:
and i thing it will very good if u working on subsilver2 style too.
thank u


Yes, I missed that one - it's fixed - THANK YOU!!!

The file which needed the edit was "memberlist.php".

For your experimentation, here's the complete up to date package of the PHP files. Simple unpack it into your board's root directory and refresh the cache.

phpbb308-fixed-php-files.tar.gz
PHP Files to support WYSIWYG
(191.54 KiB) Downloaded 63 times


-- Roger
''Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto.'' -- Mikhail T. Kalashnikov
User avatar
Krupski    
Lieutenant
Lieutenant
 
Posts: 287
Joined: 26 Mar 2010, 20:25
Location: PHPBB 3.0.10 with full WYSIWYG Editor. Try it with UN: "tester" and PW: "tester"
Gender: Male
phpBB Knowledge: 5

Re: WYSIWYG Editor in PHPBB3

Postby Zohall » 02 Dec 2010, 01:58

Thank u very much Roger for your package

1- in your package there is 2 file functions_content.php and functions.php i cant find this sign
Code: Select all
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
or something like that to understand your edition.
can u help me to find your edition in two files?

2-i find a way to add editor to quick reply in subsilver2 but in prosilver i cant. can u help me? :coffee:

3- Editing for feed.php?

4-
in subsilver2 style for active the bbcoce dropdown i found this code in posting_body.html

Code: Select all
      <script type="text/javascript">
      // <![CDATA[
         var form_name = 'postform';
         var text_name = 'message';
      // ]]>
      </script>


and replaced with this

Code: Select all
      <script type="text/javascript">
      // <![CDATA[
         var form_name = 'postform';
         var text_name = 'message';
              var bbcode = new Array();
              var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[flash=]', '[/flash]','[size=]','[/size]'<!-- BEGIN custom_tags -->, {custom_tags.BBCODE_NAME}<!-- END custom_tags -->);
              var imageTag = false;
      // ]]>
      </script>


and for subsilver 2 * Apply bbcodes in editor.js this code not working
Code: Select all
   bbopen = bbopen.toLowerCase(); /* keep tags lowercase for looks */
   bbclose = bbclose.toLowerCase();

   if(tinyMCE)
   {
      var ed = tinyMCE.get(text_name);
      var sel = ed.selection.getContent( { format : 'raw' } );

      ed.execCommand('mceInsertContent', false, bbopen);

      var bm = ed.selection.getBookmark();

      if (sel)
      {
         alert(sel);
         ed.execCommand('mceInsertContent', false, sel);
         bm = ed.selection.getBookmark();
      }

      ed.execCommand('mceInsertContent', false, bbclose);
      ed.selection.moveToBookmark(bm);
   }
   else
   {


but i dont know why not working yet. can u help me? it is very important for me.
thank u
User avatar
Zohall    
Lieutenant
Lieutenant
 
Posts: 201
Joined: 16 Aug 2010, 05:39
Location: Hecatompylos
Favorite Team: Real Madrid
Gender: Male
phpBB Knowledge: 6

Re: WYSIWYG Editor in PHPBB3

Postby Krupski » 04 Dec 2010, 22:08

Zohall wrote:Thank u very much Roger for your package

1- in your package there is 2 file functions_content.php and functions.php i cant find this sign
Code: Select all
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
or something like that to understand your edition.

and for subsilver 2 * Apply bbcodes in editor.js this code not working
Code: Select all
   bbopen = bbopen.toLowerCase(); /* keep tags lowercase for looks */
   bbclose = bbclose.toLowerCase();

   {

but i dont know why not working yet. can u help me? it is very important for me.
thank u


(1) The comments with all the "at" signs are so I can easily find where I edited. These lines do nothing. I simply search for "@@@@" when I want to quickly get to a part that I edited.

It does not signify a revision code, nor IS it code. It's just a marker for me to find. You can delete those lines if they bother you.

(2) The Javascript (in editor.js) that you show is what I'm working on right now. I am trying to achieve the following:

* If nothing is selected, the cursor ends up between BBCode tags. For example, submitting the BBCode "[XYZ]" should result in "[XYZ]|[/XYZ]" (the pipe symbol represents the cursor).
* If text is selected, then the text will be surrounded by the BBCode tags, and the selected text will REMAIN highlighted in case further BBCodes are desired on the text.

Unfortunately, either I don't know what I'm doing, or there's a bug in TinyMCE, because the "get selection", "get range", "get and restore bookmark" and other functions are not acting like they are documented, and the TinyMCE forum is absolutely no help. Nor is the TinyMCE documentation, which is sparse, terse and in some cases incorrect.

As I mentioned before, you are completely welcomed to experiment and download any code you wish from my board, but please be aware that it is NOT FINISHED YET and code you download may either not work at all, or it may be flakey (i.e. work fine in Firefox and fail in MSIE) and it may change 5 minutes after you download it.

If you want, here's part of "editor.js" (the part that does the BBCodes and smiley insertions). This is NOT all of editor.js, so look at where it starts and ends.

This is current as of right now, and it (seems) to be working here in Firefox and MSIE 8. Give it a try, but remember it is NOT finished.

Code: Select all
/**
* Apply bbcodes
*/
function bbfontstyle(bbopen, bbclose)
{
   bbopen = bbopen.toLowerCase(); /* keep tags lowercase for looks */
   bbclose = bbclose.toLowerCase();

   if(tinyMCE)
   {
      sel = tinyMCE.activeEditor.selection.getContent( {format : 'text'} );
      insert_text(bbopen);
      tinyMCE.activeEditor.focus();
      bm = tinyMCE.activeEditor.selection.getBookmark();

      if (sel != '')
      {
         bm = tinyMCE.activeEditor.selection.getBookmark();
         insert_text(sel);
      }

      insert_text(bbclose);
      tinyMCE.activeEditor.focus();
      tinyMCE.activeEditor.selection.moveToBookmark(bm);

      return;

   }
   else
   {
      theSelection = false;
      var textarea = document.forms[form_name].elements[text_name];
      textarea.focus();
      if ((clientVer >= 4) && is_ie && is_win)
      {
         // Get text selection
         theSelection = document.selection.createRange().text;
         if (theSelection)
         {
            // Add tags around selection
            document.selection.createRange().text = bbopen + theSelection + bbclose;
            document.forms[form_name].elements[text_name].focus();
            theSelection = '';
            return;
         }
      }
      else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
      {
         mozWrap(document.forms[form_name].elements[text_name], bbopen, bbclose);
         document.forms[form_name].elements[text_name].focus();
         theSelection = '';
         return;
      }
      //The new position for the cursor after adding the bbcode
      var caret_pos = getCaretPosition(textarea).start;
      var new_pos = caret_pos + bbopen.length;
      // Open tag
      insert_text(bbopen + bbclose);
      // Center the cursor when we don't have a selection
      // Gecko and proper browsers
      if (!isNaN(textarea.selectionStart))
      {
         textarea.selectionStart = new_pos;
         textarea.selectionEnd = new_pos;
      }
      // IE
      else if (document.selection)
      {
         var range = textarea.createTextRange();
         range.move("character", new_pos);
         range.select();
         storeCaret(textarea);
      }
      textarea.focus();
      return;
   }
}

/**
* Insert text at position
*/
function insert_text(text, spaces, popup)
{
   if (spaces)
   {
      text = ' ' + text + ' ';
   }

   if(tinyMCE)
   {
      /* first, handle internet explorer */
      if(is_ie && is_win)
      {
         if (document.forms[form_name])
         { /* parent */
            tinyMCE.activeEditor.execCommand('mceInsertContent', false, text);
         }
         else
         { /* opener */
            opener.tinyMCE.activeEditor.execCommand('mceInsertContent', false, text);
         }
      }
      /* then service real browsers */
      else
      {
         if (document.forms[form_name])
         { /* parent */
            tinyMCE.activeEditor.selection.setContent(text);
         }
         else
         { /* opener */
            opener.tinyMCE.activeEditor.selection.setContent(text);
         }
      }
   }
   else
   {
      var textarea;
      if (!popup)
      {
         textarea = document.forms[form_name].elements[text_name];
      }
      else
      {
         textarea = opener.document.forms[form_name].elements[text_name];
      }
      if (!isNaN(textarea.selectionStart))
      {
         var sel_start = textarea.selectionStart;
         var sel_end = textarea.selectionEnd;
         mozWrap(textarea, text, '')
         textarea.selectionStart = sel_start + text.length;
         textarea.selectionEnd = sel_end + text.length;
      }
      else if (textarea.createTextRange && textarea.caretPos)
      {
         if (baseHeight != textarea.caretPos.boundingHeight)
         {
            textarea.focus();
            storeCaret(textarea);
         }
         var caret_pos = textarea.caretPos;
         caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
      }
      else
      {
         textarea.value = textarea.value + text;
      }
      if (!popup)
      {
         textarea.focus();
      }
   }
}


Don't worry. One day soon, it will be perfected and finished. I can see why the PHPBB team didn't work on it... pounding one's head against the wall for weeks on end is not much fun! :banghead:

-- Roger
''Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto.'' -- Mikhail T. Kalashnikov
User avatar
Krupski    
Lieutenant
Lieutenant
 
Posts: 287
Joined: 26 Mar 2010, 20:25
Location: PHPBB 3.0.10 with full WYSIWYG Editor. Try it with UN: "tester" and PW: "tester"
Gender: Male
phpBB Knowledge: 5

PreviousNext

Return to Olympus Discussions

Who is online

Users browsing this forum: linkdex and 2 guests