tag:blogger.com,1999:blog-12214002.post1657572742953843237..comments2024-03-09T06:56:57.099-05:00Comments on Let's Wreck This Together...with Oracle Application Express!: How do I create a responsive Rich Text Editor in Oracle APEX?Joel R. Kallmanhttp://www.blogger.com/profile/01915290758512999160noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-12214002.post-16866082049857479262018-02-19T08:04:58.193-05:002018-02-19T08:04:58.193-05:00If however you don't want to use any JS, here ...If however you don't want to use any JS, here is my CSS hack:<br /><br />Add 'stretch-CKE' to CSS Classes under Appearance to all editors you wish to be responsive,<br />and the following inline CSS to your page (or global stylesheet):<br /><br />.stretch-CKE > div.t-Form-inputContainer > div.t-Form-itemWrapper > div{<br /> width: 100%;<br />}<br /><br />.stretch-CKE > div.t-Form-inputContainer > div.t-Form-itemWrapper > div > div{<br /> width: initial !important;<br />}<br /><br />-------------<br /><br />or if you only want to change one editor and know its name:<br /><br />#ITEMNAME_DISPLAY{<br /> width: 100%;<br />}<br />#cke_ITEMNAME{<br /> width: initial !important;<br />}<br />Stefan Dobrehttps://www.blogger.com/profile/12988412625476331347noreply@blogger.comtag:blogger.com,1999:blog-12214002.post-83058120975496765202017-12-11T20:42:58.851-05:002017-12-11T20:42:58.851-05:00Hello Joel
I really like the idea! Couple thing I...Hello Joel<br /><br />I really like the idea! Couple thing I would add.<br />1. Check if the CKEDITOR library exists, just in case the rich text item is in read only. Otherwise the resize action would fail.<br />2. Replace the hardcoded item name.<br /><br />Here's what I came up with.<br /><br />//make sure that the object is defined (readonly CKEditor won't load the library)<br />if (CKEDITOR){<br /> //for all CKEditor items<br /> for (var i in CKEDITOR.instances) {<br /> (function(i){<br /> //current CKEditor item<br /> var l_editor = CKEDITOR.instances[i],<br /> l_container = $("#" + l_editor.name).closest(".t-Form-inputContainer");<br /> <br /> //Set initial width/height<br /> l_editor.on("instanceReady", function(event){<br /> //console.log('instance ready: ' + l_editor.name);<br /> <br /> var l_width = l_container.width() - 5,<br /> l_height = 300;<br /> <br /> l_editor.resize(l_width, l_height);<br /> });<br /><br /> //Handle page resize<br /> //not using apexwindowresized because of the delay/debounce<br /> $( window ).resize(function() {<br /> var l_width = l_container.width() - 5,<br /> l_height = 300;<br /><br /> l_editor.resize(l_width, l_height);<br /> });<br /> })(i);<br /> }<br />}<br /><br /><br />It could be copied in a Page Load dynamic action on page zero to affect all rich text items of an application or wrapped in a jQuery on document ready and included in the application as a file on it's own.Maxime Tremblayhttps://www.blogger.com/profile/07663723545046859479noreply@blogger.comtag:blogger.com,1999:blog-12214002.post-89123822411665303342017-12-08T16:55:18.213-05:002017-12-08T16:55:18.213-05:00I put this to use right away, works great. And jus...I put this to use right away, works great. And just for anyone else who is mostly copying-and-pasting (and doesn't really know much about JS), you can use that single dynamic action for multiple items, as in:<br /><br />CKEDITOR.instances.P52_QUESTION.resize( $("#P52_QUESTION").closest(".t-Form-inputContainer").width() - 50, 100);<br />CKEDITOR.instances.P52_ANSWER.resize( $("#P52_ANSWER").closest(".t-Form-inputContainer").width() - 50, 100);<br /><br />CKEDITOR.instances.P52_CHOICE_1.resize( $("#P52_CHOICE_1").closest(".t-Form-inputContainer").width() - 50, 100);<br />CKEDITOR.instances.P52_CHOICE_2.resize( $("#P52_CHOICE_2").closest(".t-Form-inputContainer").width() - 50, 100);<br />CKEDITOR.instances.P52_CHOICE_3.resize( $("#P52_CHOICE_3").closest(".t-Form-inputContainer").width() - 50, 100);<br />CKEDITOR.instances.P52_CHOICE_4.resize( $("#P52_CHOICE_4").closest(".t-Form-inputContainer").width() - 50, 100);<br />CKEDITOR.instances.P52_CHOICE_5.resize( $("#P52_CHOICE_5").closest(".t-Form-inputContainer").width() - 50, 100);<br />Steven Feuersteinhttps://www.blogger.com/profile/18405765731886460622noreply@blogger.com