Upgrade TinyMCE to 5, one form does not show the editor on a textarea control - tinymce-5

I'm using Bootstrap 4.5, and have several forms all using the exact same setup to call TinyMCE 5, but one form (the most complex of course) is not showing it. I can find nothing wrong, or anything different between the way the textarea control is created. The code to load TinyMCE is being loaded in a PHP program and is therefore identical in all cases. This is the code being streamed out:
<!-- Jquery -- required for interactive parts of bootstrap and other code to function -->
<script src="../../Awards/jscode/jquery.min.js"></script>
<!-- Bootstrap core JavaScript, popper.js required for tooltips and such -->
<script src="../../Awards/jscode/popper.min.js"></script>
<script src="../../Awards/jscode/bootstrap.js"></script>
<!-- TinyMCE -->
<script src="../../Awards/jscode/tinymce/tinymce.min.js"></script>
<script language="JavaScript">
// TinyMCE, set for all textarea controls, with specific toolbar items, no menubar, etc.:
tinymce.init(
{
selector: 'textarea',
menubar: false,
branding: false,
plugins: 'code lists',
toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code',
lists_indent_on_tab: true,
content_css: '<?php echo $Award_html_RootPath; ?>css/AwardList.css'
}); // end of TinyMCE code
</script>
This works for other forms with the same code being streamed out for each. I am stumped as to why this one form doesn't display TinyMCE. The textarea control in question is:
<div class="form-group">
<textarea name="Notes" id="Notes"
class="form-control"
style="height: 250px;"></textarea>
</div> <!-- / form-group -->
Thanks in advance for any suggestions that might point me to where the problem lies. There is a lot of JavaScript for this form but it all seems to work, it's just the TinyMCE code that doesn't want to load ... it displays as a standard textarea, no overlay for TinyMCE.

Okay, so now I feel really sheepish. I was outputting at the top of the page some styles before the header information was loaded properly, so TinyMCE wasn't seeing "standards" mode, which includes the first line of the HTML file needing to be:
<!DOCTYPE HTML>
Moved the script tags to below the code that streams the header into the page so that, among other things, the doctype tag above is the first line, and all is well. Sorry for wasting anyone's time on this.

Related

compile dynamic vue.js content added via ajax call

I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example

Remove "Share this on Google+" after google share button?

I'm using the standard share button plugin for Google+, and after the button there's a bit of text that reads "Share this on Google+":
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
I'd like to hide or remove that text, but since it's in the iFrame it's not possible to do it with CSS. I'm finding the documentation lacking or confusing on their dev pages for this share buttons.
https://developers.google.com/+/web/share/
Is there any way to remove that text?
You can use the data-annotation attribute and set its value to none, eg:
<div class="g-plus" data-action="share" data-annotation="none"></div>
More info here within the share tag attributes of the docs.

HTML TinyMCE does not display

I am using TinyMCE but It does not display I get this error and do not know how to fix this problem.
Failed to load: ~/Scripts/tinyMCE/js/tinymce/plugins/moxiemanager/api.php?action=language&tinymce=true&code=auto
I am using MVC 4
HTML
<div class="col-sm-12">
<p>
Write something in TinyMCE:
<textarea name="content" style="width: 100%"></textarea>
</p>
</div
Script
<script src="../../Scripts/tinyMCE/js/tinymce/tinymce.min.js" type="text/javascript"> </script>
<script src="../../Scripts/tinyMCE/js/tinymce/plugins/moxiemanager/plugin.min.js"
type="text/javascript"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste moxiemanager"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
All you need to do is to remove the moxiemanager from the plugin list.
It should work then.
I ran into this problem, cannot load the api.php. It works like a champ in the local environment, but the server doesn't even load TinyMCE. After running about for a long time I found the solution to be rather simple!
My asset folder's permissions were set to 777, which was being rejected on the server.
Make sure your permissions aren't too loose, 755 is my server's magic number, though you may need 766.

dojo 1.8: loading dojo-laced html files into contentpane

Hi Any idea how I can load dojo-laced html file dynamically into contentpanes?
I am able to load non-dojo html into content pane using href.
When I loaded dojo-laced html file, I can see text in html tags but not text in dojo scripts. Where did I go wrong?
The scripts I put here are:-
widget.set('href','dojotext.html')
Another problem in jsfiddle is that pressing button 1 will not update, unlike in my environment.
and funny thing is that border container and comtent panes are not displayed, unlike in my environment too.
Here are my links in jsfiddle
- main page for testing loading
- dojo content to be loaded
Please advise. Thanks
Clement
First of all, your ContentPanes and BorderContainer are not being displayed because you're not parsing them.
In your code, you can run parser manually:
ready(function () {
parser.parse();
// ...
});
Regarding your first question, it seems that you didn't read the documentation:
<div id="foo" data-dojo-type="dijit/layout/ContentPane" href="/some/page.html">
<script type="dojo/method">
alert ('Hello World!');
</script>
</div>
Code from: ContentPane documentation

Dijit combobox not rendering in custom widget

I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?