富文本编辑器

富文本编辑器

  富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。

  常用的富文本编辑器：
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/

  

KindEditor

  页面引入kindeditor的css与js

<!-- 富文本编辑器 -->
<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
<script src="/plugins/kindeditor/kindeditor-min.js"></script>
<script src="/plugins/kindeditor/lang/zh_CN.js"></script>

  页面中添加JS代码，用于初始化kindeditor：

<!-- 正文区域 /-->
<script type="text/javascript">
   var editor;
   KindEditor.ready(function(K) {
      editor = K.create('textarea[name="content"]');
   });
</script>

  获取kindeditor编辑器的内容

$scope.saveOrUpdate = function(){
       /** 获取富文本编辑器的内容 */
       $scope.goods.goodsDesc.introduction = editor.html();
}

  清空kindeditor编辑器的内容

function(response){
   if(response.data){
      alert("保存成功！");
      /** 清空表单 */
      $scope.goods = {};
      /** 清空富文本编辑器 */
      editor.html('');
   }else{
      alert("保存失败！");
   }
}