diff --git a/app/assets/javascripts/my_modules/protocols.js.erb b/app/assets/javascripts/my_modules/protocols.js.erb index e02b6791d..735f37bde 100644 --- a/app/assets/javascripts/my_modules/protocols.js.erb +++ b/app/assets/javascripts/my_modules/protocols.js.erb @@ -22,13 +22,13 @@ function init() { } function initEditMyModuleDescription() { - $('#my_module_description_textarea').on('click', function(){ + $('#my_module_description_view').on('click', function(){ TinyMCE.init('#my_module_description_textarea'); }); } function initEditProtocolDescription() { - $('#protocol_description_textarea').on('click', function(){ + $('#protocol_description_view').on('click', function(){ TinyMCE.init('#protocol_description_textarea'); }); } diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js index 940374dae..ddd3584da 100644 --- a/app/assets/javascripts/sitewide/tiny_mce.js +++ b/app/assets/javascripts/sitewide/tiny_mce.js @@ -19,6 +19,9 @@ var TinyMCE = (function() { return Object.freeze({ init: function(selector) { if (typeof tinyMCE !== 'undefined') { + // Hide element containing HTML view of RTE field + $(selector).closest('form').find('.tinymce-view').addClass('hidden'); + tinyMCE.init({ cache_suffix: '?v=4.9.3', // This suffix should be changed any time library is updated selector: selector, @@ -140,6 +143,7 @@ var TinyMCE = (function() { if (editor.isDirty()) { editor.setContent($(selector).val()); } + editorForm.find('.tinymce-status-badge').addClass('hidden'); editor.remove(); }) .removeClass('hidden'); @@ -172,9 +176,11 @@ var TinyMCE = (function() { }); editor.on('remove', function() { + var editorForm = $(editor.getContainer()).closest('form'); var menuBar = $(editor.getContainer()).find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout'); menuBar.find('.tinymce-save-button').remove(); menuBar.find('.tinymce-cancel-button').remove(); + editorForm.find('.tinymce-view').html(editor.getContent()).removeClass('hidden'); }); }, codesample_content_css: $(selector).data('highlightjs-path') diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index 1fa6fac05..86878247b 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -4,15 +4,6 @@ @import "constants"; -.tinymce-textarea { - border-color: $color-white; - - &:hover { - border-color: $color-alto; - cursor: pointer; - } -} - .protocol-description-content { margin-top: 20px; } diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss index 009c4b65a..e706a78c6 100644 --- a/app/assets/stylesheets/tiny_mce.scss +++ b/app/assets/stylesheets/tiny_mce.scss @@ -1,5 +1,23 @@ @import "constants"; +.tinymce-view { + border: solid 1px; + border-color: $color-white; + box-shadow: 1px 0 2px $color-alto; + min-height: 200px; + padding: 3px; + + &:hover { + border-color: $color-alto; + cursor: pointer; + } + + &:empty::before { + color: $color-silver-chalice; + content: attr(data-placeholder); + } +} + .tinymce-save-button, .tinymce-cancel-button { cursor: pointer; diff --git a/app/helpers/bootstrap_form_helper.rb b/app/helpers/bootstrap_form_helper.rb index 68093327d..c7479f58f 100644 --- a/app/helpers/bootstrap_form_helper.rb +++ b/app/helpers/bootstrap_form_helper.rb @@ -270,7 +270,7 @@ module BootstrapFormHelper # Returns