Monovski 4 Posted January 9, 2015 Report Share Posted January 9, 2015 Hello everyone, Can I add WYSIWYG Editor in UI Block Text? Please advise Thanks Quote Link to post Share on other sites
Ptrick125 45 Posted January 10, 2015 Report Share Posted January 10, 2015 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. Quote Link to post Share on other sites
darryl561 177 Posted January 11, 2015 Report Share Posted January 11, 2015 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. 1 Quote Link to post Share on other sites
Edward_2 85 Posted January 11, 2015 Report Share Posted January 11, 2015 Try this, http://markitup.jaysalvat.com/home/ jquery plugin. 2 Quote Link to post Share on other sites
Monovski 4 Posted January 12, 2015 Author Report Share Posted January 12, 2015 Hi Edward_2 did you implement it? how? any sample code? Quote Link to post Share on other sites
Edward_2 85 Posted January 13, 2015 Report Share Posted January 13, 2015 Heres the url for the html editor, it includes a save function. http://markitup.jaysalvat.com/examples/html/ Quote Link to post Share on other sites
Monovski 4 Posted January 14, 2015 Author Report Share Posted January 14, 2015 I think this feature (ui block text with tinymce/wysiwyg editor) must available in ubot to make more easier for us. 1 Quote Link to post Share on other sites
UBotDev 276 Posted January 15, 2015 Report Share Posted January 15, 2015 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") } 3 Quote Link to post Share on other sites
Monovski 4 Posted January 15, 2015 Author Report Share Posted January 15, 2015 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 Quote Link to post Share on other sites
UBotDev 276 Posted January 16, 2015 Report Share Posted January 16, 2015 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. 1 Quote Link to post Share on other sites
dyvel 20 Posted January 19, 2015 Report Share Posted January 19, 2015 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") } 2 Quote Link to post Share on other sites
Monovski 4 Posted January 19, 2015 Author Report Share Posted January 19, 2015 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 Quote Link to post Share on other sites
Monovski 4 Posted January 19, 2015 Author Report Share Posted January 19, 2015 result: http://oi61.tinypic.com/2lke0b7.jpg Quote Link to post Share on other sites
dyvel 20 Posted January 19, 2015 Report Share Posted January 19, 2015 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") } 3 Quote Link to post Share on other sites
Monovski 4 Posted January 19, 2015 Author Report Share Posted January 19, 2015 PERFECT! Thanks dyvel Quote Link to post Share on other sites
Edward_2 85 Posted January 20, 2015 Report Share Posted January 20, 2015 how are you doing with getting the contents out of the html panel? If you found a way please share Quote Link to post Share on other sites
darryl561 177 Posted January 20, 2015 Report Share Posted January 20, 2015 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. 1 Quote Link to post Share on other sites
Monovski 4 Posted January 20, 2015 Author Report Share Posted January 20, 2015 (edited) PERFECTO ! Edited January 24, 2015 by Monovski Quote Link to post Share on other sites
UBotDev 276 Posted January 20, 2015 Report Share Posted January 20, 2015 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. Quote Link to post Share on other sites
dyvel 20 Posted January 20, 2015 Report Share Posted January 20, 2015 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 Quote Link to post Share on other sites
Monovski 4 Posted January 20, 2015 Author Report Share Posted January 20, 2015 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/ ? Quote Link to post Share on other sites
dyvel 20 Posted January 20, 2015 Report Share Posted January 20, 2015 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. Quote Link to post Share on other sites
Monovski 4 Posted January 21, 2015 Author Report Share Posted January 21, 2015 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? Quote Link to post Share on other sites
UBotDev 276 Posted January 22, 2015 Report Share Posted January 22, 2015 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? 1 Quote Link to post Share on other sites
Edward_2 85 Posted January 22, 2015 Report Share Posted January 22, 2015 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 editortinyMCE.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 addedtinyMCE.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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.