I'm using ngQuill, a version of Quill for AngularJS, and I need to know if there is a way to put/load an HTML already created into the editor.
I can't find anything about it in the documentation.
Like always, sorry for my poor english :c
$scope.message = 'Welcome to the Editor!';
$scope.showToolbar = true;
$scope.translations = angular.extend({}, ngQuillConfig.translations, {
10: 'smallest'
});
$scope.toggle = function() {
$scope.showToolbar = !$scope.showToolbar;
};
// Own callback after Editor-Creation
$scope.editorCallback = function (editor, name) {
console.log('createCallback', editor, name);
};
$scope.readOnly = false;
$scope.isReadonly = function () {
return $scope.readOnly;
};
$scope.clear = function () {
return $scope.message = '';
};
// Event after an editor is created --> gets the editor instance on optional the editor name if set
$scope.$on('editorCreated', function (event, editor, name) {
console.log('createEvent', editor, name);
});
$timeout(function () {
$scope.message = 'Async Test Content';
console.log($scope.message);
}, 3000);
<ng-quill-editor
id="editor1"
name="editor1"
callback="editorCallback(editor, name)"
ng-model="message"
translations="translations"
toolbar="true"
show-toolbar="showToolbar"
link-tooltip="true"
image-tooltip="true"
toolbar-entries="font size bold list bullet italic underline strike align color background link image"
editor-required="true"
required=""
read-only="isReadonly()"
error-class="input-error"
fontsize-options="fontsizeOptions"
fontfamily-options="fontfamilyOptions">
</ng-quill-editor>
may be this plnkr could help:
i only included ngSanitize in my main module and it seems to work...
var myAppModule = angular.module('plunker', ['ngQuill','ngSanitize']);
myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set();
}]);
myAppModule.controller('AppCtrl', [
'$scope',
'$timeout',
function($scope, $timeout) {
$scope.name='moshe'
$scope.title = '<h1>Quill works</h1>';
$scope.readOnly = false;
$timeout(function () {
$scope.title += ' awsome!!!'
}, 2000);
$scope.editorCreated = function (editor) {
console.log(editor);
};
$scope.contentChanged = function (editor, html, text) {
console.log('editor: ', editor, 'html: ', html, 'text:', text);
};
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.snow.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.bubble.css">
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script data-require="angular-sanitize.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular-sanitize.js" data-semver="1.5.8"></script>
<script type="text/javascript" src="//cdn.quilljs.com/1.1.5/quill.js"></script>
<script type="text/javascript" src="http://killercodemonkey.github.io/ng-quill/src/ng-quill.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<p>generated: <i ng-bind-html="title"></i>!</p>
<ng-quill-editor ng-model="title" read-only="readOnly" required="true" modules="{toolbar: true}"></ng-quill-editor>
</body>
</html>
I can't help with Angular, but this was my jQuery solution (for a readOnly page)
Create the editor
Locate your target (where you want the text to be displayed)
Parse your string content
setContents of your editor
var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
console.log(quill);
console.log(quill.innerText);
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);
Related
A similar question was asked in this forum post, but I am still unable to convert the code from JSfiddle to HTML.
The JSfiddle example can be found here.
I tried to use the technique suggested in the forum post previously mentioned, that is:
<html>
<head>
<style type="text/css">
// CSS Content
</style>
</head>
<body ng-app="myApp">
<!-- some html elements -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
// more js here.
</script>
</body>
As I am a complete noob, I simply copied the HTML and Javascript into the some html elements and // more js here sections. Without changing the API key, the final code looked like this:
<html>
<head>
<style type="text/css">
// CSS Content
</style>
</head>
<body ng-app="myApp">
<div ng-app="myapp" ng-controller="WeatherCtrl">
<h2>Weather in Salzburg, Austria</h2>
<weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
<h3>Current: {{ weather.temp.current | temp:2 }}</h3>
min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
'use strict';
var myapp = angular.module('myapp', []);
myapp.factory('weatherService', function($http) {
return {
getWeather: function() {
var weather = { temp: {}, clouds: null };
$http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&callback=JSON_CALLBACK&APPID=f9dbd911bc01df1d9ce563b2ba4d3209').success(function(data) {
if (data) {
if (data.main) {
weather.temp.current = data.main.temp;
weather.temp.min = data.main.temp_min;
weather.temp.max = data.main.temp_max;
}
weather.clouds = data.clouds ? data.clouds.all : undefined;
}
});
return weather;
}
};
});
myapp.filter('temp', function($filter) {
return function(input, precision) {
if (!precision) {
precision = 1;
}
var numberFilter = $filter('number');
return numberFilter(input, precision) + '\u00B0C';
};
});
myapp.controller('WeatherCtrl', function ($scope, weatherService) {
$scope.weather = weatherService.getWeather();
});
myapp.directive('weatherIcon', function() {
return {
restrict: 'E', replace: true,
scope: {
cloudiness: '#'
},
controller: function($scope) {
$scope.imgurl = function() {
var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
if ($scope.cloudiness < 20) {
return baseUrl + 'sunny.png';
} else if ($scope.cloudiness < 90) {
return baseUrl + 'partly_cloudy.png';
} else {
return baseUrl + 'cloudy.png';
}
};
},
template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
};
});
</script>
</body>
My output looks like this:
Could anyone please show me how to do this?
The problem is that you are declaring two apps remove "ng-app="myApp" from the body <body> tag.
I'm trying to get my head around learning $compile but just looking for a couple of pointers as to where I'm going wrong...
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
$(document).on("click", "#button", function ($compile) {
var newDirective = angular.element('<li>{{app data}}</li>');
$(".grid ul").append(newDirective);
$compile(newDirective)($scope);
});
});
I suppose firstly, nothing seems to work when I put it into my directory but it does when I put it in the controller. And secondly it doesn't seem to compile as the Angular tags/elements don't render correctly. I just can't figure out where I'm going wrong...
As per the Docs $compille
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
You are on the right track to use it , just need some modification in your directive code like this.
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
return{
restrict: 'A',
scope: {
data:"=appdata"
},
link: function(scope,element){
var newDirective = angular.element('<li>'+ scope.data +'</li>');
var content = $compile(newDirective)(scope);
element.append(content);
}
}
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Ctrl">
<div class="grid" >
Hello
<ul my-dir appdata="'whatever'">
</ul>
</div>
</body>
</html>
Plunker : https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview
Your directive is not formatted (created) correct. No need to use JQUERY... you are compiling the html and the data ($scope) but you are not applying the compiled template to your html.
Check this plunkr: https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview
angular.module('plunker', [])
.directive('compileDir', ['$rootScope', '$compile', compileDir])
.controller('HomeController', [HomeController]);
function compileDir($rootScope, $compile) {
var self = {};
self.restrict = 'A';
self.scope = {
compileDirOptions: '='
};
self.link = linkFn;
return self;
function linkFn($scope, $element, $attributes) {
// I am making a new scope because I do not want to mess the directive's one, you do not have to
var newScope = angular.merge($rootScope.$new(), $scope.compileDirOptions.data);
var el = $compile($scope.compileDirOptions.html)(newScope);
$element.append(el);
}
}
function HomeController() {
var self = this;
self.message = "Hello World!";
self.data = {
html: '<li>{{name}}</li><li>{{color}}</li>',
data: {
name: 'app data',
color: 'red'
}
}
}
Your html is like this:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="HomeController as home">
<ul compile-dir compile-dir-options="home.data"></ul>
</body>
</html>
I am wondering how to specify when the link function for a directive should be called.
Currently I have the following code:
<my-directive username="abc"></my-directive>
module.directive("myDirective", [{
restrict: "A",
link($scope, element, others) {
//if element.clicked() {
// console.log("you clicked me");
//}
}
}]);
As you can see I have commented out pseudo-ish code of what I would like to do and I have seen that it's possible to do something like element.onClick = function() {}. But this still doesn't seem to be called when the element is clicked.
Thanks
Try this:
element.on('click', function() {});
Angular uses build in jQuery Lite, so you can use this.
Try this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.abc = 'abc';
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
username: '='
},
link:link,
template: '<div>Click Here</div>'
};
function link(scope,elem,others){
elem.bind('click', function() {
console.log('on click');
});
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<my-directive username="abc"></my-directive>
</body>
you can also try like this!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.abc = 'abc';
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
username: '='
},
link:link,
template: '<div ng-click="click()">Click Here</div>'
};
function link(scope,elem,others){
scope.click = function() {
console.log('on click', scope.username);
}
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<my-directive username="abc"></my-directive>
</body>
I am getting "Uncaught ReferenceError: isApp is not defined" in the console,
I had tried to find solution for this error from long morning but didn't able to get much, both of my isApp.js and mApp.js are saved in folder named as "js", can someone please help me to get out of this thing....thanks in advance
//"......isApp.js file code starts from here..............."
var iA = function () {
var t = this;
this.user;
var IsInvite = false;
this.serverUrl = someLocalhostUrl;
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initialize = function () {
t.getUser();
var pk = typeof t.user;
if (!(typeof t.user === 'object')) {
t.user = null;
t.setUser();
}
}();
};
var isApp = new iA();
//"......isApp.js file code endss here..............."
//"......mApp.js file code starts from here..............."
var mApp = function () {
//var PostUrl = "http://localhost:52015/"
var PostUrl = isApp.serverUrl + "/";
var t = this;
var u = {};
this.ph, this.loc;
var user, Email, UserName;
var LoggedIn;
this.initiate = function () {
u = isApp.getUser();
if (u && u.LoggedIn) {
if (window.location.href.indexOf("index") == -1)
$.mobile.changePage("index.html#p-start");
//window.location = "index.html#p-home";
}
};
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initiate();
};
m = new mApp();
//"......mApp.js file code ends here..............."
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css starts here-->
<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<!--css ends here-->
<!--js starts here-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.signalR-2.2.0.min.js"></script>
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
<script src="js/home.js"></script>
<!--js ends here-->
<!--<script>
$(function () {
$('.image').click(function () {
alert("selection needed");
});
document.getElementById("startDate").valueAsDate = new Date();
});
</script>-->
</head>
<body>
<div data-role="page" id="p-start">
<div data-role="main" class="ui-content ui-responsive ui-body-a">
<div class="align-center">
<h3>Its our Rocking app</h3>
<a href="#p-login">
<img src="images/temp-logo.jpg" class="logo" />
</a>
</div>
</div>
</div>
</body>
</html>
You load your mApp.js file before your isApp.js file and both scripts are executed right away, so naturally the function isn't defined yet when mApp.js is executed.
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
I have this script: JsBin
It allows to display the corresponding favicon to a certain url. As you can see the favicon is appended to the url, however I need it to append to the class="class" How can I do this? I don't see anything in the code that I can change in order to make this work.
I've modified the script to include in the "config" var a "target" property. This "target" is nothing more than a jQuery selector (such as .class, in this case) which defaults to "this".
So:
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' }); //aplies to $('.class')
//These 2 are the same
jQuery('#hello').favicons({insert: 'insertBefore', target: '#hello' }); //target is the same as "this"
jQuery('#hello').favicons({insert: 'insertBefore'});
I hope this works out for you!
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script type="text/javascript">
jQuery.fn.favicons = function (conf) {
var config = jQuery.extend({
insert: 'appendTo',
target: this
}, conf);
return this.each(function () {
jQuery('a[href^="http://"]', this).each(function () {
var link = jQuery(this);
var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
var faviconIMG = jQuery('<img src="' + '" alt="" />')[config.insert]($(config.target));
var extImg = new Image();
extImg.src = faviconURL;
if (extImg.complete) {
faviconIMG.attr('src', faviconURL);
}
else {
extImg.onload = function () {
faviconIMG.attr('src', faviconURL);
};
}
});
});
};
$(function(){
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' });
});
</script>
</head>
<body>
<p id="hello">Google</p>
<p class="class">apend favicon over her instead</p>
</body>
</html>