2012-03-20 34 views
8

我有一个正好为425px x 100px的盒子,我希望我的用户使用所见即所得的编辑器对盒子内容进行样式设置。他们应该能够使用该框中的几乎所有HTML。适用于固定盒子的最佳JavaScript所见即所得解决方案

不,我正在寻找一个适当的所见即所得的编辑器,我曾经使用TinyMCE来解决这类问题,但我认为它最适合长连续文本,但现在我有一个固定的盒子。

如果编辑器能够绝对定位文本和图像,用户就可以将他们的内容定位到该盒子内的任何位置,这将非常棒。

+0

您是否要求一个允许用户将html元素完全放置在固定容器内的Web应用程序? – 2012-03-28 21:53:26

+0

是的某种wysiwyg编辑器。这为固定容器优化。 – 2012-03-29 09:38:44

回答

6

http://ckeditor.com/

我发现CKEditor的有用,有任何关于图片或文字丰富的功能,让你俩的所见即所得和html源代码格式化方法,也有固定大小的“画布”上,用户可以根据需要定制,

我的实际使用它的

打印屏幕, enter image description here

这里是源屏幕 enter image description here ,最后我使用800x500固定大小的画布

enter image description here

+0

我正在做一些类似的Ckeditor以及。 OP所需的元素的任何“定位”,都不能被编辑器支持,可以使用自定义对话框/插件功能轻松合并。 – 2012-03-31 01:42:59

0
+1

这wysiwyg似乎非常接近tinymce,我不能找到一个选项来使用用户可以定制的修复大小的“画布”。 – 2012-03-20 22:38:32

+0

画布的高度和宽度可以通过tariq进行调整。您只需要关闭关闭工具栏的按钮,因为关闭工具栏会恢复一些画布空间(从而更改画布的大小)。 – 2012-03-31 01:45:02

4

可以使用TinyMCE的做到这一点。要定位文本和图像修复,您将需要一个自己的内容CSS(请参阅tinymce documentation for the configuration parameter content_css)。你甚至可以在这个CSS中定义tinymce内容的段落宽度,解决你的盒子问题。针对你的机器的问题(要放置在自己的CSS文件)的CSS看起来像下面这样:

p { 
    width: 100px; 
} 

关于长度(或更好heigth),你可能需要实现自己的插件,并检查长度的编辑内容。如果已经达到该长度,则删除用户刚刚尝试插入的字母/内容。

+0

如果您对此方法有任何疑问 - 不要害羞 – Thariama 2012-03-29 11:32:04

+0

TinyMCE是最好的所见即所得的编辑器,有很多插件可用于免费和清晰的文档。 – Raptor 2012-03-31 03:09:23

+0

TinyMCE如何比Ckeditor更好? – 2012-03-31 04:52:31

1

一个简单而有效的解决方案是PageDown。它使用Markdown,因此它允许HTML格式。但是,PageDown包含两个脚本来清理其内容。有点修补你可以允许或限制额外的标签。

至于定位,正如Thariama所言,这很容易被CSS控制,所以这对所见即所得的编辑来说不是问题。

0

根据您的需求,我建议为nicedit。您也可以将它放在轻型版本中,同时也有固定的高度和宽度。