Jump to content



Photo

Can I Add Wysiwyg Editor In Ui Block Text?

UI Block Text

  • Please log in to reply
28 replies to this topic

#1 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 09 January 2015 - 01:46 PM

Hello everyone,

 

Can I add WYSIWYG Editor in UI Block Text?

 

Please advise

 

Thanks



#2 Ptrick125

Ptrick125

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 285 posts
  • LocationNear Austin, Texas
  • OS:Windows 8
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Professional Edition

Posted 10 January 2015 - 02:16 PM

What type of file is the editor that you want to embed? Maybe you could upload it to a website of yours then use an <iframe> that doesn't have scrolling to embed it.



#3 darryl561

darryl561

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 554 posts
  • LocationAustralia
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v4.0
  • License:Developer Edition

Posted 11 January 2015 - 02:55 AM

You can add a WYSIWYG Editor to the ui html panel, but I have not been able to find a way to set it's content to a variable so it's no use.

 

If you want to use the browser for your ui then you can do it that way by scraping the content to a variable. Otherwise one of pash's plugins has a WYSIWYG Editor. This one I think: http://www.ubotstudi...dvanced-dialog/

 

Cheers.


herosig.jpg

UI Editor Genie                                 GUI Hero


#4 Edward_2

Edward_2

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 521 posts
  • LocationCanada, BC
  • OS:Windows 98
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 11 January 2015 - 02:07 PM

Try this,

 

http://markitup.jaysalvat.com/home/

 

jquery plugin.


sig-big3.jpg


#5 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 12 January 2015 - 01:50 AM

Hi Edward_2 did you implement it? how? any sample code?



#6 Edward_2

Edward_2

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 521 posts
  • LocationCanada, BC
  • OS:Windows 98
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 13 January 2015 - 04:04 PM

Heres the url for the html editor, it includes a save function.

 

http://markitup.jays.../examples/html/


sig-big3.jpg


#7 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 14 January 2015 - 04:02 AM

I think this feature (ui block text with tinymce/wysiwyg editor) must available in ubot to make more easier for us. :(



#8 UBotDev

UBotDev

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 1395 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 15 January 2015 - 07:55 AM

I've noticed that you struggle here so I decided to publish a snippet that I use (using TinyMCE WYSIWYG Editor): 

http://ubotdev.com/s...-implementation

 

 

Hope you like it. ;)

ui html panel("<textarea style=\"height:250px;\" class=\"wysiwyg\" id=\"wysiwyg\" variable=\"#TINYMCE Content Set\" fillwith=\"value\" onchange=\"tinymce.get(\'wysiwyg\').setContent(this.value);\"></textarea>
<script src=\"http://tinymce.cachefly.net/4.1/tinymce.min.js\"></script>
<script>
    //name of UBot variable that will hold TinyMCE content
    var variableName = \'#TINYMCE Content\';    
    
    tinymce.init(\{
        selector:\'textarea.wysiwyg\',
        menubar: true,
        toolbar_items_size: \'medium\',
        toolbar1: \"newdocument | undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent blockquote | bullist numlist | link unlink anchor | image media | code | insertdatetime preview | forecolor backcolor | hr removeformat | subscript superscript | charmap emoticons | cut copy paste | searchreplace | print fullscreen \",
        
        plugins: [
            \"link image lists charmap print preview hr anchor\",
            \"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking\",
            \"table contextmenu emoticons textcolor paste textcolor colorpicker textpattern\"
        ],          

        setup : function(editor) \{
            editor.on(\"change\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
            
            editor.on(\"keyup\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
            
            //updates UBot variable when \"File->New Document\" is clicked
            editor.on(\"init\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
            
            editor.on(\"undo\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
            
            editor.on(\"redo\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
            
            //updates UBot variable when text color is changed
            editor.on(\"nodeChange\", function(editor, e) \{
                updateUBotVariable(variableName);
            \});
        \}
    \});            
</script>
<script>
    function updateUBotVariable(variable)\{
        ubot.settingChanged(variable, tinyMCE.activeEditor.getContent());
    \}
</script>", 400)
define TINYMCE CONTENT SET(#DEF Content) {
    set(#TINYMCE Content Set, "", "Global")
    wait(0.1)
    set(#TINYMCE Content Set, #DEF Content, "Global")
    set(#TINYMCE Content, #DEF Content, "Global")
}


CLICK UBotDev.com - Download FREE UBot Plugins!

______________________________________________

 


#9 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 15 January 2015 - 08:18 AM

Hi UBotDev many thanks for it, but I still have one question how we add more function in the editor like:

 

01-tinymce-text-editor.png

 

Thanks so much bro I wait your answer :D



#10 UBotDev

UBotDev

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 1395 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 16 January 2015 - 11:06 AM

Hi UBotDev many thanks for it, but I still have one question how we add more function in the editor like:

 

I don't think that you showed the screenshot of TinyMCE...but while the snippet I use used TinyMCE, you are limited to that one. You can still modify it a bit to fit your needs, check the options on their page: http://www.tinymce.com/

 

If you don't like TinyMCE, the snippet should give you an idea about how to implement other WYSIWYG editors...

 

Hope that helps.


CLICK UBotDev.com - Download FREE UBot Plugins!

______________________________________________

 


#11 dyvel

dyvel

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 133 posts
  • LocationDenmark
  • OS:Windows 8
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 19 January 2015 - 01:39 PM

Thanks UBotDev for the sample code. It'll come in handy some day.

As for a more full featured example of loading TinyMCE I've used your code and loaded some more "bells and whistles" for those who need it. 

ui html panel("<textarea style=\"height:250px;\" class=\"wysiwyg\" id=\"wysiwyg\" variable=\"#TINYMCE Content Set\" fillwith=\"value\" onchange=\"tinymce.get(\'wysiwyg\').setContent(this.value);\"></textarea>
<script src=\"http://tinymce.cachefly.net/4.1/tinymce.min.js\"></script>
<script>
        tinymce.init(\{
			selector:\'textarea.wysiwyg\',
	        plugins: [
	                \"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker\",
	                \"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking\",
	                \"table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern\"
	        ],
	
	        toolbar1: \"newdocument | styleselect formatselect fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor | table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | visualchars visualblocks nonbreaking\",
	
	        menubar: false,
	        toolbar_items_size: \'medium\',

			setup : function(editor) \{
				editor.on(\"change\", function(editor, e) \{
					ubot.settingChanged(\'#TINYMCE Content\', tinyMCE.activeEditor.getContent());
				\});
				
				editor.on(\"keyup\", function(editor, e) \{
					ubot.settingChanged(\'#TINYMCE Content\', tinyMCE.activeEditor.getContent());
				\});
			\}
		\});
	
</script>",400)
define TINYMCE CONTENT SET(#DEF Content) {
    set(#TINYMCE Content Set,"","Global")
    wait(0.1)
    set(#TINYMCE Content Set,#DEF Content,"Global")
    set(#TINYMCE Content,#DEF Content,"Global")
}

Attached Files



#12 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 19 January 2015 - 03:18 PM

Hi, Thanks so much for Ubot dev and dyvel,

 

I already try and it's work but I still have one question (hope last question :) ) how to remove:

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

 

in blog editor after insert?

 

Thanks



#13 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 19 January 2015 - 03:27 PM

result:

 

2lke0b7.jpg



#14 dyvel

dyvel

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 133 posts
  • LocationDenmark
  • OS:Windows 8
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 19 January 2015 - 03:53 PM

I already replied in private, but for others, just remove the plugin fullpage from the code. Here's a cleaned up version that I prefer. 

ui html panel("<textarea style=\"height:250px;\" class=\"wysiwyg\" id=\"wysiwyg\" variable=\"#TINYMCE Content Set\" fillwith=\"value\" onchange=\"tinymce.get(\'wysiwyg\').setContent(this.value);\"></textarea>
<script src=\"http://tinymce.cachefly.net/4.1/tinymce.min.js\"></script>
<script>
        tinymce.init(\{
			selector:\'textarea.wysiwyg\',
	        plugins: [
	                \"link image lists charmap print preview hr anchor\",
	                \"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking\",
	                \"table contextmenu emoticons textcolor paste textcolor colorpicker textpattern\"
	        ],
	
	        toolbar1: \"newdocument | undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent blockquote | bullist numlist | link unlink anchor | image media | code | insertdatetime preview | forecolor backcolor | hr removeformat | subscript superscript | charmap emoticons | cut copy paste | searchreplace | print fullscreen \",
	
	        menubar: true,
	        toolbar_items_size: \'medium\',

			setup : function(editor) \{
				editor.on(\"change\", function(editor, e) \{
					ubot.settingChanged(\'#TINYMCE Content\', tinyMCE.activeEditor.getContent());
				\});
				
				editor.on(\"keyup\", function(editor, e) \{
					ubot.settingChanged(\'#TINYMCE Content\', tinyMCE.activeEditor.getContent());
				\});
			\}
		\});
	
</script>",400)
define TINYMCE CONTENT SET(#DEF Content) {
    set(#TINYMCE Content Set,"","Global")
    wait(0.1)
    set(#TINYMCE Content Set,#DEF Content,"Global")
    set(#TINYMCE Content,#DEF Content,"Global")
}



#15 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 19 January 2015 - 03:58 PM

PERFECT!

 

Thanks dyvel



#16 Edward_2

Edward_2

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 521 posts
  • LocationCanada, BC
  • OS:Windows 98
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 19 January 2015 - 10:25 PM

how are you doing with getting the contents out of the html panel? If you found a way please share :)


sig-big3.jpg


#17 darryl561

darryl561

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 554 posts
  • LocationAustralia
  • OS:Windows 7
  • Total Memory:2Gb
  • Framework:v4.0
  • License:Developer Edition

Posted 19 January 2015 - 11:49 PM

how are you doing with getting the contents out of the html panel? If you found a way please share :)

 

Hey Edward, if you only tried the code dyvel supplied like I did then yeh, it won't work on it's own. So I went to the link UBotDev supplied, and you need to add this bit after : </script>",400)

TINYMCE CONTENT SET("<p>test <b>bold</b></p>")

then open your debugger, run the bot, then type something into the editor.

 

This is brilliant UBotDev, thanks for sharing. And thanks dyvel for sharing the code with the "bells and whistles".

 

Cheers.


herosig.jpg

UI Editor Genie                                 GUI Hero


#18 Monovski

Monovski

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 263 posts
  • Locationin your heart
  • OS:Windows 10
  • Total Memory:8Gb
  • Framework:v4.5+, unsure
  • License:Developer Edition

Posted 20 January 2015 - 02:53 AM

PERFECTO !


Edited by Monovski, 24 January 2015 - 02:55 PM.


#19 UBotDev

UBotDev

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 1395 posts
  • OS:Windows 10
  • Total Memory:More Than 9Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 20 January 2015 - 04:18 PM

jbsgroup....great to see you got it working!

 

Thanks dyvel for showing an example of how to customize TinyMCE (was a bit short on time so I didn't post it last time). I hope you don't mind if I update my code with the javascript you've added and update the post above.


CLICK UBotDev.com - Download FREE UBot Plugins!

______________________________________________

 


#20 dyvel

dyvel

    Advanced Member

  • Fellow UBotter
  • PipPipPip
  • 133 posts
  • LocationDenmark
  • OS:Windows 8
  • Total Memory:8Gb
  • Framework:v3.5 & v4.0
  • License:Developer Edition

Posted 20 January 2015 - 04:31 PM

Not at all UBotDev - after all, without your first post, I wouldn't been able to do what I did... And that's the whole point of this forum - helping each other :) 







Also tagged with one or more of these keywords: UI Block Text

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users