这个编辑器可以自由配置文档,这样就可以用一个编辑器编辑各种各样类型的文档,对于固定格式的文档的编辑效率的提高和灵活性都有很大改善。
只要懂得json,就可以配置自己做好的文档,然后通过这个编辑器来快速编辑文档。
这个编辑器特别适用于网站内容的维护。因为一般网站内容页面的结构和样式都比较固定。预览地址(目前支持chrome和Firefox):
http://blogoflaryiii.sinaapp.com/app/TNEditor/styleEditor.html (普通线路文档编辑器,采用SEditorConfig配置)
http://blogoflaryiii.sinaapp.com/app/TNEditor/styleEditor_niuren.html (牛人专线文档编辑器采用niurenConfig配置)
如何配置该编辑器?请看:
https://github.com/LaryIII/TNEditor/wiki/%E9%85%8D%E7%BD%AE%E5%92%8C%E4%BD%BF%E7%94%A8
完整源码:
访问我的github:https://github.com/LaryIII/TNEditor欢迎拍砖!

解决方案 »

  1.   

    看到sinaapp...突然想到"求开发者认证"啊..
      

  2.   


    这个框应该是个bug。浏览和保存的时候都不应该有这个框。谢谢你的指出。
    关于空白时不能写东西,这个是因为这个编辑器就是为了创建固定格式的文档。限制了用户的自由,换取文档风格的固定和一致。
    谢谢你能看一下我的编辑器。
      

  3.   

    节点树相当于word里的大纲,一切都是为了让用户对文档有更快捷的查看和编辑。
      

  4.   

    呃,看了一下,苦闷的是,愣是没搞明白。如何从无到有的自定义节点去生成一个文档?
    还有:console的使用,即使是展示页面,也可以再考虑得周全点比较好。我用IE打不开,一看错误,才发现被它搞的。
      

  5.   


    先是有个json配置,然后通过配置生成文档,再由生成好的文档创建了侧边栏的节点树,本来打算用class属性来维护对应关系的,可是考虑到用户文档结构不一定每个dom都有样式,就改用了GUID生成标识符...
    json的配置如下://创建一个配置变量
    var SEditorConfig = {
    //文档根节点
      root:'tourSection_unniuren',
      //文档主要内容
      content:{
      /**内容名值对:
       * 名称是由nodeName和className构成,还可以包含了对该节点可进行的操作说明
       * 例如:'div.className#edit'这个名称告诉文档,要生成一个类名为className的div标签,并且这个div标签是可编辑的
       * className可以有多个,用空格隔开即可;名称可以包含这三部分(nodeName、className、操作说明)的一个或者多个或者全部
       * 
       * 值可以是数组或者js对象,数组的话,要包含名值对,
       *
       * 这样的json结构基本和dom结构是一一对应的
       *
       * 不过在处理文本和图像的时候,配置有一些特别:
       * 1、所有的text节点(文本)都用一个名称为'text'的key来说明
       * 2、所有的图片(img标签)都用一个名称为'src'的key来说明,可以给img加'title'属性,见下面'秦淮河'图片的例子
       * 
       */
      'div.tourContent_new':[{
      'div.day_title_new':{
      'h3':{
      'em':{
      'text':'第1天'
      },
      'div#edit':{
      'text':'请在这里输入行程标题'
      }
      },
      'ul.time_s_photo clearfix':[{
      'li':{
      'a':{
      'img#edit':{
      'src':'http://list.image.baidu.com/t/image/w_mengchong.jpg',
      'title':'秦淮河'
      }
      },
      'div':{
      'a#edit':{
      'text':'秦淮河'
      }
      }
      }
      },
      {'li':{
      'a':{
      'img':{
      'src':'http://images.tuniu.com/images/2006-07-30/4/4187UI1l64ymaEW4s.jpg',
      'title':'沙河'
      }
      },
      'div':{
      'a#edit':{
      'text':'沙河'
      }
      }
      }
      }],
      'div.tour_line_f#edit':[{
      'text':'请在这里输入行程描述,内容可以为“航班信息”、“游览路线”等相关内容'
      }]
      },
      'div.tour_food_f':[
      {
      'div.tour_item':{
      'em':{
      'text':'用餐'
      },
      'div':[
      {
      'text':'早餐:',
      'span.po_dining_day#edit':{
      'text':'敬请自理'
      }
      },
      {
      'text':' 午餐:',
      'span.po_dining_day#edit':{
      'text':'敬请自理'
      }
      },
      {
      'text':' 晚餐:',
      'span.po_dining_day#edit':{
      'text':'敬请自理'
      }
      }
      ]
      }
      },
      {
      'div.tour_item':{
      'em':{
      'text':'住宿'
      },
      'div#edit':{
      'text':'南京路宝宾馆 2人间或同级(独卫、彩电、热水、空调),以当天入住为准'
      }
      }
      }
      ]
      }]
      }
     }
    关于侧边栏的树节点操作都是通过标识符来对应的,这样就可以通过选择器操作文档了。关于console和IE的问题,我的习惯是太不好了啊,呵呵,不够谨慎细微。主要是想尽快出第一个版本。
      

  6.   

    采用json配置应该是麻烦了点,可是js又不能很好的支持读xml文件。不得已采用了json配置的方式。
      

  7.   

    呃,我知道那个文件的。我的意思是说:既然是编辑器,那应当允许从无到有的生成一个文件才是呀
    比如我选择添加一个文件,默认先生成一个根节点。对应的生成一个json对象。然后再根据节点类型选择生成节点时,json中也对应的按业务逻辑添加某个对应的属性进去。是这个意思
      

  8.   


    “节点类型”这个东西有意思。这样的话,json配置要有所修改,能读出节点类型,节点类型分容器和资源,容器大概就是div或者ul之类的块级元素,资源就是文本、图片或者链接,但是不建议分得太细......这应该是个好建议,但我目前没有思路。先记下啦
      

  9.   

    刚洗澡的时候又想了下,10楼的思路的一个版本其实之前做过,这种做法的不好之处在于,让用户面对一个空白的文档,他们根本不知道要如何操作,如果是要添加节点,那么节点类型该如何选择,节点类型之间如何嵌套搭配,这些都是问题。如果直接给用户一个完整的模板,让用户在此基础上修改,复制,添加,这样就容易了很多。
    我承认,自己没有做出可以添加某些节点的功能。比如说,在某个level下可以直接点击增加图片来添加一个图片,现在的版本是要选中某张图片点击复制才行。而且,默认是复制到当前选中节点的下面。这个编辑器就是要让用户快速编辑一个具备特定样式的网页,仅此而已。不支持用户直接编辑文档的任意部分,不让用户破坏固有的样式以及结构。如果用户要那样做,可以选择这个编辑器的普通版本(目前只提供了设置颜色和链接功能,没有添加图片)
      

  10.   

    那可以先简化一下相关的需求
    比如:
    1:选择生成文档,出现一个场景大小的设置。比如宽和高。生成的就是一个div
    2:节点类型进行简化:就[文本,图片]两种类型,文本一律使用div,只是通过用户操作时的节点来针对性的插入到某个节点下面。命名方面可以使用一个内置的guid去完成,图片就不用说了。至于链接啦,文本加粗这些,现有的已经可以了的,想丰富你就再加多些类似于文字大小啥的再要么就干脆,只要用户进行了新建了文档的操作,就在右侧的下方放两个东东:添加文本,添加图片.可以拖动到指定位置就直接生成相关元素,这个使用jQuery的sortable很容易就可以实现了。被拖入哪个容器内,就对应的在生成的json对象对应的节点下添加一个子节点,并设置其相关属性[把json看作一棵树的]至于你说的“让用户面对一个空白的文档,他们根本不知道要如何操作”,我觉得可能是你想得太深了,反而忽略了实际实用问题。你这个编辑器是特殊类的编辑器,使用者并不是所有人。是有特定需业务需要的人。对这些人来讲,操作个一两次就没啥问题了。所以这个问题个人觉得可以忽略它
      

  11.   


    这个还有个问题,就是重复操作。固定样式的文档也就是包含了那几块东西(比如说标题、第一段落、第二段落、结尾),每次都要用户从空白开始狂点几次插入,也是个问题。jquery UI不常用,不过体验了下sortable,发现是个好东西,操作感很强啊!很棒,觉得可以利用一下子。