Background:
To add some basic HTML/rich text editing to our application that is compatible with our web interface I am attempting to embedded CKEditor within the swing based webrenderer browser. Webrenderer acts like a swing component and then loads up my simple HTML page containing an invocation to start CKEditor.
This works fine and I am able to set/get the edited HTML text within my application.
Problem:
The issue I'm seeing is that whenever the ENTER key is hit it is as if it is processed twice. E.g each press of the ENTER key generates 2 lines in the edited text. Or if typing in a bullet list then a press of ENTER causes the list to terminate an text entry to start on a fresh line below (same behaviour as if you hit ENTER twice in a normal browser).
If I switch CKEditor to source mode or if I use a basic HTML textarea then ENTER behaves normally. Also if I load my simple editor page into firefox directly then it works fine.
I guess some interaction is occuring between CKEditor and the swing browser. (I've recently noticed that if the browser is used inside a JDialog with default button then any hit of ENTER activates the default button, so not sure where the handling of ENTER is between swing and webrenderer)
Thanks,
Rob.
May Be Useful CKEditor Tutorial
Related
I have been using Clojure, ClojureScript, lein, shadow-cljs, re-frame, reagent, Emacs, and CIDER to work on a Clojure/ClojureScript dynamic web app project.
Usually, I build the project by executing the command cider-jack-in-cljs in Emacs, choosing shadow-cljs, then shadow for REPL type, and, finally, app for the building option.
The application loads in localhost:3005 with a debugging dashboard. Apparently, this UI is called "re-frame-10x":
After clicking on the up-right arrow icon on the top-right:
I managed to pop out the debugging dashboard into a new window in Google Chrome. It was injecting some CSS and hiding a button on the webpage. Hence, I decided to "remove it" by popping-it out.
But, I would like to move it back to the browser tab that has localhost on the address. How to do it?
As suggested by #eugene-pakhomov, it was just closing that window. I must highlight that I had tried that before, the only problem was that there were multiple windows of that type. And all of them need to be closed for the process to work!
Not sure why the program opens multiple windows...
Debugging a page where I see that there are two calls made to the page, one is the initial call and one is made when the first has been recieved and the browser parses the document. I am however having trouble finding the source of the second call. I have built the javascript i dev mode so I have sourcemaps but the call seems to be originating from the html code itself. Looking in the Network tab of devtools I see this
in Chrome and this
in Firefox
Firefox seems to identify the Initiator as image but no more details as to what image.
What should I look for in the code to find the source of the call? Is there something else I can do to get more details of where the call is made from?
Update:
Clicking the initator item in Chrome marks the first Doctype line in the document
That the request is recognized as an image is an indication for either an <img> HTML element or a url() CSS function that has a URL that references the document itself instead of an image.
Check the HTML
From my tests, this does not happen when the src attribute is empty but it happens when you set it to an anchor on the page.
So, in order to find the culprit, go to the Inspector (Firefox) or Elements (Chrome) panel, press Ctrl+F (Windows, Linux) or Cmd+F (macOS) and search for img[src^="#"]. That finds all <img> elements that have a src attribute with a value starting with a hash.
Check the CSS
Browsers (incorrectly) send a network request when the CSS url() function is set to an empty string, i.e. url(), url(''), or url("").
To check whether it is set within the style attribute of one of the HTML elements, search for url('') and url() within the Inspector as described above.
If it cannot be found there, you need to search within the style sheets.
Chrome
In Chrome this is possible by pressing Ctrl+Shift+F (Windows, Linux) or Cmd+Shift+F (macOS) while the focus is within the DevTools. Doing so opens a search tool that allows to search across all loaded sources. Type url('') in there and hit Enter. If nothing is found, try it again with url("") and url().
Firefox
In Firefox there's no such global search yet (as of Firefox 85), unfortunately. Though there are two ways other ways to search through the style sheets.
Via the Style Editor
The Style Editor allows you to inspect the style sheets, though you have to search in each one separately by selecting it at the left side and then pressing Ctrl+F (Windows, Linux) or Cmd+F (macOS), typing url(), url(''), or url("") and hitting Enter.
Via the Network Monitor
There's a feature that allows you to search through the network request reponses within the Network Monitor. Click the magnifying glass button, which opens the search tool. In the input field type url(), url(''), or url("") and hit Enter.
The textbox in infopath form does not word-wrap the text in Chrome, but does it on IE? I have the multi-line setting checked on the text box. any idea?
Thanks in advance.
Upload a new css file to the “Style Library”.
File should contain the following:
textarea { white-space: pre-wrap !important; word-wrap: break-word
!important; }
Go to Site Settings – Look and Feel – Master Page
Set the Alternate CSS URL to point to the new CSS file that was added to the “Style Library”
Make sure to check “Reset all subsites…..”
Save and issue should be resolved for both Chrome and Firefox
You will have to replace the Text Box Control with a Rich Text Box Control and reconfigure the setting in the new control. You can rename the Rich Text Box control with the same field name after you delete the Text Box Control.
This is just common to Chrome right now, but Edge and Safari, could make the same changes, so might as well make the change to the form. Common to all three is they won't update a form when you make a change to the form.
You can add a "Query a Data Connection Rule" to another control (like a button) and when you use that control it will contact the server and update the form. If you use the same control on different views in the same form it seems to continue working, trial and error on that.
I assume Edge and Safari will make changes similar to Chrome, so you might as well change the Text Box to Rich Text. I have 300 controls to change. Good luck.
I have done it two different ways. I wanted to target only specific forms rather than spend a lot of time on it or do it in master page, I created CSS using Code from solution #1, then dropped it in the site assets library. After that I edited the InfoPath Forms SharePoint Web Part page, added a Content Editor Web Part to the page at bottom after the InfoPath Form Web Part, linked the new Content Editor Web Part to the CSS file, changed the Content Editor Web Part settings to not be seen, etc. and saved the Content Editor Web Part, Then Saved the Web Part Page.
Another way I have done this is added a Rich Text Editor Control to the InfoPath Form, then hide the original Text Box Control and set the Text box control default value to that of the Rich Text Editor Control. Sometimes this is quicker and easier than redoing all the business logic, especially if you are trying to go to PowerApps and get away from InfoPath, don't waste as much time on it. Obviously the drawback is increasing the number of SharePoint fields and fields in the form as well.
Best Regards.
SG.
Add a style.
textarea { white-space: pre-wrap !important; word-wrap: break-word !important; }
using script editor WP
I have an issue in our currently running .net application. we are using autocomplete extender control associated with city textbox for city selection. Due to slow internet connection, when user uses this application with partially rendered, it is not suggesting for entered city (highlighted in red).
I have used Page_Init event for first disable the textbox, than enable it on Page_Load, but it's not working (to prevent user for enter text when the page is not loaded completely).
Is there any solution to overcome this problem?
After loaded successfully,
So you want to disable the textboxes until the page has loaded? I am not sure if it will work like you want but have you considered using jQuery to disable the textbox? For example here, here, here
I am in the process of creating a simple WYSIWYG HTML editor to enable the users of my application to design simple HTML emails.
At the moment I have decided to use the web browser control with MSHTML to enable me to edit what is displayed. I have a tool bar which holds all of the relevant buttons, bold, underline, etc.
I need a way to check if the current block has any formatting so the correct state can be displayed on the buttons in the tool bar. I tried to add an event handler to the IHTMLDocument to fire when the mouse is moved or the arrow keys are pressed, however, this stopped the web browser from taking any input.
Is there a simpler way to achieve this goal?
There are several rich editors for free out of that tinyMCE is one of the better editor.
For list of editors see the link below.
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors