bootstrap3.x-markdown编辑器

Question

改造了一个文本编辑器http://www.oschina.net/p/bootstrap-markdown。以前使用bootstrap 2.x开发的，现在改造成了基于bootstrap 3.x的 。但是有些问题：
1.点击全屏编辑时，输入域和展示域不是左右布局，而是上下布局。

期望效果：

实际效果

2. 全屏编辑时不能遮盖modal下面的内容（显示的部分文本就是下层的label）。

3.退出全屏编辑后，原本输入框会变小

全屏编辑前：

退出全屏编辑后（大约少了右侧那么宽）：

4.在使用工具栏时，firefox下不能无效果。setRangeText('')不能在firefox下使用。

 

代码：http://git.oschina.net/tyk/bootstrap-markdown

Answer 1

@蛙 午睡没时间了= =，可以的话给个最佳

Answer 2

# 全屏编辑时不能遮盖modal下面的内容（显示的部分文本就是下层的label）。

你是想全屏时把 modal 隐藏到后面？

是的话给 delegate.$fullscreen 设个背景色。

delegate.$fullscreen.css('background-color', '#fff')  //line 603

Answer 3

我调一下试试，非常感谢!

Answer 4

# 全屏编辑时不能遮盖modal下面的内容（显示的部分文本就是下层的label）。

你是想全屏时把 modal 隐藏到后面？

是的话给 delegate.$fullscreen 设个背景色。

delegate.$fullscreen.css('background-color', '#fff')  //line 603

Answer 5

补充上面的：

628 行：

$dom.find('div.right').css('width', (rw - 1) + 'px').css('height', h + 'px');

(rw -1) 的 1改成大一点的数字

Answer 6

出现取值不对的原因是什么？

Answer 7

回复
拿到 width 时 element 已经改变了，你拿到的是改变后的 width,可以在函数开头把值取好。

Answer 8

回复
具体来说应该是这一句导致textarea大小变化了吧“delegate.$textarea.appendTo($left);”

Answer 9

# 退出全屏编辑后，原本输入框会变小

问题在 602行

delegate.$textarea_old_width = delegate.$textarea.innerWidth();

在

delegate.$fullscreen = $modal;
delegate.$toolbar.appendTo($left);
delegate.$textarea.appendTo($left);

后执行，拿不到正确的 width。可以改成

setTimeout(function() {
    delegate.$fullscreen = $modal;
    delegate.$toolbar.appendTo($left);
    delegate.$textarea.appendTo($left);
}, 0);

不过，628 行会先于上面的代码执行，还要再套一层 setTimeout，最好的做法还是改改代码顺序。

Answer 10

顶

Answer 11

谁会?

Answer 12

分析分析呗。。

Answer 13

回复
我不懂前端啊 不好意思

Answer 14

顶

Answer 15

顶

Answer 16

# 1.点击全屏编辑时，输入域和展示域不是左右布局，而是上下布局。

你忽略了浏览器自带的 scrollbar 本身占了 20px 左右的宽度，把下面的预览区宽度改小一点就ok了。