kindeditor编辑器上传图片

最新推荐文章于 2024-04-01 16:54:57 发布

gcl_guyunlige

最新推荐文章于 2024-04-01 16:54:57 发布

阅读量1.6k

点赞数

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

文本编辑专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>KindEditor一套开源的HTML可视化编辑器</title>
   <!-- 下载页面: http://www.kindsoft.net/down.php -->
   <!-- 引入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唯一 -->
        <!-- 文本区设置name值 name="content" 这里和上面那张图文本区的name值相对应 -->
      <textarea id="editor_id" name="content" style="width:700px;height:300px;">
            &lt;strong&gt;HTML内容&lt;/strong&gt;
        </textarea>
   </form>
</body>

<script>
   /* ================ KindEditor上传图片 ===================*/
    /*javascript，可以根据自己的项目进行修改cssPath、uploadJson、fileManagerJson的路径。*/
    KindEditor.ready(function(K) {
        // #editor_id这里传的是id，就是你需要保存到该位置的字段id
        var editor1 = K.create('#editor_id', {
            // KindEditor中指定上传文件的服务器端程序。
            //数据类型: String； 默认值: basePath + ‘php/upload_json.php’ 
            uploadJson : './editor/php/upload_json.php',
            //将原来编辑器里的php处理方法移植到自己想要的地方，比如fileController 修改URL就好。不过编辑器默认不需要管理功能，屏蔽了。
            fileManagerJson : './editor/php/file_manager_json.php',
            // 指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css数据类型: String； 默认值: “default” 
            themeType : 'simple',
            //打开本地的上传图片的功能
            allowFileManager : true,
            //true时过滤HTML代码，false时允许输入任何代码。
            //数据类型: Boolean； 默认值: false 
            filterMode : false,
            //items中的 image  是打开本地上传图片的功能
            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'
            ],
            //设置编辑器创建后执行的回调函数。
             //数据类型: Function； 默认值: 无 
            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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kindeditor编辑器上传图片

html>html lang="en">head> meta charset="UTF-8"> title>KindEditor一套开源的HTML可视化编辑器title> 下载页面: http://www.kindsoft.net/down.php --> 引入kindeditor编辑器的js --> script charset="utf-8" src="./e
复制链接

扫一扫