将textAngular工具栏放置在textEditor底部
将textAngular工具栏放置在textEditor底部
提问于 2014-08-10 20:31:18
我正在试图将textAngular工具栏添加到文本I的底部。现在它呈现在顶部。我一直在尝试玩css，但没有成功。
联署材料：
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
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-10 20:52:38
您可以使用text-angular指令中的属性text-angular让它在备用工具栏中注册：
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>下面是一个例子：http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
涉及来自ta-target-toolbars的textAngular的相关代码行可在这里获得：https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
Stack Overflow用户
发布于 2014-08-10 20:50:50
您可以使用css来将工具栏移动到文本区域下。
请看这里http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25232733
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号