Can I Add Wysiwyg Editor In Ui Block Text?

[Monovski 4]

Hello everyone,

 

Can I add WYSIWYG Editor in UI Block Text?

 

Please advise

 

Thanks

[Ptrick125 45]

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.

[darryl561 177]

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.ubotstudio.com/forum/index.php?/topic/16146-sell-plugin-advanced-dialog/

 

Cheers.

[Edward_2 85]

Try this,

 

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

 

jquery plugin.

[Monovski 4]

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

[Edward_2 85]

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

 

http://markitup.jaysalvat.com/examples/html/

[Monovski 4]

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

[UBotDev 276]

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

http://ubotdev.com/snippet-tinymce-wysiwyg-editor-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")
}

[Monovski 4]

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

 

http://oregonstate.edu/cws/training/sites/default/files/book/drupal-deep-dive/tiny-mce-wysiwyg/00-overview/01-tinymce-text-editor.png

 

Thanks so much bro I wait your answer

[UBotDev 276]

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.

[dyvel 20]

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")
}

[Monovski 4]

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

[Monovski 4]

result:

 

http://oi61.tinypic.com/2lke0b7.jpg

[dyvel 20]

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")
}

[Monovski 4]

PERFECT!

 

Thanks dyvel

[Edward_2 85]

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

[darryl561 177]

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.

[Monovski 4]

PERFECTO !

Edited January 24, 2015 by Monovski

[UBotDev 276]

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.

[dyvel 20]

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  

[Monovski 4]

Hi dyvel,

 

Are you use SSUB as well? http://www.ubotstudio.com/forum/index.php?/topic/16211-sell-ssub-v7-the-best-drag-drop-interface-builder-for-ubot-studio-bootstrap-30-css-styling/ ?

[dyvel 20]

Hi dyvel,

 

Are you use SSUB as well? http://www.ubotstudio.com/forum/index.php?/topic/16211-sell-ssub-v7-the-best-drag-drop-interface-builder-for-ubot-studio-bootstrap-30-css-styling/ ?

 

No I don't - I create my own UI from scratch, but I'm also using bootstrap framework. 

[Monovski 4]

For Dyvel and all member

 

Any method to run the compiled ubot (the .exe file) without open browser.

 

E.g

 

I have 3 tabs (tab a, tab b and tab c) but I don't need browser open in tab a so I can fill it with UI command only, when I need to run bot I just click tab b or tab c.

 

did you done it?

[UBotDev 276]

MORE TINYMCE FEATURES BUGFIX + CELANUP:

I've got some time today so I've updated the snippet to support more TinyMCE features (thanks to dyvel for providing that part).

The code that he shared has some small bugs (UBot variable was not updated when user clicked "New Document", "Undo" and"Redo"), that's why make sure to check the updated code in my initial response or on my blog: http://ubotdev.com/snippet-tinymce-wysiwyg-editor-implementation

 

I've tested most of the buttons/menu items and I think it works OK now; if you find any problems let me know.

 

P.S.: jbsgroup...you are getting a bit off-topic here...maybe open a new thread for that?

[Edward_2 85]

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

 

How is that? here is the docs for tinymce

 

http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent

 

 

// Sets the HTML contents of the activeEditor editor

 

tinyMCE.activeEditor.setContent('<span>some</span> html');

// Sets the raw contents of the activeEditor editor

tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});

// Sets the content of a specific editor (my_editor in this example)

tinyMCE.get('my_editor').setContent(data);

// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added

tinyMCE.activeEditor.setContent('some html', {format : 'bbcode'});

 

 

So where did this code come from?

 

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

 

--------------------------------------------------------------------------

 

Im actually working on something similar with codemirror. Would like to incorporate it into ubot as well.