如何通过使用angularjs单击按钮（不在工具栏中）将文本添加到summernote编辑器答案

【问题标题】：How to add text into summernote editor by clicking a button(Not in toolbar) using angularjs如何通过使用angularjs单击按钮（不在工具栏中）将文本添加到summernote编辑器
【发布时间】：2016-03-26 03:23:33
【问题描述】：

我在我的应用程序中使用 angular-summernote。而且我是 FE 技术的新手。

我必须通过使用 angularjs 单击按钮（不在 Summernote 工具栏中）来添加 html 元素/文本。

我参考了 [this][1] 演示并在 JQuery 上进行了一些更改及其工作。更新了 [演示][2]。

但我必须在 angularJS 中做同样的事情。

有人可以帮忙吗？

提前致谢。

[1]: http://jsfiddle.net/ypweuw1L
[2]: http://jsfiddle.net/ManikandanVS/ypweuw1L/20/

【问题讨论】：

标签： angularjs html summernote

【解决方案1】：

您可以为您的按钮创建一个指令，并在单击按钮时使用summernote.createRange() 来创建选择的范围对象。

然后您可以使用.toString() 获取选定的文本并在$scope.text 变量上附加string.substring 的新样式。

范围对象（开始位置和结束位置）的so 和eo 可用于替换选定的文本。

请看下面的演示或fiddle。

演示中有一个小错误。如果您完全删除跨度文本，则标记将保留在 $scope 变量中。这可能可以通过查看文本来解决，但不知道如何准确地做到这一点。

还有一点可以改进，那就是在应用新样式后删除了选择。

但该演示应该可以帮助您开始使用按钮代码。

angular.module('demoApp', ['summernote'])
	.controller('MainController', function($scope) {
  	console.log('Main started');
  	$scope.text = 'Hello there';
    
    $scope.options = {
    };
  })
  .directive('stylingPlugin', function() {
  	return {
    	template: '<button class="btn btn-primary" ng-click="addStyle()">Make Note</button>',
    	link: function(scope, element, attrs) {
      	scope.addStyle = function() {
        	var $summer = $('#summernote'),
              range = $summer.summernote('createRange'),
          	  spn = $('<span/>').text(range.toString()).addClass('snote');
          //console.log(range);
          
          scope.text = scope.text.substring(0, range.so) + spn[0].outerHTML
          	+scope.text.substring(range.eo, scope.text.length);
            
        }
      }
    };
  });

.snote {
  color: blue;
}

<body ng-app="demoApp">
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdn.rawgit.com/summernote/summernote/v0.7.0/dist/summernote.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/summernote/angular-summernote/master/dist/angular-summernote.js"></script>
  <div ng-controller="MainController">
    <summernote id="summernote" ng-model="text" config="options"></summernote>
    {{text}}
    <br/>
    <button class="btn btn-lg btn-default" type="button" ng-click="count = count + 1">Save</button>
    <styling-plugin></styling-plugin>
  </div>
</body>

【讨论】：