AngularJS(八) kindeditor 富文本编辑器

编程知识 行业动态 更新时间:2024-06-13 00:22:48

一 。富文本编辑器介绍

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

二、初始化 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('');

更多推荐

AngularJS(八) kindeditor 富文本编辑器

本文发布于:2023-04-03 07:31:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/ecac5a2323d672054aedc4779e1fb148.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:编辑器   文本   AngularJS   kindeditor

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!