I am using tinyMCE as a plugin in my ASP.NET MVC4 web application. I am also using SignalR to establish an open connection between the server and the clients. What I am trying to do is a real-time editor similar to Google Docs.
Until now I managed to find a way to write in an editor in one browser and have it displayed in another open document in another browser. I previously had a problem with the cursor position since when I was using the setContent() method in tinyMCE, the cursor was being put to the front and therefore the output was reversed.
This was solved by these two statements:
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
However now the problem I have is that with Chrome the output is as I wish for it to be i.e. writing with the cursor at the back however when I write from a Firefox browser, the space button is ignored, when I press space, the cursor goes back.
Is there a particular reason why this happened? Also, there seems to be a speed issue with the connection i.e when I type fast the latest content (1 or 2 letters) are not submitted.
This is all the code I have regarding this problem:
#{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
$(function () {
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
var chat = $.connection.editorHub;
chat.client.broadcastMessage = function (message) {
tinyMCE.activeEditor.setContent(message);
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
tinyMCE.activeEditor.focus();
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
chat.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
Looks like you might want to check out the possibility to get a tinymce bookmark.
There are html bookmarks which are implemented using hidden spans with a certain class.
And there are non-html bookmarks - i would use those.
// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);
Related
I have an AIR application which has tinyMCE js into it. I have added a button on tinyMCE toolbar , upon click of which an inlinepopup window appear. this inline popup loads an url
var aa=tinyMCE.activeEditor.windowManager.open({
url : 'http://localhost/Save.html',
width : 520,
height : 340,
resizable : "yes",
inline : true,
close_previous : "yes"
});
Save.html code:
<script src="http://www.wiris.net/demo/editor/editor"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<script>
var editor;
window.onload = function ()
{
editor = com.wiris.jsEditor.JsEditor.newInstance({'language': 'en'});
editor.insertInto(document.getElementById('editorContainer'));
}
Now problem is----
When i run my AIR application i get an error
Result of expression 'tinymce' [undefined] is not an object.
I suspect a cross-domain issue because
when i alert in Save.html
alert(window.document.domain); returns "localhost"
when i alert in AIR application Mxml (inside ) js
alert(window.document.domain); returns " "
Thanks in advance for any suggestions & advice.
I've found simmilar question: Ace Editor autocomplete and multiple languages
But the responses were that autocompletion is not supported by ACE, and according to Google group for Ace Editor "It is on my wishlish for Ace and we definitively need it
for Cloud9".
This post is one year old and as you can see, the cloud9 supports autocompletion now:
https://c9.io/site/features/
So is autocompletion available in Ace Editor by default? I cannot find any information about it.
Autocomplete is now an official part of the API. Enabling it takes 3 lines of code:
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page:
<script src="ace/ext-language_tools.js"></script>
You can find a demo at https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
And here's the wiki page I just wrote on the topic:
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
Since Autocomplete is now a part of the ACE api:
1) Include ace.js at the top of your html:
<script type="text/javascript" src="js/ace.js"></script>
2) Also include your mode (language type):
<script type="text/javascript" src="js/mode-yaml.js"></script>
3) Also include your theme:
<script type="text/javascript" src="js/theme-monokai.js"></script>
4) Also include ex-language_tools.js:
<script src="js/ext-language_tools.js"></script>
5) Add your div with id editor (this will become your IDE):
<div id="editor"></div>
6) Include the following script (see my comments to understand them) :
<script>
var langTools = ace.require("ace/ext/language_tools");
Line below transforms your div with id="editor" into the editor
var editor = ace.edit("editor");
Line below sets the color theme. Other themes available here...try them here
editor.setTheme("ace/theme/monokai");
Line below sets the mode based on programming language...other modes here:
editor.getSession().setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);
Lines below turns ON autocompletion in real-time.
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
Thus, the whole thing could be broken down into the following:
<!DOCTYPE html>
<html>
<head>
<title>IDE AUTOCOMPLETE</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ace.js"></script>
<script type="text/javascript" src="js/mode-yaml.js"></script>
<script type="text/javascript" src="js/theme-monokai.js"></script>
<script src="js/ext-language_tools.js"></script>
</head>
<body>
<!-- EDITOR SECTION BELOW! -->
<div id="editor"></div>
<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
</script>
<!-- EDITOR SECTION ABOVE -->
</body>
</html>
Autocompletion is still not available natively for Ace, however we have implemented a component doing that for the Codiad IDE which is based on Ace and fully open source.
You can check the code on Github, it will surely help you to write your own.
Note, to implement custom completion logic, you can pass a completion provider object in enableBasicAutocompletion.
See jsfiddle
<!-- integrity removed for example sake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
<script>
const editor = ace.edit('some-ace-editor-holder-div-id');
editor.setOptions({
enableBasicAutocompletion: [{
getCompletions: (editor, session, pos, prefix, callback) => {
// note, won't fire if caret is at a word that does not have these letters
callback(null, [
{value: 'hello', score: 1, meta: 'some comment'},
{value: 'world', score: 2, meta: 'some other comment'},
]);
},
}],
// to make popup appear automatically, without explicit _ctrl+space_
enableLiveAutocompletion: true,
});
</script>
Info source
See also this and this answers
Make sure to have following imports
require('ace/ext/language_tools');
Use under snippet as required
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
AjaxOrg has pushed a commit in their Cloud9 repository with the following message:
Code completion plug-in
I assume that this would be the answer to this question.
Here is the commit.
Also, I think that this is a good project that can help us.
For more information, we can follow the message from this issue opened in Cloud9 repository.
Currently it's not available in any form. According to this issue:
https://github.com/ajaxorg/ace/issues/1031
Autocomplete is only available in Cloud9 IDE (which is based on ACE) and may be available later as a separate plugin for ACE Editor.
add this in your mounted:
this.aceEditor.setOptions({
enableSnippets: true,
enableLiveAutocompletion: true,
enableBasicAutocompletion: true
})
I am using below code for sample menu.
<html>
<head>
<title>Tree Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("#main").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "json_data", "ui"],
"json_data" : {
"ajax" : {
"url" : "jsondata.json",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
}
});
$("#main").bind("open_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
});
$("#main").bind("select_node.jstree", function (e, data) {
// data.inst is the instance which triggered this event
console.log(data);
console.log($.data(data.rslt.obj[0],"folder_name"));
}); */
$("#main1").jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : false
},
"plugins" : [ "themes", "html_data"]
});
});
</script>
</head>
<body>
<div id="main1">
<ul>
<li>Home Folder
<ul>
<li>Sub Folder1</li>
<li>Sub Folder2</li>
</ul></li>
<li>Shared Folders
<ul>
<li>Shared Folder1</li>
<li>Shared Folder2</li>
</ul></li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
when i run the above code in IE browsers it shows top of the page(below the URL bar) like
" To help protect your security , internet explorer has restricted this webpage from running scripts or Activex controls that could access your computer. click for options.. "
when i rightclick and click allowed blocked content, it runs.but i want without this popup message i need to run the code...how can i automatically run this one?...
There is a code solution too. I saw it in a training video. You can add a line to tell IE that the local file is safe. I tested on IE8 and it works. That line is <!-- saved from url=(0014)about:internet -->
For more details, please refer to https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
alert('hi');
});
</script>
</head>
<body>
</body>
</html>
I believe this will only appear when running the page locally in this particular case, i.e. you should not see this when loading the apge from a web server.
However if you have permission to do so, you could turn off the prompt for Internet Explorer by following Tools (menu) → Internet Options → Security (tab) → Custom Level (button) → and Disable Automatic prompting for ActiveX controls.
This will of course, only affect your browser.
You have two options:
Use a Mark of the Web. This will enable a single html page to load. It See here for details. To do this, add the following to your web page below the doctype and above the html tag:
<!-- saved from url=(0014)about:internet -->
Disable this feature. To do so go to Internet Options->Advanced->Security->Allow Active Content... Then close IE. When you restart IE, it will not give you this error.
If you are to use the
<!-- saved from url=(0014)about:internet -->
or
<!-- saved from url=(0016)http://localhost -->
make sure the HTML file is saved in windows/dos format with "\r\n" as line breaks after the statement.
Otherwise I couldn't make it work.
Steps to configure IE to always allow blocked content:
From Internet Explorer, select the Tools menu, then the Options...
In the Internet Options dialog, select the Advanced tab...
Scroll down until you see the Security options. Enable the checkbox
"Allow active content to run in files on My Computer".
Close the dialog, and quit Internet Explorer. The changes will take
effect the next time you start IE.
The Blocked Content is a security feature of Windows XP Service Pack 2. If you do not have SP2 installed, then you will never see this message.
From: How To Allow Blocked Content on Internet Explorer
That's something I'm not sure that you can change through the HTML of the webpage itself, it's a client-side setting to tell their browser if they want security to be high. Most other browsers will not do this but from what I'm aware of this is not possible to stop unless the user disables the feature.
Does it still do what you want it to do after you click on 'Allow'? If so then it shouldn't be too much of a problem
Alternatively, as long as permissions are not given, the good old <noscript> tags works. You can cover the page in css and tell them what's wrong, ... without using javascript ofcourse.
i have a web application that has javscript interspersed through the page. What happens is that safari will dump the source of the javascript code instead of executing it. I can reproduce this consistently.
The page is a mashup of different forms of content:
it loads flash videos using osflv and is generated via a php script on the server side. In addition the page also contains calls to Google Map's API to display a map. The content is placed in separate tabs using javascript to provide tab interaction.
I am also using mootools, and not sure if that is potentially causing issues.
Here are the javascript includes:
<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/js/sifr.js"></script>
<script type="text/javascript" src="/js/sifr-debug.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/alerts.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/autocompleter.js"></script>
<script type="text/javascript" src="/js/observer.js"></script>
<script charset='ISO-8859-1' src='/js/rac.js' language='javascript'></script>
rac.js comes from osflv, common.js and alerts.js are custom javascript code that includes custom classes and functions used to either display or manipulate data in the page.
This block of code executes in the page just fine:
<script type="text/javascript">
var whitney = { src: '/flash/whitney.swf'};
sIFR.activate(whitney);
sIFR.replace(whitney, { selector: 'h6#propertyHeadline', wmode:'transparent',css: {'.sIFR-root': {'color': '#1ca9b9' }}});
</script>
This code also executes just fine:
<script language='javascript'>
var src = '/player';
if(!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0))
src = 'player8';
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', 520, 'height', 440, 'src', src, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', src, 'FlashVars','movie=media/orig/4b845109d99d0.flv&fgcolor=0x1CA9B9&bgcolor=0x000000&autoload=off&volume=70');
</script>
This is the final snippet of code that is embedded in the html towards the bottom of the page before the end of the body tag, Safari will randomly spit out the src code in the browser at any point beyond the good maps script include:
<script src="http://maps.google.com/maps?file=api&v=2&key=googlemapsapikeyblockedout" type="text/javascript"></script>
<script type="application/javascript">
function InitPropertyDashboardTabs(){
mytabs = new TabPanel('DashboardTabPanel');
initializeGallery();
initializeSiteplan();
initializeMap('address blocked out');
}
var map = null;
var geocoder = null;
function initializeSiteplan()
{
var flashvars = {PropertyId:1,BasePath:'/',wmode:'transparent'};
var params = {wmode: 'transparent'};
var attributes = {id: 'SWFSitePlan',name: 'SWFSitePlan'};
swfobject.embedSWF("/flash/FloorplanViewer/FloorplanViewer.swf", "SiteplanFlash", "915", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
}
function initializeGallery()
{
var params = {wmode: 'transparent'};..... (more code)
This is what the page with the js dump
(source: oxid8.com)
this is what the page should look like:
(source: oxid8.com)
First, you shouldn't use the language attribute, it's deprecated.
The only thing I can see is that you use application/javascript instead of text/javascript in your HTML (there's a difference between what you specify in your HTML and the MIME-type servers use when sending a Javascript file), but I cannot reproduce any errors on Chromium/Linux with a simple test case like
<!DOCTYPE html>
<html>
<head>
<title>dkdkd</title>
</head>
<body>
<script type="application/javascript">
var i=0;
</script>
</body>
</html>
(Perhaps you can try this, too.)
Just in case: is the script element closed properly? Is all Javascript correct, i.e. does it pass JSLint?
Perhaps you can paste the full source of the HTML page (preferably on something like Pastebin), so we can have a closer look.
I guess I'll give this a shot. I was having a similar problem on some pages that used TinyMCE (javascript or even parts of my html were being displayed on the page)
MY solution was to upgrade the version of TinyMCE that I was using. v3.3 has an overhauled Webkit handler.
The issue so far as I can tell was that TinyMCE was injecting (poorly) additional blocks of javascript into the page.
This (and a handful of similar blocks) is always injected into <head>
<script type="text/javasript" src="http://www.example.com/javascript/rte/langs/en.js" onload="tinemce.dom.ScriptLoader._onLoad(this,'http://www.example.com/javascript/rte/langs/en.js', 0);">
Which, when onload fired, injected the following block into a random location in the DOM, mangling whatever it was placed on top of.
<script type="javascript" src="http://www.example.com/javascript/rte/langs/en.js">
The result of that, as seen in the Webkit Developer Tools was to turn
<td class="tab" nowrap="">
into:
<td class="ta<script stype="text=""javascript"" src="http://www.example.com/javascript/rte/langs/en.js"> "b" nowrap=>"
Since that's clearly not valid markup the resulting garbage was output.
Upgrading my install of TinyMCE from the previous stable to v3.3rc1 fixed the issue.TinyMCE Changelog references a total Webkit overhaul.
edit: By random I really mean random. It inserts the script tag in a different location each time, sometimes breaking content, sometimes not.
I'm using the YUI Rich Text editor on my site. I'm loading it using the load javascript from Google. When I try to create a link (or any other action that creates an "settings" box, the title bar is missing, see picture here. You can see how it supposed to look over here at Yahoos site for YUI.
I'm using this code in the <head>-tag:
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/",
require: ["editor"],
loadOptional: true,
combine: false,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor.render();
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
And in my webpage:
<div class="sIFR-ignore yui-skin-sam">
<textarea name="content" id="content" cols="50" rows="10">
</textarea>
</div>
I got some help from David Glass, one of the developers of YUI RTE. The error I had make was actually an CSS thing, some where in my CSS-files it was a line that read "h3 {visibility: hidden;}" which made this error. Any how, thanks for your help!
Try forcing your own title for the editor:
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor._defaultToolbar.titlebar="<b>Use my title</b>";
Editor.render();
I might be wrong here but, due to SOP (Same Origin Policy) I don't think JavaScript hosted in Google will be able to modify the DOM (unless you are google).
Try placing JavaScript in your web server and linking from there:
<script type="text/javascript" src="http://your.web.server.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>