I am using TinyMCE Rich text Editor in my MVC app. I am using tinymce.js and tinymce.min.js.
The problem that I am facing is that I am not able to show multiple rich text editors in my app.
If the user is chose to have one editor, then it is working fine but if more than one selection is made then editor is showing up only for the first one and rest comes up as normal text areas.
Please help.
Snippets of my code:
Bundle containing TinyMCE:
#using System.Web.Optimization
#Scripts.Render("~/bundles/tinymce")
Global.asax:
public static void RegisterBundles(BundleCollection bundles)
{
//Creating bundle for your js files
bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
"~/Scripts/tinymce/tiny_mce.js"));
}
There is no browser script error. JSScript error comes up saying:
"Object doesn't support this property or method" error"
Tiny_Mcefull.cshtml now:
<script type="text/javascript">
(function(){
tinyMCE.init({
// General options
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "500",
width: "790",
verify_html : false,
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
content_css : '#Url.Content("~/Scripts/tinymce/css/content.css")',
convert_urls : false,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
});
})();
</script>
Well, in your Layout:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/tinymce")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqgrid")
</head>
Can't say right now why, but i remember that it was important to plug TinyMCE after Jquery.
TinyMCE Template:
<script type="text/javascript">
(function(){
tinyMCE.init({
// General options
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "500",
width: "790",
verify_html : false,
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
content_css : "#Url.Content("~/Scripts/tinymce/css/content.css")",
convert_urls : false,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
});
})();
</script>
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
Hope this will work for you
Related
I got a problem. I need to use highcharts in mobile app. So I decided to use web-view. And it does not work neither on iOS nor on Android.
I have 3 questions:
1) I've tried to launch simple highchairs demo in my web view. Something went wrong. What I did wrong in the code below ? I suppose the problem is with loading js scripts.
HTML code inside the web-view component is the following :
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>How to create active charts using Highcharts | Script Tutorials</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chart_1" class="chart"></div>
<script type='text/javascript'>
$(document).ready(function() {
// First chart initialization
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'area',
height: 350,
},
title: {
text: 'Tools developers plans to use to make html5 games (in %)'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Interviewed'
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
});</script>
</body>
</html>
my component.ts is enabling web-view like that :
export class ChartComponent implements AfterViewInit {
public webViewSrc: string = generateChartHtml();
#ViewChild("myWebView") webViewRef: ElementRef;
#ViewChild("labelResult") labelResultRef: ElementRef;
ngAfterViewInit() {
let webview: WebView = this.webViewRef.nativeElement;
let label: Label = this.labelResultRef.nativeElement;
label.text = "WebView is still loading...";
webview.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
let message;
if (!args.error) {
message = "WebView finished loading of " + args.url;
} else {
message = "Error loading " + args.url + ": " + args.error;
}
label.text = message;
console.log("WebView message - " + message);
});
}
}
PS : generateChartHtml function is simple and just returns html code written above
here is my component.html :
<ActionBar title="chaaaRtT">
</ActionBar>
<StackLayout #container VerticalOptions="FillAndExpand" height="350" [ngClass]="{'isSigningUp' : !isLoggingIn}">
<WebView #myWebView [src]="webViewSrc"></WebView>
<Label #labelResult></Label>
</StackLayout>
tns - v3.0.1
angular - v4
And my second question is :
It is related to this issue 1659.
2) How can I load local files by html inside the web-view?
Issue 1659's solution is outdated I suppose. And it says nothing about iOS.
And its not said what would be root for html file when it would try to load css/js file.
For example here
<head>
<link rel="stylesheet" href="/form.css"/>
</head>
And the last one :
3) Would it try to load form.css from the root of machine, or from some 'local' root, i.e. current folder?
Thanks in advance for the help
solutions :
1) iOS : App Transport Security has blocked a cleartext HTTP resource - this would enable making http requests to any domains. By default in iOS native script is disabled.
2) same as in any web app
3) simply relative to the folder your webview html file is in
I am getting a Chrome console jQuery is not defined error for jquery-ui.min.js
In my site I put jquery call at bottom:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<!--JScript to Make iframe go behind footer nav upon scrolling in IE -->
<script type="text/javascript">
var $j = jQuery.noConflict();
jQuery(document).ready(function($j){
$j('iframe').each(function() {
var url = $j(this).attr("src");
if ($j(this).attr("src").indexOf("?") > 0) {
$j(this).attr({
"src" : url + "&wmode=transparent",
"wmode" : "Opaque"
});
}
else {
$j(this).attr({
"src" : url + "?wmode=transparent",
"wmode" : "Opaque"
});
}
});
});
</script>
The page is this: http://www.mexpro.com/mexico/auto/insurance.html
jQuery-UI is only a plugin for jQuery. You need to add this instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
I am trying to use jQuery sortable within the TinyMCE Visual Editor in Wordpress. I have had some success in that I can get a UL list to sort, but only if I drag the mouse OUTSIDE of the actual editor. You can see what I mean with this short 1 minute screencast video: http://screencast.com/t/1FNMvLw3Y
Here is the code I am using to run this:
(function() {
tinymce.create('tinymce.plugins.tinyMceSort', {
init : function(ed, url) {
ed.addButton('tinyMceSort', {
title : 'TinyMCE Sort',
image : url+'/tiny_sort.png',
onclick : function() {
ed.execCommand('mceInsertContent', false, '\
<ul id="list">\
<li>One</li>\
<li>Two</li>\
<li>Three</li>\
<li>Four</li>\
<li>Five</li>\
</ul>\
');
}
});
ed.onVisualAid.add(function(ed, e, s) {
console.debug('onVisualAid event: ' + ed.id + ", State: " + s);
// jQuery('#content_ifr').contents().find('#move').sortable({ containment: '#move' });
jQuery('#content_ifr').contents().find('#list').sortable({ containment : 'parent', tolerance : 'pointer', cursor : 'move'}).css({'width' : '200px', 'padding' : '10px', 'list-style' : 'none', 'background-color' : '#333'});
jQuery('#content_ifr').contents().find('li').css({'background-color' : 'grey', 'margin': '10px', 'padding': '10px'});
jQuery('.wrap').sortable();
});
ed.plugins.wordpress._showButtons(target, 'tinyMceSort');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "TinyMCE Sort",
author : '',
authorurl : '',
infourl : '',
version : ""
};
},
});
tinymce.PluginManager.add('tinyMceSort', tinymce.plugins.tinyMceSort);
})();
What I would like to know is what do I have do in order to sort the list WITHOUT having to move the mouse outside of the TinyMCE Editor area.
Tinymce uses an iframe. I guess the necessary code is not available in the tinymce iframe.
In order to load the javascript files using the tinymce script loaderfor the iframe too you may use onInit of tinymce this
// Load a script from a specific URL using the global script loader
tinymce.ScriptLoader.load('somescript.js');
I have a partial view (asp.net MVC 3.0) to render Tinymce as a richeditor and want to show a text watermark on it.
#model String
#using Nop.Web.Framework.UI;
#{
Html.AddScriptParts(#Url.Content("~/Content/editors/tinymce/tiny_mce.js"));
//set useDefaultImagePlugin to 'true' if you want to move back to a standard image plugin
bool useDefaultImagePlugin = false;
var imagePluginName = useDefaultImagePlugin ? "image" : "netadvimage";
}
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
<script type="text/javascript">
//Notes: autosave plugin is disabled
(function () {
tinyMCE.init({
// General options
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "120px",
width: "100%",
verify_html: false,
plugins: "equation,netadvimage,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
// Theme options
theme_advanced_buttons1: "equation,#imagePluginName,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,pastetext",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
convert_urls: false,
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js"
});
tinyMCE.focus(function () {
if ($(this).getContent() == "Type some text here") {
tinyMCE.setContent("");
} else if ($(this).getContent() == "") {
tinyMCE.setContent("Type some text here");
}
})
})();
</script>
and i tried to follow a similiar post at TinyMCE hint text as in the above script but it never shows anything on the textarea content.
Even with http://code.google.com/p/jquery-watermark/ , it only flickers the content and get blank instantly.
Thanks
I'm trying to load a YouTube video with Fancybox. It's working with all the browsers but it seems to have problem with IE7, it only shows a blank white page. I don't know what I've done wrong here, I tested there example online and it work with IE7, http://fancybox.net/blog. I also took my code from them.
So here's my markup on the homepage (where the video is located):
<a href="http://www.youtube.com/watch?v=sqC3tk_-e7g" title="The Problem" id="homevideo1">
<span class="playButton"></span>
<img width="170" src="/images/all/video-image1.jpg" alt="" />
<div class="videoTitle">The Problem</div>
</a>
and, this is my script for the video:
SetupVideos = function(){
$("#homevideo1").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 740,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
}
It might be something to do with CSS, I'm not too sure... But I haven't touch the .css that comes with the plug-in at all
Any ideas?
Thanks.
You need to put your jquery click event in document ready, like this
$(document).ready(function(){
$("#homevideo1").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 740,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
return false;
});
});
Try it live here (jsfiddle)
Synotte,
I too had problems with IE7 (not YouTube, but video embedding).
Removing the padding from the map worked for me, for some reason it was reducing the width of the video to zero.
May not be your issue, but worth a try.
Adam