AngularJS(八) kindeditor 富文本编辑器

一 。富文本编辑器介绍

富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常
用的富文本编辑器:
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
这里写图片描述

二、初始化 kindeditor 编辑器

在页面中添加 JS 代码,用于初始化 kindeditor

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

需要引入的依赖

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

三、编辑器的使用

angularJS**提取**富文本编辑器内容

// 设置富文本编辑器的内容
    $scope.setEditorValue = function() {
        //提取文本编辑器内容
        $scope.entity.introduction = editor.html();

    }

angularJS**写入|清空**富文本编辑器内容

//angularJS写入富文本编辑器

editor.html(scope.entity.introduction);

//清空富文本编辑器
editor.html('');

猜你喜欢

转载自blog.csdn.net/houysx/article/details/80454489