I'm using the TinyMCE HTML Editor with the insert image function. The application I'm working on isn't allowed to use images from external URLs. So they should only be able to use the Upload option. Is there a way to disable the Source textbox shown below? Is there an initialisation property that can be used?
Here is an example of the TinyMCE editor in question. https://www.tiny.cloud/docs/demo/local-upload/
I couldn't find an official way to do this so I just targeted all the associated HTML elements and hid them using CSS.
.tox-dialog .tox-dialog__content-js .tox-dialog__body .tox-form__controls-h-stack input[type=url].tox-textfield {
display: none;
}
.tox-dialog .tox-dialog__content-js .tox-dialog__body div.tox-form__group:first-child label {
display: none;
}
.tox-dialog .tox-dialog__content-js .tox-dialog__body .tox-form__controls-h-stack div.tox-form__group:first-child label {
display: block;
}
Related
I am using tinymce link plugin to add link in text area . I want to change the hyperlink text into a distinguishable text ( color change and bold in style ). how to do that ?
You can control this via CSS. There is a setting for TinyMCE called content_css
https://www.tinymce.com/docs/configure/content-appearance/#content_css
...this allows you to pass any CSS you like to TinyMCE to control how the content is styled. You could then change the styles on all links:
a {
font-weight: bold;
color: green;
}
I have a master detail type view setup where you can enter data on the right side (detail) and it will show in a summary on the left side (detail). I accomplished this view using CSS and jQuery. All of the data is coming from a mysql database.
The problem is caused by the html tags that tinymce inserts into the textarea. When I try to display it using the text-overflow:ellipsis; CSS it doesn't put in the ellipsis.
CSS:
.OverflowData {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
Here is a stripped down jsFiddle with the resulting data with the tinymce html tags added and what happens on the left side.
Now Here is a version where I stripped out the <p> tags and the ellipsis shows properly.
So my question is: is it possible to have the summary and ellipsis show properly in the first case or must I strip out all of the html from the tinymce textarea beforehand?
I am open to other suggestions.
The settings have to be on the immediate parent so this works when added to your sample (note the 'p' in the selector):
.OverflowData p {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
When I check the content area within tinymce using firebug, I notice that TinyMce is adding a class=mceItemTable to each of my tables. This is annoying because in the theme stylesheet it has definition for this which sets all tables to have a dotted bored and looks horrible.
Is there any way to turn this off?
Cool jsfiddle for tinymce
PS: Is there a correct name for a css definition/group like this?
.className {
background: blue;
color: red;
font-size: 12px;
}
You may set whatever class you like using this configuration setting: http://www.tinymce.com/wiki.php/Configuration:visual_table_class
I managed to get TinyMCE to keep my <script> tag in the source, so it is no longer stripped as an invalid tag. However, in edit mode, it doesn't render anything. The script tag is there in the html view, but it's just a blank line in edit mode.
Instead, I want tinyMCE to render anything instead of nothing. Even if it is just simple text like [here lies a script]. Is this possible? How? I can't get it working for the life of me. Thanks!
You can use stylesheets to style script elements, I would advise trying that in TinyMCE, here's a fiddle so you can see what I mean:
https://jsfiddle.net/plenuM/m9zr1dqw/
script {
display:block;
height:20px;
width:100%;
background:red;
text-align:center;
color:#fff;
overflow:hidden;
}
script:before {
content:"(SCRIPT)";
}
You will want to only import the CSS when TinyMCE is active though, the TinyMCE documentation can assist you with that.
The script tag should act as if on a regular html page.
I could not figure out how to enter text into HTML Editor using Watin.
I tried //ie.TextField(Find.ById("htmlDetail_ctl06_ctl04")).TypeText("ABCD");
But got error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
Can you give some example how to enter text into AJAX HTML Editor using watin please? I am not sure what to plug in frameSrc and java script from this solution - Unit testing the MS AJAX Toolkit HTML editor
Here is html from Develper tool when click the text box:
<textarea class="ajax__htmleditor_htmlpanel_default" id="htmlDetail_ctl06_ctl04" style="width: 100%; display: none; height: 100%;" control="[object Object]"/>
You can remove css or class using jQuery ( jquery-1.4.2.min.js ). like:
TextField notetext = iepopup.TextField(Find.ById("notetext"));
iepopup.Eval("$('#notetext').removeClass('note'); ");
iepopup.Eval("$('#notetext').css('display', 'block'); ");
notetext.Click();
notetext.TypeText(sNote);
Hope, it helps.
Link lnk = ie.Link(Find.ById("edButtonHTML"));
ie.WaitForComplete();
lnk.Click();
ie.WaitForComplete();
ie.TextField(Find.ByName("content")).TypeText("I am Amit chadha");
ie.WaitForComplete();