标签: tinymce-4

在TinyMCE 3中,您可以使用以下设置中的代码更改编辑器的默认字体大小:

setup : function(ed)
{
    ed.onInit.add(function(ed)
        {
            ed.getDoc().body.style.fontSize = '14px';
        });
}

在版本4中,我尝试使用相同的方法,但得到此错误:

TypeError:ed.onInit未定义

我还尝试使用"content_css"选项并将正文设置为14px字体大小,但仅在预览时才有效.http://www.tinymce.com/wiki.php/Configuration:content_css

有没有人找到另一种方法来设置编辑器的默认字体大小？即使在他们的论坛中我也找不到任何文件.

我正在寻找一些关于如何扩展现有的tinymce(4.x)插件的例子,例如"链接"插件.

链接插件打开一个对话框窗口......我想要做的是在打开对话框时添加一个事件并修改正文(用点击事件插入一些额外的HTML).

这样做似乎很有问题...我想避免一些"在顶部"代码$('#mce_13').click(...);,而不是使用类似的东西

editor.on('DialogOpen', function(e) {
    // if link dialog then
    $(e.body).append('<div>My HTML</div>');
});

然而,没有像onDialogOpen...... 这样的事件是否有最佳实践来实现这一目标？

这里的活动官方页面为tinymceonChange

<script>
    tinymce.init({
    selector: "textarea",
    language: "ru",
    plugins: [
        "advlist autolink lists link charmap anchor",
        "searchreplace fullscreen",
        "insertdatetime paste"
    ],
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
    setup : function(ed) {
        ed.onChange.add(function(ed, l) {
            console.debug('Editor contents was modified. Contents: ' + l.content);
        });
    }
});
</script>

我使用这段代码,但是没有工作,在控制台我发现错误Cannot read property 'add' of undefined...

请告诉我为什么代码不能正常工作怎么样？

我有以下代码来渲染tinymce。之前一直好好的，不知道为什么突然就坏了。首先它完美地渲染了tinymce。第二次加载失败。第二个我发现tinymce.editors.length = 1，意味着编辑就在那里。

tinyMCE.init({
    paste_as_text: true,
    mode: 'textareas',
    plugins: ['paste link textcolor'],
    force_br_newlines: true,
    paste_remove_spans: true,
    toolbar: "undo redo | bold italic underline forecolor | link unlink",
    menubar: false,
    statusbar: false,
    browser_spellcheck: true,
    forced_root_block: "",
    setup: function (editor) {
        editor.on('init', function() {
            $('#loading_gfx').css('display', 'none'); 
        });

    }
});

我找到的解决方案

if (tinymce.editors.length > 0) {
    tinymce.execCommand('mceFocus', true, textArea_id );       
    tinymce.execCommand('mceRemoveEditor',true, textArea_id);        
    tinymce.execCommand('mceAddEditor',true, textArea_id);
}

但我不明白为什么它突然中断，我有最新的tiny mce版本4.2.3任何人都知道原因。

有什么方法可以计算在tinymce编辑器中输入的字符数。我只是想设置最低字符要求。或者如何tinyMCE.activeEditor.getContent()正确使用此目的。

我正在尝试在服务器端使用 Laravel 5.3 实现 TinyMCE 图像上传：

这是我用于 TinyMCE 的 JS，它目前在刀片模板中：

<script src="{{ URL::to("/tinymce/tinymce.min.js") }}"></script>
<script>
    tinymce.init({
        selector: 'textarea',
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,

        image_title: true,

        automatic_uploads: true, …

我正在尝试动态更改tinymce编辑器的内容。即使这个步骤也不起作用。实际上我想将内容放在ajax成功上，但由于它不起作用我无法继续。

我收到类型错误tinemce.get() is null and tinymce.activeEditor is null 错误

<textarea style="height:700px" name="proposal" id="proposal" >
                        hi
</textarea>
<script>
    $(document).ready(function () {
                        tinymce.init({
                          selector: "#proposal",
                          height: 250,
                          theme: "modern",
                          plugins: [
                            "autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak",
                            "searchreplace wordcount visualblocks visualchars code fullscreen",
                            "insertdatetime media nonbreaking save table contextmenu directionality",
                            "emoticons template paste textcolor colorpicker textpattern imagetools codesample toc"
                          ],
                          toolbar1: "undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | …

我有带有文本区域的简单模式窗口：

<div class="box-modal" id="product_modal">
    <div class="box-modal_close arcticmodal-close"><img id="closePopupImage" src="/images/icons/popup_icon_close.png"></div>
    <div id="product_fields">
        <span class="product_label">{'TEXT_PRODUCT_NAME'|tr}:</span>
        <input type="text" class="product_name">
        <span>{'TEXT_PRODUCT_PRICE'|tr}:</span>
        <input type="text" class="product_price">
        <span>{'TEXT_PRODUCT_AMOUNT'|tr}:</span>
        <input type="text" class="product_amount">
        <br>
        <span class="product_label pr_comment">{'TEXT_PRODUCT_COMMENT'|tr}:</span>
        <textarea id="product_comment" class="product_comment"></textarea>
        <img class="add_one_more" src="/images/icons/add_button.png" title="{'TEXT_ADD_ONE_MORE'|tr}">
    </div>
</div>

我有一个带有 .add_products_btn 类按钮的表。

我的js：

 function makeTinyMceEditor() {
            tinymce.init({
                selector: "#product_comment",
                plugins: "link"
            });
    }

$(".add_products_btn").click(function () {
        $("#product_modal").arcticmodal();
        makeTinyMceEditor();
    });

因此，当我第一次单击按钮时，我的tinymce 工作正常。但是当我单击第二个按钮时，我的tinymce不起作用（认为是因为每次单击按钮时textarea的id都是相同的）。如何从编辑器中删除旧的 id 实例以便再次使用它们？

谢谢。

我知道在引导模式下启用 tinymce 弹出窗口中的焦点所需的调整。但目前我正在使用 vuetify 对话框。这似乎并没有关注tinymce的弹出字段。

我已经解决了这个问题，但它在上下文中不起作用，无法在不可编辑中vuetify TinyMCE 4 links plugin modal

下面是我的代码，我删除了一些方法只是为了清理，并保留了我在挂载事件和编辑器初始化中尝试过的基本内容。

  <no-ssr placeholder="Loading Editor..">
    <tinymce
      id="content"
      :toolbar2="toolbar2"
      :toolbar1="type=='BASIC'?'':toolbar1"
      :plugins="plugins"
      :other_options="other_options"
      v-model="content"
      @input="handleInput"
      v-on:editorInit="initCallBack"
    />
  </no-ssr>
</template>

<script>
//https://dyonir.github.io/vue-tinymce-editor/?en_US
export default {
  props: {
    value: { type: String },
    type: { type: String }
  },
  data() {
    return {
      content: this.value,
      plugins: this.getPlugins(),
      toolbar2: "",
      toolbar1: this.getToolbar1(),
      other_options: {
        menubar: this.getMenubar(),
        height: "320",
        file_browser_callback: this.browseFile,
        auto_focus: '#content'
      }
    };
  },
  mounted(event) {
    // window.tinyMCE.activeEditor.focus();
    // window.tinymce.editors["content"]
    console.log(this.$el, event); …

我使用这个简单的代码包括来自CDN的tinyMCE:

$('head').append('<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>');
tinymce.init({selector: '#selector_id'});

它工作正常,在大多数浏览器(FF,IE,Opera)中没有任何警告/错误.在Chrome中它也有效,但控制台显示此错误:'未捕获的ReferenceError:ext未定义 - include.postload.js:539'.

我尝试包含不同的可用版本(4,4.0,4.1),但错误仍然存​​在.我也尝试直接在头文件中包含脚本,没有JS,但它也没有帮助.

这个错误的原因是什么？我怎么能摆脱它呢？