标签: tinymce-4

我正在升级到tinyMCE 4.x,我试图在通过AJAX加载的textarea上初始化tinyMCE.在3.x中我做了类似的事情:TinyMCE - 附加到通过AJAX调用加载的div,但这似乎不适用于4.x.

我决定在我的博客上使用ui-tinymce(tinymce的角度版本).但我找不到相同的文档.将欣赏有关配置tinymceOptions的任何资源或任何建议.

这是git链接 - https://github.com/angular-ui/ui-tinymce

我的网站上有一个TinyMCE编辑器,我希望以A4格式显示可编辑区域(或整个事物).

基本上,我想以与MS Word相同的方式查看文档.(宽度,分页数等)

这甚至可能吗？请指出我正确的方向.

我想为文本添加更改字体样式;

为此,我使用这个脚本:

tinymce.init({
    selector: selector_id,
    theme: "modern",
    theme_modern_font_sizes: ["6px,7px,8px,9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,31px,32px,36px,38px,40px"],
    font_size_style_values: ["6px,7px,8px,9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,31px,32px,36px,38px,40px"],
/*  width: 300,
    height: 300, */
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality template paste textcolor"
   ],
   content_css: "./style.css",
   toolbar: "insertfile undo redo | fontsizeselect | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | …

我正在尝试在TinyMCE Editor 4.0b1中添加自定义字体系列并继续失败.
显示所有默认字体,未显示"Century Gothic"或"Gill Sans MT"等自定义字体.theme_advanced_fonts在TinyMCE 4中不起作用吗？我找不到任何TinyMCE 4文档.

tinymce.init({
  selector: "textarea",
  plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
  ],
  toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontselect fontsizeselect | forecolor backcolor",
  convert_urls: false,
  content_css: 'http://www.mydomain.com/css/fonts.css',
  theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
  theme_advanced_fonts : "Andale Mono=andale mono,times;"+
                         "Arial=arial,helvetica,sans-serif;"+
                         "Arial Black=arial black,avant garde;"+
                         "Book Antiqua=book antiqua,palatino;"+
                         "Comic Sans MS=comic sans …

我正在从TinyMCE 3迁移到4.

但是,我正在坚持让TinyMCE填充其100%高度的容器(它确实适用于TinyMCE 3).

请注意这个小提琴:http://jsfiddle.net/MLJaN/

我使用下面的CSS尝试将iframe及其所有父项设置为100%-height.我同意它看起来并不理想,但我认为它应该以这种方式工作.

 body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
 {
     height: 100% !important;
 }

正如您在实况小提琴中看到的那样,正好是工具栏的像素数量"太高":即它太高(工具栏的高度)是34px.

这有效,但它不会自动调整浏览器大小,它使用的calc()现在只支持79%左右:http://jsfiddle.net/MLJaN/2/

现在,我正在寻找一个纯CSS(无calc()函数)解决方案,使整个编辑器填充其容器并可流畅地调整大小.

任何指针都将非常感激.

我有tinyMCE的这个设置:

tinymceOptions = {
  inline: true,
  resize: false,
  plugins: "textcolor",
  selector: "div.editing",
  toolbar: "forecolor backcolor",
  fixed_toolbar_container: ".my-toolbar"
}

我应该这样做,但不满足我的需求,我想要的是一个固定的外部工具栏,用于多个编辑器实例,当焦点丢失时(模糊事件)不会消失,这与此设置不同.

注意:

删除inline: true没有效果!？

到目前为止,这是Firefox和IE的一个问题我已经测试过; Chrome上不存在此问题.

我在一个页面上包含两个TinyMCE编辑器,其中一个部分在屏幕外启动.当我color picker从第一个TinyMCE实例的工具栏中选择下拉选项时,下拉列表会显示在应该的位置.但是,如果我向下滚动,并选择color picker在下拉二审中,出现下拉列表编辑方式下面,通常关闭页面.

你可以在这里看到这个:http://jsfiddle.net/nm6wtca3/

在不删除html, bodyCSS的情况下,如何让颜色选择器始终显示在正确的位置？

我已经将问题追溯到在html, body元素上设置CSS .

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

dropdown div具有应用于它的CSS,由TinyMCE自动计算.它看起来像这样:

z-index: 65535; 
left: 641.467px; 
top: 633px; 
width: 162px; 
height: 105px;

它在FF中的表现(有时候会更糟):

它在Chrome中的显示方式(它应该如何显示):

我正在创建一个下拉列表,其中包含一个类列表,因此我的用户可以将它们应用于链接,段落等.我已经阅读了很多地方,现在advanced主题支持这个开箱即用,但我可以找不到这个主题的下载地点.

我怀疑高级主题仅仅是Wordpress,因为我发现它包含在wordpress下载中但不是允许我使用它的格式.

我错过了什么吗？

正如标题所说,我查阅了官方文档,但它没有工作; 这是我的JavaScript(利用jQuery)代码:

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        schema: "html4",
        menubar: false,
        plugins: 'preview textcolor link code',
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
    tinymce.activeEditor.setContent($('TEXTAREA#rtf').text());
});

1. 我试图检查tinymce和tinyMCE(从Googling得到这个)实例,它们都是对象好的.
2. 我也试着检查tinymce.activeEditor和tinyMCE.activeEditor,但他们练得空!

(咳嗽)不知何故,在我将所有东西恢复到我现在开始的位置后,它可以工作:

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        menubar: false,
        plugins: 'preview textcolor link code',
        schema: "html4",
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | …