html – 将textAngular工具栏放在textEditor的底部_html-js-css

概述我正在尝试在texteditor-div的底部添加textAngular工具栏.现在它呈现在顶部. 我一直在尝试用css玩很多但没有成功. JS： var app = angular.module('myApp', ['textAngular']);app.controller('AppCtrl', function($scope, $http) {$scope.htmlcontent = 我正在尝试在texteditor-div的底部添加textAngular工具栏.现在它呈现在顶部.
我一直在尝试用CSS玩很多但没有成功.

Js：

var app = angular.module('myApp',['textAngular']);app.controller('AppCtrl',function($scope,$http) {$scope.HTMLcontent  = "<h2>New Note...</h2>";$scope.save =function() {console.log( $scope.HTMLcontent ); $http.post("/Home/SaveWNote",{ JsonData: $scope.HTMLcontent });}});

HTML：

<!DOCTYPE HTML><head><Meta charset="utf-8"><Title>Testing</Title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/CSS/bootstrap.min.CSS"><link rel="stylesheet" href="//netdna.bootstrapcdn.com/Font-awesome/4.0.3/CSS/Font-awesome.CSS"><script src="https://cdnjs.cloudflare.com/AJAX/libs/rangy/1.2.3/rangy-core.Js"></script><script src="https://AJAX.GoogleAPIs.com/AJAX/libs/angularJs/1.2.14/angular.min.Js"></script><script src='http://cdnjs.cloudflare.com/AJAX/libs/textAngular/1.2.0/textAngular-sanitize.min.Js'></script><script src='http://cdnjs.cloudflare.com/AJAX/libs/textAngular/1.2.0/textAngular.min.Js'></script><script src="script.Js"></script><link rel="stylesheet" href="style.CSS"/></head><body ng-app="myApp"><div ng-controller="AppCtrl">  <div text-angular ng-model="HTMLcontent "></div>  <button ng-click="save()">Save</button>  <br/>Your HTMLcontent <pre>{{HTMLcontent}}</pre></div></body></HTML>

预习：
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview

解决方法您可以在text-angular指令上使用属性ta-target-toolbars让它注册到备用工具栏：

<div text-angular ta-target-toolbars="toolbar" ng-model="HTMLcontent"></div><div text-angular-toolbar  name="toolbar"></div>

这是一个例子：http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview

涉及textAngular的ta-target-toolbars的相关代码行可在此处获得：https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656

总结

以上是内存溢出为你收集整理的html – 将textAngular工具栏放在textEditor的底部全部内容，希望文章能够帮你解决html – 将textAngular工具栏放在textEditor的底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1084706.html