I'm running Umbraco version 7.9.2 and following this tutorial to learn how to create custom property editors.
My first step was to create a folder called MarkDownEditor
My second step was to create a file named package.manifest.json
{
//you can define multiple editors
"propertyEditors": [
{
/*this must be a unique alias*/
"alias": "My.MarkdownEditor",
/*the name*/
"name": "My markdown editor",
/*the icon*/
"icon": "icon-code",
/*grouping for "Select editor" dialog*/
"group": "Rich Content",
/*the HTML file we will load for the editor*/
"editor": {
"view": "~/App_Plugins/MarkDownEditor/markdowneditor.html"
}
}
],
//array of files we want to inject into the application on app_start
"javascript": [
"~/App_Plugins/MarkDownEditor/markdowneditor.controller.js"
]
}
I then created two files: markdowneditor.controller.js and markdowneditor.html in the MarkDownEditor directory
markdowneditor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div ng-controller="My.MarkdownEditorController">
<textarea ng-model="model.value"></textarea>
</div>
</body>
</html>
markdowneditor.controller.js
angular.module("umbraco")
.controller("My.MarkdownEditorController",
//inject umbracos assetsService
function ($scope, assetsService) {
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
assetsService
.load([
"~/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
.then(function () {
//this function will execute when all dependencies have loaded
alert("editor dependencies loaded");
console.log('stuff has loaded!');
});
//load the separate css for the editor to avoid it blocking our js loading
assetsService.loadCss("~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.css");
});
Finally, I registered the editor in the Umbraco CMS, put it in a simple document type and finally visited the page in multiple browsers.
And... I see nothing. It seems like the editor is working (I think) but I don't get why I'm not seeing my alert or console.log that's contained in the controller. What did I do wrong? I've tried multiple browsers so I know it's not a caching issue and I've made sure to rebuild the project in visual studio.
Edit 1 :
Per suggestions, I've tried modifying the assetService file paths since ~ seems to be a C# thing and my controller is a javascript file. It now looks like this
.load([
"/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
However, I'm still not seeing an alert or a console log.
One thing I did realize I was doing wrong was not including my markdown value in the markdown template. I've done that and now see the content that I put in the editor when creating a new markdown page.
Simple solution. My package.manifest file had a .json extension. When that was removed, everything worked perfectly. For anyone coming across this, the ~ works perfectly fine in the javascript file.
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
Disclaimer: I am very new to developing (2nd year CS major), so please bear with me.
I am currently developing a chrome extension that pulls JSON data from a page and then displays the data in the extension through an HTML table.
I am using a chrome extension template that is available through Visual Studios.
Since I do not have the reputation, I cannot post the link for reference, but if you were to type "chrome extension Visual Studios" in google, it is the first link.
I am using a jQuery plugin for tables called "DataTables" that is downloaded through Visual Studios.
Whenever I run the solution from Visual Studios on a test "index.htm" file, I get this error in the console:
Uncaught SyntaxError: Unexpected token ILLEGAL
jquery.dataTables.min.js:1
popup.js:1
This is how the console reads "jquery.dataTables.min.js" Which is a file that is downloaded with the plugin and is referenced in the HTML file according to the plugin's installation instructions.
The console reads "popup.js" in the same fashion.
The Question: Why is the console reading my two files in this way?
I have looked over every single question on StackOverflow pertaining to this error and have tried every solution that was given, to no avail.
I have checked multiple times for any sign of a Unicode 200b "Zero-Width Space"
I have set the default font to Times New Roman, and have the encoding set to UTF-8 for all files.
The network diagnostic in the console shows that all these files have loaded and when I run the html file through a text editor, the solution works. I have a fully sort-able table displaying the dummy data.
I assume that most of you are familiar with the layout of a chrome extension (manifest, html file, javascript files, icon.png).
Here is the respective code for the HTML and JS (I believe the manifest and icon are irrelevant for my question)
"popup.html" HTML (Jquery/JS/CSS references and a table to hold the data):
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="app/popup.js"></script>
<link href="css/classic.css" rel="stylesheet" />
<title>Popup</title>
<body>
<table id="example" class="display" width="100"></table>
</body>
</html>
"popup.js" JAVASCRIPT (hardcoded JSON data with a function using "Datatables" library to initialize table headings)
var dataSet = [
["00001", "John", "Smith"],
["00002", "Jane", "Doe"],
["00003", "Ted", "Johnson"],
["00004", "Betty", "Smith"],
["00005", "Susan", "Wilson"],
["00006", "John", "Doe"],
["00007", "Bill", "Watson"],
["00008", "Walter", "Wright"]
];
$(document).ready(function () {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "Emp. Number" },
{ title: "First Name" },
{ title: "Last Name" }
]
});
alert('If i loaded, it loaded');
});
First, may I suggest trying to load the JS file from a CDN (your display of the resource was rather odd) this is a common javascript CDN and if you are unable to do so, check to makesure that the datatables file is in fact, javascript.
Secondly, it appears as though you are loading jQuery once at the top and then again with the datatables JS (if, in fact, it is actually loading)
I'd like to have a Play template that is a JS file (as opposed to having <script> tags inside an HTML template). The reason for this is so that the script can be cached. However, I need to create a differences in the script depending on where it's included and hoped to do this with Play's template system. I can already do so if I use embedded scripts, but those can't be cached.
I found an existing question that also asks the same thing, but the answer is totally different (different goals).
That's easy, just... create view with .js extension, i.e.: views/myDynamicScript.scala.js:
#(message: String)
alert('#message');
//Rest of your javascript...
So you can render it with Scala action as:
def myDynamicScript = Action {
Ok(views.js.myDynamicScript.render(Hello Scala!")).as("text/javascript utf-8")
}
or with Java action:
public static Result myDynamicScript() {
return ok(views.js.myDynamicScript.render("Hello Java!"));
}
Create the route to you action (probably you'll want to add some params to it):
GET /my-dynamic-script.js controllers.Application.myDynamicScript()
So you can include it in HTML templite, just like:
<script type='text/javascript' src='#routes.Application.myDynamicScript()'></script>
Optionally:
You can also render the script into your HTML doc, ie by placing this in your <head>...</head> section:
<script type='text/javascript'>
#Html(views.js.myDynamicScript.render("Find me in the head section of HTML doc!").toString())
</script>
Edit: #See also samples for other templates types
I am trying to use CKEditor or TinyMCE editor in my project.
So I put TinyMCE folder in meteor public folder, also put
<head>
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
in template head tag.
However receiving following error.
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97
Uncaught SyntaxError: Unexpected token < tinymce.min.js:1
Uncaught ReferenceError: tinymce is not defined
How do I fix this problem? It is same to CKEditor.
Is there any other rich editor ,which I can use in Meteor JS?
First, you need to put everything from the CKEDITOR build download in the public folder. CKEDITOR comes with all sorts of stuff and references everything based on relative directories.
Your public folder should have a directory named ckeditor it should contain contain the following files and folders:
adapters
lang
plugins
skins
ckeditor.js
config.js
contents.css
styles.js
In your primary layout file reference CKEDITOR like so:
<head>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
</head>
In your template:
<template name="yourTemplate">
<textarea id="content" name="content"></textarea>
</template>
Finally, in the rendered function of your template:
Template.yourTemplate.rendered = function() {
$('#content').ckeditor();
};
Normally, you would say this.$('#content').ckeditor() but that doesn't work because CKEDITOR is in your public folder. As a result, you need to the global reference to the #content element.
Instead of /public folder, put your files in /client/compatibility. Then initialize it in the template you want to use it.
Template.editor.rendered = function() {
tinymce.init({
selector: 'textarea'
});
};
This was the only result searching for wysiwyg:
https://github.com/mcrider/meteor-bootstrap-wysiwyg
meteor add mcrider:bootstrap-wysiwyg
Looks a bit simpler than CKEditor or TinyMCE but maybe that's ok for your project.
i am trying to dynamically include js (and css) files into a webpage like this:
index.html -> loader_a.js -> a_foo.js, a_bar.js, a_foo.css and so on.
While this works without a problem in FF (using appendChild) i cant get it to run in IE6.
I've tried various available solutions (adding to dom node, ajax call and eval and more from (http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html) here and there and others like post #2013676) but it's not doing what its supposed to do.
When i check with DebugBar i see that my include files (eg a_foo.js) is actually loaded, but its content is empty - on other included files (1 Level/directly) this content is show so i assume there is the problem ...
The "error" i get is alway undefined object which is o/c b/c the function i call is not loaded properly so not much of a help. I dont get any errors on the includes.
I've validated the javascripts so those whould be ok.
Does anyone have the ultimate solution for this?
I can recreate my tests and post some code if it helps.
Thanks,
regards,
Thomas
Sample HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=en><HEAD><TITLE>Test</TITLE>
<script type="text/javascript" src="mmtest_files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="mmtest_files/multiload.js"></script>
<script type="text/javascript" >
function init2() {
// using the data from the loaded js files
var a= mmf("a");
document.getElementById('status').innerHTML = "Variable set:" + a;
}
// magic...
include(['mmt.js'],init2);
</script>
<BODY >
<H2>Test me!</H2>
<SPAN id=status>status old</SPAN>
</BODY></HTML>
JS 1 is multiload from answer 1
JS2 is a test include:
function mmf(param)
{
return "Called with" + param;
}
You need to use document.write in ie, in order to load scripts in parallel.
See: Loading Scripts Without Blocking
I have such a script btw: Loading Multiple Javascript Files In Order Asynchronously
(it may need some enchancements in Chrome)
UPDATE
There is a callback function, it is optional. It can be used to couple dependent script to the files. EG:
function myjQueryCode() {
// ...
}
include(['jquery.js','jquery-ui.js'], myjQueryCode);
So that your jquery dependent code will run after the files has been loaded.