zui框架kindeditor编辑器赋值与取值

最新推荐文章于 2023-01-16 09:49:35 发布

明天起好好学习

最新推荐文章于 2023-01-16 09:49:35 发布

阅读量340

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/m0_37882063/article/details/103661993

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在网页中集成KindEditor富文本编辑器，包括JS、HTML和JS方法的详细步骤，实现编辑器的基本配置如字体大小、颜色选择等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 引入js

<script src="../../Js/zui/lib/kindeditor/kindeditor-min.js"></script>

2 html

  <textarea rows="5" name='description' id='description'
     value='' class='form-control kindeditorSimple'></textarea>

3 js方法

//页面初始化
var  editor = KindEditor.create('textarea.kindeditorSimple', {
        basePath: '../../Js/zui/lib/kindeditor/',
        bodyClass : 'article-content',     // 确保编辑器内的内容也应用 ZUI 排版样式
        cssPath: '../../Js/zui/css/zui.css', // 确保编辑器内的内容也应用 ZUI 排版样式
        resizeType : 1,
        allowPreviewEmoticons : false,
        allowImageUpload : false,
        items : [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons','image', 'link'
        ]
    });


//取值
 var description = editor.html();
//赋值
editor.html(description );