将 textAngular 工具栏放在 textEditor 的底部答案

【问题标题】：Place textAngular toolbar at bottom of the textEditor将 textAngular 工具栏放在 textEditor 的底部
【发布时间】：2018-11-21 17:47:04
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： html css angularjs

【解决方案1】：

您可以在text-angular 指令上使用属性ta-target-toolbars 将其注册到备用工具栏：

<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

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

【讨论】：

这似乎比我的解决方案更好:) +1
有没有办法在工具栏上添加复选框，这样我就可以像使用其他 listItems 一样使用它，比如
默认情况下，清理程序不允许使用复选框 - 在 textAngular 存储库中使用插件存在很多问题。

【解决方案2】：

你可以玩一下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%;
}

【讨论】：