kindeditor.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">
    <title>ZUI - KindEditor 例子</title>
    <link href="../../dist/css/zui.css" rel="stylesheet">
</head>

<body style="padding: 20px">
    <div class="conatiner" id="contextmenuExample">
        <h1>KindEditor 功能测试</h1>
        <div class="row">
            <div class="col-md-7">
                <textarea id="content" name="content" class="form-control kindeditor" style="height:500px;">Hello, world!</textarea>
                <br>
                <textarea id="content2" name="content2" class="form-control" style="height:100px;">Hello, world!</textarea>
                </div>
            <div class="col-md-5">
                <div class="article-content" style="padding: 0">
                    <strong>KindEditor 在 ZUI 1.9.1 中的更新</strong>
                    <ul>
                        <li>
                            <p>重做 了表格编辑功能，包含如下关键特性：</p>
                            <ul>
                                <li>重做 了工具栏图标，优化了插入表格交互体验，现在点击表格图标按钮，弹出行列选择面板，滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入，插入表格后，光标会自动置于第一个单元格内</li>
                                <li>
                                    <p>新增 通过 <kbd>Tab</kbd> 键来在单元格中切换光标的功能，当光标已经处于表格中的最后一个单元格时会自动创建一个新行，并将光标移到新行的第一个单元格中；
                                    </p>
                                </li>
                                <li>
                                    <p>新增 选择多个单元格功能，允许使用如下方式来进行多选操作：</p>
                                    <ul>
                                        <li>点击每一行的第一个单元格左侧可以快速选择整行上的所有单元格；</li>
                                        <li>点击每一列的第一个单元格上侧可以快速选择整列上的所有单元格；</li>
                                        <li>在一个单元格上点击并按住拖动到另一个单元格，可以选中拖放矩形区域范围内所有单元格；</li>

                                    </ul>
                                </li>
                                <li>
                                    <p>新增 对选中的多个单元格一并应用样式或进行操作的功能，目前支持如下操作：</p>
                                    <ul>
                                        <li>对所有选中的单元格进行合并操作；</li>
                                        <li>删除所有选中的单元格所在行或列；</li>
                                        <li>对文本基础样式的操作，包括加粗、下划线、删除线、字体、文字颜色和背景色等；</li>
                                        <li>对内容对齐方式的操作，包括居左、居中、局右等；</li>
                                        <li>对内容类型的变更操作，包括切换列表类型等；</li>

                                    </ul>
                                </li>
                                <li>
                                    <p>重做 了表格单元格样式设置对话框样式，新增了对单元格边框大小和文字颜色的设置；</p>
                                </li>
                                <li>
                                    <p>优化 表格样式设置，现在边框和隔行变色等样式会直接应用在单元格上，而不是通过 CSS 类名，避免在 ZUI 基础样式缺失的情况下丢失样式；</p>
                                </li>
                                <li>
                                    <p>优化 了右键菜单上的项目，当一些条目在特定情况下不可用时不会显示，例如当光标处于最后一行时不会出现“向下合并单元格”菜单项；</p>
                                </li>
                                <li>优化 了在表格中插入表格的交互，支持对嵌套表格进行编辑；</li>
                                <li>
                                    <p>修复 了有时在单元格上点击鼠标右键，弹出的右键菜单上没有包含单元格相关菜单项的问题；</p>
                                </li>

                            </ul>
                        </li>
                        <li>
                            <p>新增 通过 <code>placeholder</code> 选项为编辑器设置并显示没有内容时的占位提示文本；</p>
                        </li>
                        <li>
                            <p>新增 通过 <code>pasteImage</code> 选项实现贴图自动上传功能；</p>
                        </li>
                        <li>
                            <p>新增 通过 <code>spellcheck</code> 选项启用或禁用拼写检查功能；</p>
                        </li>
                        <li>
                            <p>新增 通过 <code>transferTab</code> 选项禁用编辑器内 <kbd>Tab</kbd> 键插入空格功能，转而实现激活编辑器在页面上下一个表单控件；</p>
                        </li>
                        <li>
                            <p>新增 通过 <code>syncAfterBlur</code> 选项实现自动在编辑器失去焦点时执行同步（<code>sync()</code>）操作；</p>
                        </li>
                        <li>新增 通过 <code>simpleWrap</code> 选项来优化源码格式化功能，当该选项为 <code>true</code> 时，源码中当块级元素内容不会显示为新的行；</li>
                        <li>优化 表格缩进样式，现在默认缩进 2 个空格，而不是 Tab；</li>
                        <li>优化 预览界面样式；</li>
                        <li>
                            <p>修复 了无法通过 <code>themeType</code> 选项指定主题样式表的问题；</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="../../assets/jquery.js"></script>
    <script src="../../dist/js/zui.js"></script>
    <script src="../../dist/lib/kindeditor/kindeditor.js"></script>
    <script>
        $(function () {
            var K = window.KindEditor;
            if (K) {
                window.$editor = K.create('textarea.kindeditor', {
                    wellFormatMode: true,
                    simpleWrap: true,
                    indentChar: '  ',
                    width: '100%',
                    basePath: '../../dist/lib/kindeditor/',
                    allowFileManager: true,
                    bodyClass: 'article-content',
                    cssPath: '../../dist/css/zui.css',
                    placeholder: '请输入文章内容\nGood Luck!',
                    transferTab: true,
                });
            }
        });
    </script>
</body>

</html>