一款好用的文本编辑器KindEditor+PHP

最新推荐文章于 2024-06-11 16:11:52 发布

gcl_guyunlige

最新推荐文章于 2024-06-11 16:11:52 发布

阅读量4.1k

点赞数 1

分类专栏：文本编辑插件文章标签：文本编辑

本文链接：https://blog.csdn.net/gaokcl/article/details/78087591

版权

文本编辑同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

插件

1 篇文章 0 订阅

订阅专栏

1，一款好用的文本编辑器KindEditor

下载页面: http://www.kindsoft.net/down.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KindEditor一套开源的HTML可视化编辑器</title>
    <!-- 引入kindeditor编辑器的js -->
    <script charset="utf-8" src="./editor/kindeditor.js"></script> <!-- 引入kindeditor编辑器的中文字符集 -->
    <script charset="utf-8" src="./editor/lang/zh-CN.js"></script> <!-- code@kindeditor-4.1.11-zh-CN -->
    <!-- 引入kindeditor编辑器的css -->
    <link rel="stylesheet" type="text/css" href="./editor/themes/default/default.css>  <link rel=" stylesheet
    " type="text/css" href="./editor/themes/simple/simple.css">
</head>
<body>
<form action="" method="" enctype="multipart/form-data"><p>下面是KindEditor的编辑区域：</p>
    <!-- 在需要显示编辑器的位置添加textarea输入框；id唯一 -->
    <textarea id="editor_id" name="content"
              style="width:700px;height:300px;"> &lt;strong&gt;HTML内容&lt;/strong&gt;  </textarea></form>
</body>


<script>
    // 一，修改HTML页面
    // 1-1，宽度和高度可用inline样式设置
    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id');
    });

    //1-2 通过K.create函数的第二个参数，可以对编辑器进行配置
    var options = {cssPath: '/css/index.css', filterMode: true};
    var editor = K.create('textarea[name="content"]', options);
</script>


<script type="text/javascript">
    //二，获取HTML数据
    // 取得HTML内容
    html = editor.html();
    // 同步数据后可以直接取得textarea的value。
    // KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
    // 找到form后onsubmit事件里添加sync函数
    editor.sync();
    html = document.getElementById('editor_id').value;
    // 原生API
    html = K('#editor_id').val();
    //KindEditor Node API
    html = $('#editor_id').val();
    // jQuery
    // 设置HTML内容
    editor.html('HTML内容');
</script>


<script>
    /* KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。
       当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
       找到form后onsubmit事件里添加sync函数
    */

    // 关闭过滤模式，保留所有标签
    KindEditor.options.filterMode = false;
    KindEditor.ready(function (K))
    {
        K.create('#editor_id');
    } </script>
<script type="text/javascript">

    /* ========== KindEditor中的items 中的参数介绍： ========== */
    source : 'HTML代码',
        undo : '后退(Ctrl+Z)',
        redo : '前进(Ctrl+Y)',
        cut : '剪切(Ctrl+X)',
        copy : '复制(Ctrl+C)',
        paste : '粘贴(Ctrl+V)',
        plainpaste : '粘贴为无格式文本',
        wordpaste : '从Word粘贴',
        selectall : '全选',
        justifyleft : '左对齐',
        justifycenter : '居中',
        justifyright : '右对齐',
        justifyfull : '两端对齐',
        insertorderedlist : '编号',
        insertunorderedlist : '项目符号',
        indent : '增加缩进',
        outdent : '减少缩进',
        subscript : '下标',
        superscript : '上标',
        title : '标题',
        fontname : '字体',
        fontsize : '文字大小',
        textcolor : '文字颜色',
        bgcolor : '文字背景',
        bold : '粗体(Ctrl+B)',
        italic : '斜体(Ctrl+I)',
        underline : '下划线(Ctrl+U)',
        strikethrough : '删除线',
        removeformat : '删除格式',
        image : '图片',
        flash : '插入Flash',
        media : '插入多媒体',
        table : '插入表格',
        hr : '插入横线',
        emoticons : '插入表情',
        link : '超级链接',
        unlink : '取消超级链接',
        fullscreen : '全屏显示',
        about : '关于',
        print : '打印',
        fileManager : '浏览服务器',
        advtable : '表格',
        yes : '确定',
        no : '取消',
        close : '关闭',
        editImage : '图片属性',
        deleteImage : '删除图片',
        editLink : '超级链接属性',
        deleteLink : '取消超级链接',
        tableprop : '表格属性',
        tableinsert : '插入表格',
        tabledelete : '删除表格',
        tablecolinsertleft : '左侧插入列',
        tablecolinsertright : '右侧插入列',
        tablerowinsertabove : '上方插入行',
        tablerowinsertbelow : '下方插入行',
        tablecoldelete : '删除列',
        tablerowdelete : '删除行',
        noColor : '无颜色',
        invalidImg : "请输入有效的URL地址。\n只允许jpg,gif,bmp,png格式。",
        invalidMedia : "请输入有效的URL地址。\n只允许swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",
        invalidWidth : "宽度必须为数字。",
        invalidHeight : "高度必须为数字。",
        invalidBorder : "边框必须为数字。",
        invalidUrl : "请输入有效的URL地址。",
        invalidRows : '行数为必选项，只允许输入大于0的数字。',
        invalidCols : '列数为必选项，只允许输入大于0的数字。',
        invalidPadding : '边距必须为数字。',
        invalidSpacing : '间距必须为数字。',
        invalidBorder : '边框必须为数字。',
        pleaseInput : "请输入内容。",
        invalidJson : '服务器发生故障。',
        cutError : '您的浏览器安全设置不允许使用剪切操作，请使用快捷键(Ctrl+X)来完成。',
        copyError : '您的浏览器安全设置不允许使用复制操作，请使用快捷键(Ctrl+C)来完成。',
        pasteError : '您的浏览器安全设置不允许使用粘贴操作，请使用快捷键(Ctrl+V)来完成。'
</script>
<script>

/****************************** 正式完整实例 ****************************************/
    KindEditor.ready(function (K) {
        var editor1 = K.create('#editor_id', {
            uploadJson: './editor/php/upload_json.php',
            fileManagerJson: './editor/php/file_manager_json.php',
            themeType: 'simple',
            allowFileManager: true,
            filterMode: false,
            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'template', 'cut', 'copy', 'paste', 'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'],
            afterCreate: function () {
                var self = this;
                document.getElementById('editor_id').onclick = function () {
                    self.sync();
                    //将textarea的内容放到主页面上，而不是编辑器上
                    var content = document.getElementById('editor_id').value;
                    $.ajax({
                        data: $('#myform').serialize(),
                    });
</script>
</html>

gcl_guyunlige

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
一款好用的文本编辑器KindEditor+PHP

1，一款好用的文本编辑器KindEditor下载页面: http://www.kindsoft.net/down.php &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;KindEditor一套开源的HTML
复制链接

扫一扫