87,922
社区成员
发帖
与我相关
我的任务
分享自己写的web编辑器，可配置文档结构和样式
这个编辑器可以自由配置文档，这样就可以用一个编辑器编辑各种各样类型的文档，对于固定格式的文档的编辑效率的提高和灵活性都有很大改善。
只要懂得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
欢迎拍砖！
只要懂得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
欢迎拍砖！
...全文
请发表友善的回复…
发表回复
scscms太阳光 2012-11-19
- 打赏
- 举报
楼主你这编辑器对公文政府网站很有市场
对简单的人来说，更多选择反而他们不知所措。固定好几种公文模式，并有样式限制，方便快捷，他们会喜欢的，下次跟市长喝茶的时候推荐一下。
对简单的人来说，更多选择反而他们不知所措。固定好几种公文模式，并有样式限制，方便快捷，他们会喜欢的，下次跟市长喝茶的时候推荐一下。
zhouhai3032 2012-11-18
- 打赏
- 举报
我是未认证开发者啊！！！！忒苦逼了
zhouhai3032 2012-11-18
- 打赏
- 举报
节点树相当于word里的大纲，一切都是为了让用户对文档有更快捷的查看和编辑。
zhouhai3032 2012-11-18
- 打赏
- 举报
这个框应该是个bug。浏览和保存的时候都不应该有这个框。谢谢你的指出。
关于空白时不能写东西，这个是因为这个编辑器就是为了创建固定格式的文档。限制了用户的自由，换取文档风格的固定和一致。
谢谢你能看一下我的编辑器。
zhouhai3032 2012-11-18
- 打赏
- 举报
这个还有个问题，就是重复操作。固定样式的文档也就是包含了那几块东西（比如说标题、第一段落、第二段落、结尾），每次都要用户从空白开始狂点几次插入，也是个问题。
jquery UI不常用，不过体验了下sortable，发现是个好东西，操作感很强啊！很棒，觉得可以利用一下子。
泡泡鱼_ 2012-11-18
- 打赏
- 举报
那可以先简化一下相关的需求
比如：
1：选择生成文档，出现一个场景大小的设置。比如宽和高。生成的就是一个div
2：节点类型进行简化：就[文本,图片]两种类型,文本一律使用div,只是通过用户操作时的节点来针对性的插入到某个节点下面。命名方面可以使用一个内置的guid去完成，图片就不用说了。至于链接啦，文本加粗这些，现有的已经可以了的,想丰富你就再加多些类似于文字大小啥的
再要么就干脆,只要用户进行了新建了文档的操作，就在右侧的下方放两个东东：添加文本,添加图片.可以拖动到指定位置就直接生成相关元素，这个使用jQuery的sortable很容易就可以实现了。被拖入哪个容器内，就对应的在生成的json对象对应的节点下添加一个子节点，并设置其相关属性[把json看作一棵树的]
至于你说的“让用户面对一个空白的文档，他们根本不知道要如何操作”，我觉得可能是你想得太深了，反而忽略了实际实用问题。你这个编辑器是特殊类的编辑器，使用者并不是所有人。是有特定需业务需要的人。对这些人来讲，操作个一两次就没啥问题了。所以这个问题个人觉得可以忽略它
zhouhai3032 2012-11-18
- 打赏
- 举报
刚洗澡的时候又想了下，10楼的思路的一个版本其实之前做过，这种做法的不好之处在于，让用户面对一个空白的文档，他们根本不知道要如何操作，如果是要添加节点，那么节点类型该如何选择，节点类型之间如何嵌套搭配，这些都是问题。如果直接给用户一个完整的模板，让用户在此基础上修改，复制，添加，这样就容易了很多。
我承认，自己没有做出可以添加某些节点的功能。比如说，在某个level下可以直接点击增加图片来添加一个图片，现在的版本是要选中某张图片点击复制才行。而且，默认是复制到当前选中节点的下面。
这个编辑器就是要让用户快速编辑一个具备特定样式的网页，仅此而已。不支持用户直接编辑文档的任意部分，不让用户破坏固有的样式以及结构。如果用户要那样做，可以选择这个编辑器的普通版本（目前只提供了设置颜色和链接功能，没有添加图片）
zhouhai3032 2012-11-18
- 打赏
- 举报
“节点类型”这个东西有意思。这样的话，json配置要有所修改，能读出节点类型，节点类型分容器和资源，容器大概就是div或者ul之类的块级元素，资源就是文本、图片或者链接，但是不建议分得太细......
这应该是个好建议，但我目前没有思路。先记下啦
泡泡鱼_ 2012-11-18
- 打赏
- 举报
呃，我知道那个文件的。我的意思是说：既然是编辑器，那应当允许从无到有的生成一个文件才是呀
比如我选择添加一个文件，默认先生成一个根节点。对应的生成一个json对象。然后再根据节点类型选择生成节点时，json中也对应的按业务逻辑添加某个对应的属性进去。
是这个意思
zhouhai3032 2012-11-18
- 打赏
- 举报
采用json配置应该是麻烦了点，可是js又不能很好的支持读xml文件。不得已采用了json配置的方式。
zhouhai3032 2012-11-18
- 打赏
- 举报
先是有个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人间或同级（独卫、彩电、热水、空调），以当天入住为准'
}
}
}
]
}]
}
}
泡泡鱼_ 2012-11-18
- 打赏
- 举报
呃，看了一下，苦闷的是，愣是没搞明白。如何从无到有的自定义节点去生成一个文档？
还有:console的使用，即使是展示页面，也可以再考虑得周全点比较好。我用IE打不开，一看错误，才发现被它搞的。。。。
scscms太阳光 2012-11-17
- 打赏
- 举报
我想问一下，为什么左边要搞个节点树？
选中节点，右边对应会形成一个框，浏览时会保留这个框，保存时会不会也保留？如果保留这可不是我们希望的。
还有编辑器空白时不能写入东西，必须得新建节点？操作有点费力
cx2889 2012-11-17
- 打赏
- 举报
看到sinaapp...突然想到"求开发者认证"啊..
冰岛男孩 2012-11-17
- 打赏
- 举报
过来看看，不错
