对 kindeditor的理解

最新推荐文章于 2024-08-16 14:32:30 发布

hurricane_ning

最新推荐文章于 2024-08-16 14:32:30 发布

阅读量319

点赞数

分类专栏： kindeditor

本文链接：https://blog.csdn.net/weixin_36898943/article/details/81611931

版权

kindeditor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. kindeditor 上传时的设计思路:
   iframe : 用于编写富文本页面,所见即所得
   textarea: 需要调用同步方法[window.editor.sync()],将 iframe中的富文本转成html,
       然后同步到textarea中 ,在提交表单时,用于提交上传;

2. kindeditor 的使用步骤:
   1. //创建一个文本域:
       <textarea id="editor_id" name="description" style="width:700px;height:300px;">

       </textarea>

   2. //对文本域 editor_id 添加 KindEditor 脚本
       KindEditor.ready(function(K) {
           window.editor = K.create('#editor_id',{
               items:    [
                               'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                               'plainpaste', 'wordpaste', '|', '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'
                       ],
               //点击图片上传,会向这个action发送请求,上传图片
               uploadJson : '../../image_upload.action',

               //点击图片空间后,会向这个action发送请求,获取已经上传的图片
               fileManagerJson : '../../image_manage.action',

               //开启图片管理器 : 显示 '图片空间按钮'
               allowFileManager:true

           });
       });

   3. 结果是: 在文本域 editor_id 的同级标签下生产如下标签:
       <div class="ke-container">
           <div class="ke-toolbar">
               //这里会被放入富文本头部工具栏
           </div>

           <div class="ke-edit">
               <iframe class="ke-edit-iframe">
                   <html>
                       <head>
                           //iframe的头部分
                       </head>

                       <body>
                           //这个地方非常非常关键,我们在富文本编辑器里编辑的富文本都在这里,我们设置字体直接能显示,
                           //做到所见即所得,原因就是我们编辑的富文本虽然本质上是 html 代码,但是能直接被显示,原因就
                           //是,我们编辑的东西都放在这个 body 中了,然后就被浏览器解析了,但是我们最终只能把我们自己
                           //的文本域 editor_id 中的内容上传,这个时候就很尴尬,所以这个时候我们需要多做一步, 要将body
                           //中的页面部分转换成 html 源码,然后放入到文本域 editor_id 中,这样在我们表单提交的时候就可以
                           //随着表单一块提交了; 操作如下 : window.editor.sync();
                       </body>
                   </html>