登录  /  注册
首页 > web前端 > js教程 > 正文

富文本编辑器的介绍

一个新手
发布: 2017-09-23 09:45:41
原创
1561人浏览过


富文本编辑器

  • 富文本编辑器,rich texteditor, 简称 rte, 它提供类似于 microsoftword 的编辑功能。常 用的富文本编辑器

    KindEditor http://kindeditor.net/

    UEditor http://ueditor.baidu.com/website/

    CKEditor http://ckeditor.com/

引入富文本编辑器

<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>
登录后复制

初始化 kindeditor 编辑器

<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {

    editor = K.create(&#39;textarea[name="content"]&#39;, {
    allowFileManager : true

    });
});
</script>
登录后复制

获取在controller.js 中获取文本编辑器内容

$scope.entity.goodsDesc.introduction=editor.html();
登录后复制

清空文本编辑器

function(response){

    if(response.success){
        alert("保存成功");
        $scope.entity={};
        editor.html(&#39;&#39;);//清空富文本编辑器
        }else{
        alert(response.message);
     }
}
登录后复制

引用编辑器

   <textarea  name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
登录后复制

效果图

这里写图片描述

以上就是富文本编辑器的介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号