(Rails app) - In a webpage, I am using multiple forms. Inside each form I have a tinyMCE editor with different id's. But, when it renders, I can see that the TinyMCE editor in the second form is disbaled and when I perform edit action on the form, the TinyMCE content is just flashing inside the TinyMCE and it goes. Then the TinyMCE gets disbaled.
I have integrated the TinyMCE as a plugin and I have initialized it properly. I think the version is 3.4.5.
What could be the issue? Thanks for the help in adv. :)-
Related
I'm using a Rails 6 template (Jumpstart Pro) that has the new stuff hotwire, stimulus, webpacker. It works OK for basic stuff... scaffolding new models and make CRUD forms, etc.
However one of my pages uses a vendor's javascript widget, which also requires jquery.
Neither Jumpstart Pro template nor its Forum have any up-to-date documentation or support for adding jQuery via webpacker (e.g., no support for adding jquery the "right way").
So I've added jquery to the one page that needs it via a good old fashioned script tags in the header
%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"}
followed by the vendor's javascript to initialize the vendor's widget, inside $(document).ready(function(){ init_code_goes_here }); so the widget has time to load to the page.
Works: If I type the page's url into the browser "localhost:5000/cool_page" or "mydev.ngrok/cool_page", it works fine.
Broken: But clicking a link IN the app to go to the page (via link_to "cool page", "/cool_page") does not work:
jQuery is loaded (I have a little "hello world" jquery script that un-hides a div to confirm jquery is loaded)
the vendor widget does not load properly (browser console says widget object is null)
But if I then refresh the page, everything loads fine.
So the page works if "loaded" but not it reached via another page.
From this I infer that the magic behind hotwire/etc is interfering with a proper load of the page when I navigate to it.
So, the question: in a hotwire-enabled Rails 6 app, is there any way to have a nav link that, when clicked, simply tells Rails... skip hotwire shortcuts, load this page for real?
I believe your issue is just that you need to restore default (non-Hotwire) link behavior. There are 3 ways to do that.
See this answer: https://stackoverflow.com/a/68657223/2648054
In short:
1: Set the data-turbo attribute to false.
2: Set the target attribute to "_top".
3: Move the link outside any Turbo frame. Any link inside a Turbo frame, without one of the above attributes, will be handled by Turbo by default.
We are trying use Orbeon Form runner with server-side embedding.
The form renders properly on form runner, however in our java web application the form is not rendered properly i.e. CSS issues.
All the /orbeon/* resources are retrieved from orbeon application, but the CSS is not applied properly. I suspect it could be because of the extra div that are added for the embedded/portlet.
In Form Runner
Full Size Image
In Java Web Application
Full Size Image
Also, if we use the wizard view, it works in form runner, but does not work in embedded java web application. The sections are shown on the same screen.
When Orbeon Forms produces the whole page, it adds an orbeon class on the body, and then pretty much all the CSS that comes with Orbeon Forms is "prefixed" with .orbeon …. This is done to minimize the risk of Orbeon Forms' CSS conflicting with your own CSS.
I can't be sure that this is the problem, but if the CSS doesn't apply when embedding, you might need to add a class="orbeon" on the element that contains the content you're embedding.
Thanks for your guidance. I was able to resolve the problem.
When embedding forms, as you said orbeon regenerates the CSS, and also appends "o0" (#o0xforms-form) to each control's id. However, the xforms.css still refers to control with (id #xforms-form), hence styles are not applied correctly.
Overwritten the xforms.css with custom app-xforms.css which uses (#o0xforms-form) which fixes the problem.
Is there a way to edit your views and CSS and see the results on the fly like with a jsfiddle program? I can't seem to use jsfiddle when programming with Rails because so many of my views are Rails code.
Try the Webkit web inspector, or Firebug in Firefox. You can select any element, edit attributes, modify the css, and change the text on the page.
If you have your web running on a server (localhost works too) you can try WebPutty from Fog Creek guys to change your CSS and see the results on the fly. It's free for now.
You can read how to import your site here
i have tinymce embedded in my website, so if users want to edit content, then can click on an "EDIT" link and it brings up the content in tinymce editor. when they click "Save", i save the html to a database. this works perfect and avoids them calling me when they need content changes as they can go in directly and next time they reload the main page, it loads up their changed content.
they now want to be able to add their own images. I see there is some image support in tinymce as seen here, but in my case, the images would be on their computer.
So i am looking for some advice on how to handle image support using tinymce on my asp.net mvc website similar to how stackoverflow allows you to upload and include an image in your question all in one step
any suggestions?
I guess you need to take a look here:
Best TinyMce editor Image Manager / File upload for Asp.net Mvc
it has a list of tinyMCE file browsers/uploaders/managers which work with MVC :)
I had a similar issue and solved it by;
Allowing the user to upload images which i then stored in the file system.
Once the image was saved then you could use tinyMCE to link to it.
It's a round-about way of doing it but it worked. If your images are stored on a users computer then you're going to need to implement something like this me thinks as you can't assume you can link to the image and if you can you can't be sure the computer will be on.
Maybe you can give this TinyMCE-plugin a try (the official Moxiecode plugins are quite expensive):
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
I haven't tested it yet, but it's a free add on that allows uploading and selecting files.
HTML 5 supports embedded images. You can embed image in html code as a base64 string.
Example Code:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQYmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>
There is a opensource TinyMCE plugin available in github:
https://github.com/buddyexpress/bdesk_photo
Hi I have to have a popup WYSIWYG editor into my ROR application. I want to develop the editor like www.wikispaces.com used. Here they used Jquery (if you want like that editor , you need to login ) . I want the same functionality . Can anyone please suggest how can i do this and please give me the reference site for the development JQuery with WYSIWYG.
Well, a quick google search turns up jwysiwyg: http://code.google.com/p/jwysiwyg/
And there seem to be some articles on how it's used.
I've always used TinyMCE, it works very well.