Topic: How to Disable wysiwyg manually? Is it possible?

[SoLoGHoST]

Ok, I know that this is a built in prototype, but am wanting to manually disable this upon a different click (Not the Toggle View button).  Looking in editor.js, I am seeing this:

Code: [Select]

// Toggle wysiwyg/normal mode.
smc_Editor.prototype.toggleView = function(bView)
{
if (!this.bRichTextPossible)
{
alert(oEditorStrings['wont_work']);
return false;
}

// Overriding or alternating?
if (typeof(bView) == 'undefined')
bView = !this.bRichTextEnabled;

this.requestParsedMessage(bView);

return true;
}
The smc_Editor, obtains the handle of this:  oEditorHandle_body

Is there anyway I can use this to call the toggleView function and turn wysiwyg off?  Perhaps in javascript?  Just want to turn it off on the page that it is on (for a page that I created), if I select a different option on that page.  Ofcourse, would help if I am able to tell if it is even on.  In any case, turning it off and switching the text to the way it is without the wysiwyg editor on, would be most helpful.

I am still needing the wysiwyg editor to be available, but just need to switch it off when another button is clicked on, if you know what I mean.

Cheers

[SoLoGHoST]

Nevermind, got it all figured out!  Topic Solved!

[Inter]

how you did it?

[SoLoGHoST]

It was tricky... You see the WYSIWYG Editor, when turned on, is actually hiding the bbc code typing element and displaying another element in its place.  So, all you need to do is just display: "" to show it, and display: "none" to hide it.  Ofcourse, you'll want to use Javascript for this instead.  It was actually a bit tricky, but through trial and error, I got a FULL BULLET-PROOF way of doing this.  But I already implemented this into the Dream Pages section of Dream Portal 1.1.  So, if you want, you can see how I do it in there, exactly, if you really want to understand it.  Or you could just inspect the Element and see the changes it makes when you click on it (in almost any browser).

[Inter]

I need to when you click on the button prior Prosmot button or send a text if you typed in the visual editor, he switched to a simple form bb code 

[Arantor]

You mean you hacked around it instead of just putting in:

Code: [Select]

$modSettings['disable_wysiwyg'] = true;
before calling the editor?


@Inter: I'm not sure what you're trying to achieve, sounds almost like you just want the switch button that's already implemented?

[Inter]

post.template.php

Code: [Select]

<script type="text/javascript"><!-- // --><![CDATA[
function previewPost()
{
alert($("#message").val());
return false;
}
// ]]></script>';
how to get the value if the text is entered using the visual editor?

[Arantor]

Well, you can't do it with jQuery like that because it's all stored in an iframe (in raw HTML, I might add). I still don't understand why you need to mess around with the content actually in JavaScript.

If you want to present only bbcode, you can do that just fine.

[Inter]

how to switch through js text from html to bb code when submitting a form

[Arantor]

You don't do it at form submission time - SMF doesn't. It checks if it was submitted as WYSIWYG and converts it. Relevant code from Post.php:

Code: [Select]

if (!empty($_REQUEST['message_mode']) && isset($_REQUEST['message']))
{
require_once($sourcedir . '/Subs-Editor.php');

$_REQUEST['message'] = html_to_bbc($_REQUEST['message']);

// We need to unhtml it now as it gets done shortly.
$_REQUEST['message'] = un_htmlspecialchars($_REQUEST['message']);

// We need this for everything else.
$_POST['message'] = $_REQUEST['message'];
}
message_mode gets added and set to 1 if it is a WYSIWYG post, and it's pushed into $_POST['message'] only when the submit button is actually pressed.

[Inter]

PHP

how to switch the mode of visual editor with java script

artificially push:
click -> BB code
click -> HTML Editor

[Arantor]

Use the button specifically provided for that purpose!

[SoLoGHoST]

You mean you hacked around it instead of just putting in:

Code: [Select]

$modSettings['disable_wysiwyg'] = true;
before calling the editor?


@Inter: I'm not sure what you're trying to achieve, sounds almost like you just want the switch button that's already implemented?

You misunderstand what we are asking and are talking about...  What the question was originally and what I actually did is done via javascript, not through php:  $modSettings['disable_wysiwyg'] = true;

And we are not referring to disabling the WYSIWYG Editor.  The problem is this...

Say, you are allowing for multiple types of coding languages to be edited:  PHP, HTML, and BBC.  Now BBC being one of them, you, ofcourse, would like to show the BBC Buttons, Smilies, and the WYSIWYG Editor, with Toggle View button, when BBC is selected.  But now, if you have BBC Selected, and than you have the Toggle View button pressed down, you have different output (Not Code within the text element), but now say the user changes it from BBC to PHP, or even HTML, with the Toggle View set on Preview mode (HTML), you have to change this yourself, in code, you have to hide the iframe element and view the coding text element.

Hopefully you understand what I'm saying now and why this has to be done via Javascript.

[Arantor]

Actually, no, I don't understand why you're making this so complicated.

The editor has functions for this purpose, it's the toggleView function. Check the editor object to see whether its bRichTextEnabled property is true or not (for whether it's in rich editor mode), then call its toggleView function if you need to.

The object is generally called oEditorHandle and is in global scope, of type smcEditor.

But as ever, you know best, I'm sure that's not how you did it.

[SoLoGHoST]

Use the button specifically provided for that purpose!

You are referring to the "Toggle View" button, and that is what I am saying, you can provide your own way of doing this, without using that button, via javascript.  And in some instances, you need to do this!  Take the example I provided above...

[Arantor]

Well done, you repeated yourself, I already realised that after your last post.

Since there's a button for it, call the same code the button uses.

I'm sorry I bothered replying to this topic.

[SoLoGHoST]

It's a prototype, so you can't access the functions directly!  Anyways, here's code taken out of DreamPages.template.php for you to see how I did it.  If val does not equal 2, than it disables the WYSIWYG Toggle View.  You place a call to the check_bbc function on the onchange event of a Radio Button, or whatever for that matter...

And $context['page_content'] represents the $editorOptions['id'] value.  For example, when you build the editor:

Code: [Select]

$editorOptions = array(
'id' => 'body',
'labels' => array(
),
'height' => '250px',
'width' => '100%',
'preview_type' => 2,
'rich_active' => false,
);
$context['page_content'] = $editorOptions['id'];

So, in this case, the $context['page_content'] = 'body';

Code: [Select]

function check_bbc(val)
{
if (val != 2)
{
var obj_wysiwyg = document.getElementById("html_' . $context['page_content'] . '");
document.getElementById("bbcBox_message").style.display = "none";
document.getElementById("smileyBox_message").style.display = "none";
if (obj_wysiwyg)
{
// Disable wysiwyg when switching to html/php options!
if (obj_wysiwyg.style.display != "none")
{
var sText = oEditorHandle_' . $context['page_content'] . '.getText(true, 1).replace(/&#/g, "&#").php_to8bit().php_urlencode();
oEditorHandle_' . $context['page_content'] . '.tmpMethod = sendXMLDocument;
oEditorHandle_' . $context['page_content'] . '.tmpMethod(smf_prepareScriptUrl(smf_scripturl) + "action=jseditor;view=0;', $context['session_var'] . '=' . $context['session_id'] . ';xml", "message=" + sText, oEditorHandle_' . $context['page_content'] . '.onToggleDataReceived);
}
}
}
else
{
document.getElementById("bbcBox_message").style.display = "";
document.getElementById("smileyBox_message").style.display = "";
}
}

There, have fun with it.

[Arantor]

It's a prototype, so you can't access the functions directly!

Yes, I know that. But it's JS's equivalent of a class and it is instantiated into oEditorHandle_message (or whatever you've called it), whose properties and methods you CAN access because it's an object instance (hence the o prefix)

And you actually are doing that, except doing it the long way by extending the object with new methods and calling them yourself...

[SoLoGHoST]

True True, if there is an easier way to do the same thing, I'm all for it.  I just took a look at the prototype and came up with my own workaround for this.

[Arantor]

There is, it's called calling the object's toggleView method - the same thing that the Toggle View button calls. And you can even determine its current state by examining the object instance's bRichTextEnabled properly, as I already said.

Then again, you told me on multiple occasions I don't know what I'm talking about, so I don't really know why you'd listen to me about this.