I just upgraded from Umbraco 4.7.1 to 6.1.6
I have a TinyMCE control in my custom section. It stopped working after the upgrade.Here is part of my code for the page in the custom section:
public partial class MyCustomPage : UmbracoEnsuredPage
{
private TinyMCE txtLongDesc;
protected UmbracoPanel UmbPanel { get { return Web.FindControlRecursive(Master, "umpContent") as UmbracoPanel; } }
protected override void Page_Init(object sender, EventArgs e)
{
base.Page_Init(sender, e);
PutTinyMce(ref txtLongDesc, "txtLongDesc", phLongDesc, UmbPanel);
}
public static void PutTinyMce(ref TinyMCE control, string controlId, PlaceHolder placeHolder, UmbracoPanel panel)
{
DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(2710); // My custom TinyMCE DataType
control = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
control.ID = controlId;
placeHolder.Controls.Add(control);
panel.Menu.NewElement("div", "umbTinymceMenu_" + control.ClientID, "tinymceMenuBar", 0); // Add TinyMCE controls to menu bar
}
}
When the page is rendered, the textarea is hidden, but the TinyMCE is not shown.This is the JavaScript error I got:
TypeError: document.getElementById(...) is null #
.../umbraco/plugins/tinymce3/tinymce3tinymceCompress.aspx?rnd=00000000-0000-0000-0000-000000000000&module=gzipmodule&themes=umbraco&plugins=contextmenu,umbracoimg,paste,inlinepopups,table,umbracocss,advlink,umbracoembed,spellchecker,noneditable,umbracomacro,umbracopaste,umbracolink,umbracocontextmenu&languages=en:19803
This is the line causing the error (line 19803)
document.getElementById(ed.getParam("umbraco_toolbar_id", "*")).appendChild(c);
Has anyone experienced this problem? Any idea how to fix it?
After fiddling with it, I managed to fix it, although I don't really understand why.
Apparently in Umbraco 6.1.6 you have to add umbraco_toolbar_id manually, so I added these 2 lines
control.ClientIDMode = ClientIDMode.Static;
control.config.Add("umbraco_toolbar_id", "umbTinymceMenu_" + control.ClientID);
to this function, which becomes
public static void PutTinyMce(ref TinyMCE control, string controlId, PlaceHolder placeHolder, UmbracoPanel panel)
{
DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(Static.DTD_ID_SMALL_RTE); // Custom TinyMCE DataType
control = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
control.ID = controlId;
control.ClientIDMode = ClientIDMode.Static;
control.config.Add("umbraco_toolbar_id", "umbTinymceMenu_" + control.ClientID);
placeHolder.Controls.Add(control);
panel.Menu.NewElement("div", "umbTinymceMenu_" + control.ClientID, "tinymceMenuBar", 0); // Add TinyMCE controls to menu bar
}
That fixed it. My TinyMCE appears again :)
Related
How to Display Entry Control with PlaceHolder Text in MAUI.
I need to write a EntryHandler which would look like the below Image
(Last Name* is the placeholder text)
I have written a entry handler with out the border which is looking like below, the problem with this is as the user starts typing the placeholder text hides
public class BorderlessEntry : Entry
{
}
public App(AppShell page)
{
InitializeComponent();
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(BorderlessEntry), (handler, view) =>
{
if (view is BorderlessEntry)
{
#if __ANDROID__
handler.PlatformView.SetBackgroundColor(Microsoft.Maui.Graphics.Colors.Transparent.ToAndroid());
handler.PlatformView.Hint = view.Placeholder;
#elif __IOS__
handler.PlatformView.BackgroundColor = Microsoft.Maui.Graphics.Colors.Transparent;
handler.PlatformView.Layer.BackgroundColor = Microsoft.Maui.Graphics.Colors.Transparent;
handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
}
});
}
I have been able to achieve the same in Xamarin Forms using MaterialEntryRenderer but the same is not supported in .net Maui
Any help is appreciated!
I am using the ckEditor along with GWT and SmartGWT. I have a problem that whenever the ckEditor displays a dialog (e.g. link button, table button), although the items in the dialog gain focus (input texts work fine, I can write inside them), the dropdowns (select elements) when clicking on them, do not expand to show their option items (they expand only when they have focus and user hits "spacebar"). This happens only in firefox and chrome (latest versions) while on IE11 it works as expected.
Note that I am already aware of the "focus" problem existing if a ckEditor instance exists in a GWT/jquery modal and I have already included a fix:
$wnd.CKEDITOR.on('dialogDefinition', function (evt) {
var dialog = evt.data.definition.dialog;
dialog.on('show', function () {
var element = this.getElement();
var labelledby = element.getAttribute('aria-labelledby');
var nativeElement = $wnd.document.querySelector("[aria-labelledby='" + labelledby + "']");
nativeElement.onclick = function (evt) {
if ((evt.target.tagName == "INPUT" || evt.target.tagName == "SELECT" || evt.target.tagName == "TEXTAREA") &&
-1 != evt.target.className.indexOf("cke_dialog_ui_input")) {
evt.target.focus();
};
}
});
});
Any hint how I can make the dropdowns to behave correctly? To me it looks like the dropdown element does not receive the click event (although on click it gets focus) or somehow the event's propagation stops unexpectedly.
EDIT
Forgot to mention that the problem appears if the ckEditor instance is inside a modal SmartGWT window. More specifically if I set
Window win = new Window(); //com.smartgwt.client.widgets.Window
win.setIsModal(false);
and then add the DynamicForm form which contains the ckEditor item on that window then the dialog dropdowns work fine, however if I set
win.setIsModal(true);
I get the faulty behavior described above
In case anyone else has the same problem with me, the solution is to call win.hideClickMask() upon show event of the dialog. This can be achieved in many ways depending on how ckEditor is integrated with SmartGWT. In my implementation this is achieved by overriding onDialogShow() as below:
final CKEditor ckEditor = new CKEditor(conf) {
#Override
public void onDialogShow() {
// to overcome the problem that smartgwt modality obstruct the dropdowns of a ckeditor dialog to be pressed
final NodeList<Element> allWindowsWithModalMask = findAllWindowsWithModalMask();
if(allWindowsWithModalMask != null ) {
for(int i =0; i<allWindowsWithModalMask.getLength(); i++) {
Element el = allWindowsWithModalMask.getItem(i);
String id = el.getAttribute("eventproxy");
if(Canvas.getById(id) != null) {
hideClickMask(Canvas.getById(id).getOrCreateJsObj());
}
}
}
}
};
and
protected native NodeList<Element> findAllWindowsWithModalMask() /*-{
return $wnd.document.querySelectorAll("[class='windowBackground']");
}-*/;
protected native void hideClickMask(JavaScriptObject windowCanvas) /*-{
windowCanvas.hideClickMask();
}-*/;
I use RPC calls to connect to mySql and bring text data from there.
My page is defined as split Layout.
my problem is that I don't know how to update the main layout with different text.
if i use the clear() method it will remove all the layout !
"p" is the splitLayout.
RPC:
rpcService.getChapterTxt(selectedBook,bookChapters[selectedBook],
new AsyncCallback<List<BibleTxt>>(){
public void onFailure(Throwable caught)
{
Window.alert("Failed getting Chapter");
}
public void onSuccess(List<BibleTxt> result)
{
int i = 0 ;
String verseText ="";
//Label verseLabel = new Label();
PPanel chapterPar = new PPanel();
HTML page= new HTML(verseText);
for(i=0;i<result.size();i++)
{
verseText = result.get(i).getVerseText();
//verseLabel.setText(verseText);
page.setText(page.getText() + verseText);
}
chapterPar.add(page);
//p.clear();
p.add(chapterPar); // adds the main layout
}
});
Why you don't reuse the text component changing its content text instead of continuously detaching/attaching elements to the widget hierarchy. That way should perform better and cause less problems.
When I open a file in a TextEditor the status bar shows information like positions, whether the file is writable or not ...
Now I have created a MultiPageEditor that contains a class derived from org.eclipse.ui.editors.text.TextEditor. If I edit a file with this editor the status bar remains empty.
Is there an easy way make the standard status bar items visible if the TextEditor is embedded in a MultiPageEditor?
Im using Eclipse Kepler.
In your MultiPageEditorActionBarContributor class you need to do:
private StatusLineContributionItem _showLine;
...
_showLine = new StatusLineContributionItem(ITextEditorActionConstants.STATUS_CATEGORY_INPUT_POSITION, true, 14);
#Override
public void setActivePage(IEditorPart part)
{
if (part instanceof ITextEditorExtension)
{
ITextEditorExtension extension = (ITextEditorExtension)part;
extension.setStatusField(_showLine, ITextEditorActionConstants.STATUS_CATEGORY_INPUT_POSITION);
}
}
#Override
public void contributeToStatusLine(IStatusLineManager statusLineManager)
{
statusLineManager.add(_showLine);
}
I have a CellList that I want to style. I want to change the cursor style, the ugly color of a selected cell . I checked several questions and discussions on stack overflow,but none of them worked.
I checked these one:
CellList GWT CSS Style
How do I style a gwt 2.1 CellTables headers?
Her is my code:
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {
}
#Source({CellList.Style.DEFAULT_CSS, "CellTableStyle.css"})
CellListStyle style();
}
public SearchViewImpl() {
CompanyCell companyCell = new CompanyCell();
//it doesn't work :S
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
rootElement = ourUiBinder.createAndBindUi(this);
loadingImage.setVisible(false);
}
Am I missing something? I Cleared Browser cache, Restarted server, F5 F5 F5 .... F5 (pressed refresh again and again) and nothing ...!
Thanks for help in advance.
Besides injecting the CSS it's important that you call the CellListStyle style cellListStyle() and not just style():
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {}
#Override
#Source("cellListStyle.css")
CellListStyle cellListStyle();
}
and then you do
CellListResource.INSTANCE.cellListStyle().ensureInjected();
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
Make sure you inject the css resource.
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
You can follow the following link
How do you change the mouse over highlighting?