有几个(非常好的)富文本Web编辑器用Javascript编写(例如FCKeditor,YUI Texteditor和许多其他人).
但是我找不到任何关于如何构建这样一个组件的教程.可以解释高级别考虑因素(架构)和/或低级"关键"点中的更多细节(即为什么大多数编辑器都使用iFrame,如何处理键盘输入,如Ctrl-B,Ctrl -C选择文本时以及不选择文本时等)
我的主要动机是好奇心; 如果我今天必须开发这样一个编辑器,我不知道从哪里开始.
有没有人知道任何涵盖上述问题的教程(理想情况下,解释如何从头开始构建一个wysiwyg编辑器)？
我正在使用tinyMCe我的项目.一切正常,但现在我想限制将插入tinyMcetextarea 的字符数
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple",
plugins : "autolink,lists,pagebreak,style,table,save,advhr,advimage,advlink,emotions,media,noneditable,nonbreaking",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,code,|,forecolor,backcolor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
max_chars : "10",
max_chars_indicator : "lengthBox",
theme_advanced_resizing : true
});
我用了 :-
max_chars : "10",
max_chars_indicator : "lengthBox",
但仍然没有工作.谢谢.
我必须在Tiny MCE中使用HTML 5 数据属性,但编辑器总是清除它们,因为它不是默认的valid_elements配置已知的属性.
所以这里有2个问题:
到目前为止,我已经尝试过:
extended_valid_elements : '@[id|class|title|style|data-options]',
和:
extended_valid_elements : '*[id|class|title|style|data*]',
但它不起作用:(
你好我想在用户在tinyMCE textarea中写完并点击外面的某个地方(onBlur)时做一些事情.到目前为止,我试过:
$('#id_topic_text_parent').live('blur',function(){
alert('asd')
//I saw #id_topic_text_parent in firebug, it is span containing the tiny mce
});
也
$('#id_topic_title').blur(*and*)live('blur...
tinyMCE.activeEditor.blur(*and*)live('blur...
但它不会工作.
你能帮助我吗？
我无法弄清楚如何让图像像http://quilljs.com/上的示例一样工作.
我尝试添加<span title="Image" class="ql-format-button ql-image"></span>到工具栏,添加按钮,但点击按钮什么都不做,我在文档中找不到任何内容.有什么建议吗？
我正在使用jquery创建一个非常简单的富文本编辑器...我不想使用第三方.
我需要在iframe(同一个域等)中监听事件,从键入开始.显然我需要经常使用bind().
这就是我目前在IE8中工作得很好(非常令人惊讶)但不是Chrome.
<script>
$(function() {
$('#text').contents().bind("keyup keydown keypress", function(e) {
var code = e.keyCode || e.which;
alert(code);
return false;
});
});
</script>
<body>
<iframe id="text" name="text" src="edit.html"></iframe>
</body>
在上面的关键新闻事件中,我还想获得'edit.html'的当前值并使用该值更新textarea ...
任何帮助将非常感激 :)
非常感谢
编辑:进一步解释,edit.html是一个可编辑的文件使用 "document.body.contentEditable = true;"
-
编辑2:
edit.html =
<script language="javascript">
function InitializeIFrame() {
document.body.contentEditable = true;
}
</script>
<html>
<body onload="InitializeIFrame();">
</body>
</html>
我正在使用带有TinyMCE的BBCode插件,并看到预览和HTML代码之间的换行符没有显示相同.
我在编辑器窗口中有以下几行:
This is line one
This is line three
第二行是空的.当我在HTML中查看时,我得到以下内容.
This is line one
This is line three
没有多余的空行.
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
entity_encoding : "raw",
remove_linebreaks : false,
force_p_newlines : false,
force_br_newlines : true,
forced_root_block : ''
});
我错过了什么？
我有一个tinyMCE的问题,但仅在实时环境中因为某些原因tinyMCE重写绝对网址而且只针对某些TLD网站,到目前为止我注意到它不适用于.eu域名,是否有人有同样的问题或知道什么能解决这个问题？
我想从TYPO3 4.7.5更新到TYPO3 4.7.10.现在我在Upgrade Wizard,它说:
页面TSconfig中不推荐使用的RTE属性
自TYPO3 4.6起,以下页面TSconfig RTE属性将被弃用,并将在TYPO3 6.0中删除.
不推荐使用的属性使用
disableRightClick contextMenu.disable
disableContextMenu contextMenu.disable
hidePStyleItems buttons.formatblock.removeItems
hideFontFaces buttons.fontstyle.removeItems
fontFace buttons.fontstyle.addItems
hideFontSizes buttons.fontsize.removeItems
classesCharacter buttons.textstyle.tags.span.allowedClasses
classesParagraph buttons.blockstyle .tags.div.allowedClasses
classesTable buttons.blockstyle.tags.table.allowedClasses
classesTD buttons.blockstyle.tags.td.allowedClasses
classesImage buttons.image.properties.class.allowedClasses
classesLinks buttons.link.properties.class.allowedClasses
blindImageOptions buttons.image .options.removeItems
blindLinkOptions buttons.link.options.removeItems
defaultLinkTarget buttons.link.properties.target.default
fontSize buttons.fontsize.addItems
RTE.default.classesAnchor RTE.default.buttons.link.properties.class.allowedClasses RTE.default. classesAnchor.default.[link-type] RTE.default.buttons.link.[link-type] .properties.cl ass.default mainStyleOverride contentCSS mainStyleOverride_add.[key] contentCSS mainStyle_font contentCSS mainStyle_size contentCSS
mainStyle_color contentCSS mainStyle_bgcolor contentCSS
inlineStyle.[any-keystring] contentCSS ignoreMainStyleOverride na disableTYPO3Browsers buttons.image.TYPO3Browser.disabled和buttons.link.TYPO3Browser.disabled
showTagFreeClasses buttons.blockstyle. showTagFreeClasses and buttons.textstyle.showTagFreeClasses
disablePCexamples buttons.blockstyle.disableStyleOnOptionLabel and buttons.textstyle.disableStyleOnOptionLabel您当前正在1页面(包括已删除和隐藏的页面)中使用这些属性中的一些. …
我有一些我想添加的预设颜色,这与我网站的主题一致.如何更改TinyMce中的默认字体调色板？
screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png
rte ×10
javascript ×7
tinymce ×6
jquery ×3
richtext ×2
attributes ×1
bbcode ×1
deprecated ×1
html ×1
html5 ×1
iframe ×1
onblur ×1
quill ×1
typo3 ×1
typoscript ×1
updates ×1
wysiwyg ×1
