I have problem with TinyMCE. I work in web forms. Icons on client environment are missing. On my local machine everything is OK. I use the newest version of TinyMCE which is 4.0.2. On server there is IIS 7.0. I have setup this for many different ways. I have also tried put editor in <head> section. Effect is always the same. It is my current implementation:
public static string GetTinyMce4JS(string path, string control, int width, int height, bool enableXmlEncoding = false)
{
StringBuilder sb = new StringBuilder();
sb.Append(string.Format("<script src=\"{0}tinymce/js/tinymce/tinymce.min.js\" type=\"text/javascript\"></script>", path));
sb.Append("<script type=\"text/javascript\">");
sb.Append("tinymce.init({");
sb.Append("selector : \".tinymce\",");
sb.Append("theme : \"modern\",");
sb.Append(" menubar: false,");
sb.Append("plugins : [ \"lists hr anchor pagebreak\",");
sb.Append("\"wordcount visualblocks visualchars \",");
sb.Append("\"insertdatetime nonbreaking directionality\",");
sb.Append("\"paste textcolor moxiemanager\"],");
sb.Append("toolbar1: \"newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect\",");
sb.Append("toolbar2: \"cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor\",");
sb.Append("toolbar3: \"table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft\",");
sb.Append("});");
sb.Append("</script>");
return sb.ToString();
}
Then I use this function in code behind (invoke on Page_Load):
string tinyJS = ApplicationHelper.GetTinyMce4JS(ResolveUrl("~"), this.TinyMCEEditor.ClientID, 800, 600, false);
this.TinyMCEJS.Text = tinyJS;
And the aspx file:
<asp:Literal ID="TinyMCEJS" runat="server" />
<asp:TextBox ID="TinyMCEEditor" runat="server" TextMode="MultiLine" Height="600px" ClientIDMode="Static" CssClass="tinymce" z-index="200"
Visible="true"></asp:TextBox>
This is how it looks like on client environment:
And the same on my local machine:
I have finally resolved it!! Stupid mistake... I use publish to deploy web application on the server. I have set "Only files needed to run this application" in publish option and this was the reason. Files for Icons were not published.
Related
Unfortunately stuck with lots of code here. its referenced like so
"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz",
I am just trying to get a tab to show in between 1 and 3 if a condition is true.
normally the website looks like
Tab intro | tab order | tab complete
Tab intro | Tab pre registration | tab order | tab complete
normally code to handle this you would do
<mdb-tabset #tabs
<mdb-tab header ="Tab Intro">...
<mdb-tab *ngIf="requirePreregistration == true" header ="Tab pre registration">...
<mdb-tab header ="tab order">...
<mdb-tab header ="tab complete">..
but only adds it add the end of the condition is true
Tab intro | tab order | tab complete | Tab pre registration
if false, the tab does not show. There is allot of code on this page. What can be done?
the typescript if needed
ngOnInit() {
if(order.type == RequestPaymentType.PreRegrister)
this.requirePreregistration = true;
}
I understand tabs can be created dynamically, i have tried to give them an index,changeDetectorRef might have a play in this?
ref: https://mdbootstrap.com/
simply put
add tabOrder , nothing on the typescript side, which I was doing giving me errors, and was down the right path
<mdb tabOrder="1"
<mdb tabOrder="2"
I'm trying to do CSS animation in Elm, and I just can't get it to work!
Elm has several animation packages. The one I'm attempting to use is mdgriffith/elm-animator. Sadly, like many Elm packages, its documentation is sparse. It appears it provides two ways to render: one by running an Elm event loop to do a DOM update each frame, and one using CSS animation [which I didn't realise even existed]. I'm trying to do the latter.
I've tried to shrink the code down to a minimal example:
module Main exposing (main)
import Time
import Platform.Cmd
import Browser
import Html
import Html.Attributes
import Html.Events
import Color
import Svg
import Svg.Attributes
import Animator
import Animator.Css
main =
Browser.document
{
init = \ () -> ({fill = Animator.init <| Color.rgb 1 0 0}, Platform.Cmd.none),
subscriptions = \ state -> Animator.toSubscription Tick state animator,
view = \ state -> {title = "Animation test", body = view state},
update = \ msg state -> (update msg state, Platform.Cmd.none)
}
type alias State = { fill : Animator.Timeline Color.Color }
animator : Animator.Animator State
animator =
Animator.animator
|> Animator.Css.watching (\ state -> state.fill) (\ c state -> { state | fill = c })
type Msg = Tick Time.Posix | DoSomething
update : Msg -> State -> State
update msg state0 =
case msg of
Tick t -> Animator.update t animator state0
DoSomething -> { state0 | fill = Animator.go Animator.slowly (Color.rgb 1 1 0) state0.fill }
view : State -> List (Html.Html Msg)
view state0 =
[
Html.button [Html.Events.onClick DoSomething] [Html.text "Do something"],
Svg.svg
[
Svg.Attributes.width "100px",
Svg.Attributes.height "100px"
]
[
Animator.Css.node "circle"
state0.fill
[
Animator.Css.color
"fill"
(\ x -> x)
]
[
Svg.Attributes.cx "50",
Svg.Attributes.cy "50",
Svg.Attributes.r "50"
]
[]
]
]
I appreciate that's still pretty big, but I don't see how to easily make it much shorter without obfuscating what it's doing.
When I run this, the SVG fails to render. When I click the button, nothing happens.
Here's the really weird part: If I open the Firefox Inspector window, I can see the SVG <circle> element. If I edit its various properties, nothing happens. However, if I right-click the <circle> and select "Edit as HTML...", then add a single space to the element text and click off it, suddenly the circle appears! Moreover, if I right-click the element again, now it shows as "Edit as SVG...", which is suspicious.
Even more fun: If I load the page, click the button, and then do the above trick, the colour animation runs!
Note that if I edit the HTML and change nothing, it doesn't work. I have to make a trivial change to the text (or else I guess the browser decides it doesn't need to reprocess?)
I was so convinced this was going to end up being a weird Firefox bug... but then I tried it in Chrome and Edge, and it does exactly the same thing!
Does anybody have to vaguest clue why this doesn't work? Have I done something wrong with the Elm code? (I'm really, really struggling to figure out how this library works; I'm basically just guessing how the types fit together. So maybe I've done something dumb.)
This is due to a weird thing going on with namespaces. In an HTML document (i.e. on any webpage), the default namespace is the HTML namespace and if you want to render embedded documents in other formats, you need to ensure the nodes are created in the correct namespace.
Now when you write HTML as a string and the browser parses it from text, it will do this automatically for you:
<div> <!-- HTML Namespace -->
<svg>
<circle /> <!-- SVG Namespace -->
</svg>
<math>
<mrow></mrow> <!-- MathML namespace
(not really relevant, just pointing out different NS) -->
</math>
</div>
However, when you are constructing nodes dynamically (i.e. from JS or Elm), you need to explicitly ask for the namespace. That is in JS you would use Document.createElementNS() instead of just Document.createElement(). If you look at the source of the elm/svg package you will see that it does this:
node : String -> List (Attribute msg) -> List (Svg msg) -> Svg msg
node =
VirtualDom.nodeNS "http://www.w3.org/2000/svg"
If you don't do this, the browser understands you want to create a new HTML element called circle, which the browser doesn't know about. If the browser doesn't know about an element, it just treats basically like a <div>.
Now if you look at the source of the elm-animator package, you'll notice that it asks for an Html.node, so no namespace!
As to how to make it work with elm-animator, I suspect you can't. But perhaps someone else can contribute some solution...
Finally, you might want to consider SMIL style animation, it tends to get the job done without needing any external package.
I have a TreeView and I am generating C++ model using QStandardItemModel class.
I want to get the click event when user clicks on every 2nd child in the tree.
Item-1
|
|
Item-1.1 <-- Detect click on this Item
| |
| Item-1.1.1
| Item-1.1.2
|
Item-1.2 <-- Detect click on this Item
| |
| Item-1.2.1
| Item-1.2.2
|
Item-2
|
|
Item-2.1 <-- Detect click on this Item
| |
| Item-2.1.1
| Item-2.1.2
|
I have tried below code to detect the click but it is generating click for 3rd level child also.
TreeView {
model: myCppModel
onClicked: {
if (index.parent.row >= 0) {
if (index.row > 0) {
console.log(myCppModel.data(index));
}
}
}
}
I have one module in which I displayed TinyMCE editor in a modal popup.
On page load, I bind HTML content as text of text area, and after that, I give that text area control as a selector of tinymce editor.
HTML of text area which is present in the modal popup:
<asp:TextBox ID="txtEditorContent" runat="server" AutoPostBack="false" CssClass="editor-content" TextMode="MultiLine" />
I have one function which is executed when there is an active tinymce editor on page and user clicks on a button which is used to open the modal popup in which another tinymce editor is present, which displayed confirmation message box that whether to save the changes or not.
if user clicks yes then i removed the active editor on page using code
tinymce.remove();
But the content of text area is not displayed in TinyMCE editor.
When i opened the modal popup it displayed as below.
I also checked by inspect element in mozilla, it shows me that there is no content in of tinymce.
Javascript fired on opening the modal popup:
<script type="text/javascript">
$(function () {
tinymce.remove();
tinymce.init({
selector: '.editor-content',
menubar: false,
branding: false,
height: 350,
code_dialog_height: 200,
plugins: ['advlist autolink lists charmap print preview anchor textcolor code', 'searchreplace visualblocks code fullscreen', 'insertdatetime table contextmenu paste code help wordcount'],
toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | table | code ',
});
});
Can anybody tell me what I am missing?
Note: This issue is not reproduced in the Google Chrome and only in Mozilla Firefox.
Pre-note: This issue occurs whether or not I already have a textarea on the page.
I have a button that triggers an ajax request first...writing something to a database and returning the key. I use that key in my ID for the textarea that is then dynamically added to page. Keep in mind that tinyMCE is already initialized.
tinymce.init({
selector: ".editor",
setup: function(ed) {
ed.on('change', function(e) {
tinymce.triggerSave();
$('form').trigger('checkform.areYouSure');
});
ed.on('init', function(e) {
autoresize_max_height: 500
});
},
plugins: [
"advlist autolink link responsivefilemanager lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality template paste textcolor colorpicker responsivefilemanager autoresize"
],
toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | table | link responsivefilemanager",
image_advtab: true ,
external_filemanager_path:"/filemanager/",
filemanager_title:"Filemanager" ,
external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
});
After the textarea is dynamically created, I add some default 'Lorem Ipsum' text and call mceAddEditor
tinymce.execCommand('mceAddEditor', false, "custom-html_" + data.c2akey);
data.c2akey is the key returned from the ajax call.
The tinymce instance is created successfully.
Here's the problem:
1) The instance is super tall. Unless I set a static height on the parent container the textarea is, the editor is really tall. Taller than 500px (from autoresize_max_height). Problem with setting a static height on the parent container is that autoresize wont work. Also I dont see the text from the textarea in this new editor.
2) I can not type in this newly created instance. See Can't type in tinyMCE 4 instance after mceAddEditor
So I need help figuring out why the instance is super tall on creating.
Your first problem (The instance is super tall) I've solved as follows:
tinymce.init({
...
init_instance_callback : function(editor) {
$(editor.iframeElement)
.contents()
.find('body')
.css('min-height', editor.targetElm.rows * 9);
}
});