How can I get/write text in textarea of smc editor?

[davidhs]

Some of my mods needs
- count characters using javascript when I write something in textarea of smc editor (for example, in post or PM) or
- write one character in textarea of smc editor.

I test with SMF 2.1 Beta 3 with I can not do this.

I add some alert(n) in events of smc editor

Code (Themes/default/GenericControls.template, line 27) Select Expand


<textarea class="editor" name="', $editor_id, '" id="', $editor_id, '" cols="600" onselect="storeCaret(this); alert(1);" onclick="storeCaret(this); alert(2);" onkeyup="storeCaret(this); alert(3);" onchange="storeCaret(this); alert(4);" tabindex="', $context['tabindex']++, '" style="width: ', $editor_context['width'], '; height: ', $editor_context['height'], ';', isset($context['post_error']['no_message']) || isset($context['post_error']['long_message']) ? 'border: 1px solid red;' : '', '"', !empty($context['editor']['required']) ? ' required' : '', '>', $editor_context['value'], '</textarea>

but I do not see any alert.

[Arantor]

Read the editor's documentation: https://www.sceditor.com/api/

[davidhs]

Read the editor's documentation: https://www.sceditor.com/api/

Thanks.

[davidhs]

I found methods in order to do this

Code Select Expand


$("#', $editor_id, '").data("sceditor").insertText("Text to insert"); // Insert a text.
$("#', $editor_id, '").data("sceditor").val().length; // Length of text.


Now I want to do this when happend an event (for example, key press) but do not work:

Code Select Expand


// Only one event.
$("#', $editor_id, '").data("sceditor").keyPress(function() {
alert("Key press event fired.");
});

// Various events.
$("#', $editor_id, '").data("sceditor").bind("keyup keydown keypress blur focus valuechange pasteraw paste", function() {
alert("Any event fired.");
});


[davidhs]

I have another problem with SC Editor of SMF 2.1! This topic should be changed to "Problems with SC Editor WYSIWYG".

I do not know if this is a bug.

My mod BBCode with style https://custom.simplemachines.org/mods/index.php?mod=2505 adds the possibility to use CSS styles, CSS classes and some attributes like HTML in BBC tags.

Adds two BBC tags (similar to HTML) with style and class attributes:

Code Select Expand


[div style="" class=""]Paragraph with style[/span]
[span style="" class=""]Characters with style[/span]

Adds an icon for each to SC Editor and works fine (in text mode, of course).

But my mod also adds some attributes to some BBC tags, for example:


If I write this in a new post

Code Select Expand


[list style="color: red; border: 3px inset red;"]
[li style="color: blue; border: 3px inset blue;"]Item 1[/li]
[li]Item 2[/li]
[/list]

I can preview and save, and all is correct. I can use Quick edit button and I see this text, all works.

But... If I use Modify option, I see the original text (textarea of editor contains original text) at begining (a few seconds) and after SC Editor remove all custom attributes and display this:

Code Select Expand


[list]
[li]Item 1[/li]
[li]Item 2[/li]
[/list]

I can not save this because I will loose all style.

[Steve]

I think that's more of a mod issue than a problem with 2.1 so it should be posted in the mod's support thread.

[Arantor]

I think that's more of a mod issue than a problem with 2.1 so it should be posted in the mod's support thread.

Considering that this thread was opened by the mod author to ask how to make his own mod compatible with 2.1, I doubt the mod thread will be of any use...

I haven't worked with the editor in a while but I think you'd need to specifically tell it to preserve inline styles, it normally strips them out because it itself doesn't use them. Take a look at the bbcode addon that we wrote on top of SCEditor. I also think SCEditir isn't totally up to date in 2.1 and this is one place that targeting anything below beta 3 is a hugely bad idea.

[davidhs]

I think that's more of a mod issue than a problem with 2.1 so it should be posted in the mod's support thread.

Considering that this thread was opened by the mod author to ask how to make his own mod compatible with 2.1, I doubt the mod thread will be of any use...

I haven't worked with the editor in a while but I think you'd need to specifically tell it to preserve inline styles, it normally strips them out because it itself doesn't use them. Take a look at the bbcode addon that we wrote on top of SCEditor. I also think SCEditir isn't totally up to date in 2.1 and this is one place that targeting anything below beta 3 is a hugely bad idea.

Really I do not want do my mods compatible with SC Editor mod on SMF 2.0.
I want adapt my mods to SC Editor used by SMF 2.1.

Perhaps problem is the SC Editor of SMF 2.1 is not finished... (I do not know!) and then my mods can not support SMF 2.1 yet.

[Arantor]

The SCEditor in 2.1 is taken from SCEditor.com, it's literally not written by the SMF team (the SC stands for Sam Clarke, its author)

The version in 2.1 betas 1 and 2 is older than the one in beta 3, but that's probably not been updated to current SCEditor lately.

Also I wasn't trying to suggest that you support the 2.0 mod, I was just trying to discourage you from trying to support beta 1 or beta 2 since I know you have a habit of trying to support people on older versions rather than trying to do them, you and everyone else a favour by getting them to upgrade already.

[Steve]

Considering that this thread was opened by the mod author to ask how to make his own mod compatible with 2.1, I doubt the mod thread will be of any use...

Whoops ... should have read the original post again. Sorry about that.

[davidhs]

I read SCEditor documentation, again, and I saw code for write and read in editor in SMF 2.1 RC2 (in WYSIWYG mode or not):

Code (Add in file Themes\default\GenericControl.template.php, line 71, below editor) Select Expand

<?php

// Read content.
echo '<a onclick="alert(oEditorHandle_', $editor_id, '.getText(false));">get text</a>, ';

// Write text at end.
echo '<a onclick="oEditorHandle_', $editor_id, '.insertText(\'text added\');">insert text</a>';

?>

But I did not find correct code for do something with events. I test these but do not work :

Code (Add in file Themes\default\GenericControl.template.php, line 71, below editor) Select Expand

<?php

echo '<script>
// This code has JavaScript error.
/*
$("#', $editor_id, '").data("sceditor").bind("keyup keypress nodechanged selectionchanged valuechanged", function (event)
{
alert("Events $ with data(): keyup keypress nodechanged selectionchanged valuechanged");
});

$("#', $editor_id, '").data("sceditor").keypress(function (event)
{
alert("Event keypress $ with data() 1");
});

$("#', $editor_id, '").data("sceditor").keypress = function (event)
{
alert("Event keypress $ with data() 2");
}

oEditorHandle_', $editor_id, '.data("sceditor").bind("keyup keypress nodechanged selectionchanged valuechanged", function (event)
{
alert("Events oEditorHandle with data(): keyup keypress nodechanged selectionchanged valuechanged");
});

oEditorHandle_', $editor_id, '.data("sceditor").keypress(function (event)
{
alert("Event keypress oEditorHandle with data() 1");
});

oEditorHandle_', $editor_id, '.data("sceditor").keypress = function (event)
{
alert("Event keypress oEditorHandle with data() 2");
}

oEditorHandle_', $editor_id, '.bind("keyup keypress nodechanged selectionchanged valuechanged", function (event)
{
alert("Events oEditorHandle: keyup keypress nodechanged selectionchanged valuechanged");
});

oEditorHandle_', $editor_id, '.keypress(function (event)
{
alert("Event keypress oEditorHandle 1");
});
*/

// This code has not JavaScript error but not work.

$("#', $editor_id, '").bind("keyup keypress nodechanged selectionchanged valuechanged", function (event)
{
alert("Events $: keyup keypress nodechanged selectionchanged valuechanged");
});

$("#', $editor_id, '").keypress(function (event)
{
alert("Event keypress $ 1");
});

$("#', $editor_id, '").keypress = function (event)
{
alert("Event keypress $ 2");
}

oEditorHandle_', $editor_id, '.keypress = function (event)
{
alert("Event keypress oEditorHandle 2");
}

</script>';

?>

[davidhs]

About this...

I have another problem with SC Editor of SMF 2.1! This topic should be changed to "Problems with SC Editor WYSIWYG".

I do not know if this is a bug.

My mod BBCode with style https://custom.simplemachines.org/mods/index.php?mod=2505 adds the possibility to use CSS styles, CSS classes and some attributes like HTML in BBC tags.

Adds two BBC tags (similar to HTML) with style and class attributes:

Code Select Expand


[div style="" class=""]Paragraph with style[/span]
[span style="" class=""]Characters with style[/span]

Adds an icon for each to SC Editor and works fine (in text mode, of course).

But my mod also adds some attributes to some BBC tags, for example:


If I write this in a new post

Code Select Expand


[list style="color: red; border: 3px inset red;"]
[li style="color: blue; border: 3px inset blue;"]Item 1[/li]
[li]Item 2[/li]
[/list]

I can preview and save, and all is correct. I can use Quick edit button and I see this text, all works.

But... If I use Modify option, I see the original text (textarea of editor contains original text) at begining (a few seconds) and after SC Editor remove all custom attributes and display this:

Code Select Expand


[list]
[li]Item 1[/li]
[li]Item 2[/li]
[/list]

I can not save this because I will loose all style.

I test again in SMF 2.1 RC2 and this problem occurs when JavaScript code of SC Editor is executed and BBC code is changed, removing all new attributes.

I searched but did not find JavaScript file where BBC tags accepted by SC Editor are defined.

[Oldiesmann]

All of the bbcode stuff is handled through Themes/default/scripts/jquery.sceditor.bbcode.min.js. Note that you will need to "unminify" it to make any sense of it though, but that's where sites like unminify.com come in handy.

[davidhs]

All of the bbcode stuff is handled through Themes/default/scripts/jquery.sceditor.bbcode.min.js. Note that you will need to "unminify" it to make any sense of it though, but that's where sites like unminify.com come in handy.

I supposed something like this but... I "unminified" this file and I do not see where mods can add the new attributes in tags. Or to do this in other place...

For example my mod adds attribute style to some tags (img, list, li, table,...).

Perhaps this can not be done in SMF 2.1?

[SychO]

I believe you're looking for jquery.sceditor.smf.js

[davidhs]

I believe you're looking for jquery.sceditor.smf.js

Thank you. I will see this file.