zoukankan      html  css  js  c++  java
  • 富文本编辑器kindeditor的使用

    第一步:导入前端js文件

     <!-- 富文本编辑器 -->
        <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>

    第二步:html页面中添加富文本编辑器输入框

     <div>kindeditor富文本编辑器</div>
     <div>
    <!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
    <textarea name="content" style="800px;height:400px;visibility:hidden;"></textarea>
    </div>

    第三步:添加富文本编辑器绑定的js代码

    <!-- 正文区域 /-->
    <script type="text/javascript">
    //定义一个全局变量
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('textarea[name="content"]', {
                allowFileManager : true
            });
    //此处是给编辑框赋予初始值
    //editor.html("123");
    }); </script>

    完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 富文本编辑器 -->
        <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>
    </head>
    <body>
    <div>测试内容</div>
    <div>
        <!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
        <textarea name="content" style="800px;height:400px;visibility:hidden;"></textarea>
    </div>
    </body>
    <!-- 正文区域 /-->
    <script type="text/javascript">
    
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="content"]', {
                allowFileManager: true
            });
        });
    
    </script>
    </html>

  • 相关阅读:
    LINUX查看硬件配置命令
    jmeter录制对于ip代理会失效
    性能测试常用指标
    jmeter使用jdbc获取注册验证码进行注册
    jmeter测试文件上传功能
    JMeter 功能挖掘之 WEB 文件导出
    分别用C/C++实现栈
    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
    jquery解决file上传图片+图片预览
    使用SetInterval时函数不能传参问题
  • 原文地址:https://www.cnblogs.com/kitor/p/11162247.html
Copyright © 2011-2022 走看看