标签: tinymce

我textarea在网页上大约有7 秒,所有这些都是使用TinyMCE的富文本编辑器.但是在页面加载时,只有其中一个是可见的,其余的都是隐藏的.用户可以单击"显示"链接,该链接将逐个显示剩余的文本.

但是,我有一个奇怪的问题.所有textareas都设置如下:

<textarea cols="40" rows="20"></textarea>

但是,只有textarea页面加载显示的是我想要的完整大小.textarea当我展示它们时剩下的s真的很小.所以我想也许它们不会被渲染,因为它们隐藏在页面加载上.

我该如何解决这个问题？

好吧,如果我能在TinyMCE的文档中找到相关信息,那么这个问题的答案真的要容易得多,但我不能.我想做的是以下内容:

1. 用户可以选择TinyMCE编辑器中的文本
2. 用户单击该按钮
3. 对话框打开时,三个字段之一中的所选文本(我希望能够在编辑器中从完整URL创建一个bit.ly链接)
4. 用户单击"确定",发生魔术,然后使用新更改的内容将其发送回编辑器.

所以基本上,我真正需要的是知道如何让弹出窗口工作,至少目前如此.问题是:通过"tinymce popup","tinymce dialog""tinymce prompt user"搜索所有内容都没有任何有用的东西,我可以看到.

我在一个页面上有多个TinyMCE实例.

我有一个在后台运行的javascript自动保存,它通过POST请求自动将表单保存在数据库中.这适用于一个表单,我可以在init中设置元素ID.但是,在我的场景中,用户可以拥有可变数量的TinyMCE表单,因此具有多个硬编码元素ID似乎不实用.

TL; DR:在不知道实例ID的情况下,在同一页面中动态获取TinyMCE的所有实例.或者,在一个auto_save()函数中保存多个表单的任何其他方法.

我在tinyMCE编辑器中有短代码,括在括号中,如下所示:

[my_shortcode]some text that gets parsed by my shortcode function[/my_shortcode]

是否可以将运行时样式css应用于tinyMCE编辑器内容,以便括号中的任何元素(在我的短代码列表中*)获得特殊的css处理以使它们脱颖而出？

我们的想法是,短代码目前没有特殊的颜色或格式,以区别于任何周围的文本,除非它们更突出,否则很难使用它们.

我的短代码列表(示例):

[my_shortcode],[my_shortcode_2],[my_shortcode_3]

更新:我将采取我可以得到的这个,但理想情况下,我只想将样式应用于括号,而不是括号缠绕的文本.所以我只想将运行时css样式应用于短代码括号:例如[my_shortcode]和[/ my_shortcode],并保留它们单独包含的文本.

我正在尝试自定义默认styleselect工具栏菜单,以便我可以添加自定义菜单元素.我们的想法是将字体大小设置为styleselect子菜单:

我TinyMCE 4.0.5用以下方式初始化了一个:

tinymce.init(
{
    language_url : '/webobbywebapp/js/tiny_mce/language/es.js',
    selector:'textarea',
    plugins: "image, link, print",
    toolbar: "styleselect | undo redo | removeformat | bold italic underline |  aligncenter alignjustify  | bullist numlist outdent indent | link | print | fontselect fontsizeselect",
    menubar: false,
    statusbar: true,
    resize: true
});

由于我无法找到如何自定义默认样式选择菜单,我还尝试创建一个完整的新菜单,我可以在其中添加字体大小控件.但我不想显示任何工具栏,我想要一个菜单​​栏.

编辑:现在我正在尝试使用以下代码修改styleselect菜单,但fontselect和fontsizeselect似乎已禁用

,style_formats:
[{
    title: "Headers_",
    items: [{title: "Header 1",format: "h1"}, {title: "Header 2",format: "h2"}, {title: "Header 3",format: "h3"}, {title: "Header 4",format: "h4"}, {title: "Header 5",format: "h5"}, {title: …

我刚刚在tinyMCE小提琴中重现了同样的错误.

这是链接:http://fiddle.tinymce.com/39daab

页面上有简短的描述......

以下步骤将显示我遇到的错误...

我一直试图通过自己解决这个问题,但我想我无法解决.

我查看了一千次的tinyMCE文档和错误报告页面,

但我无法得到这个暗示.

IE可以放置焦点真的很奇怪,但不能将光标放在输入元素上.

您可以通过选择$('*:focus')来检查当前的焦点元素...

聚焦确实有效,但放置光标不行.

我想知道是否有办法配置TinyMCE(WYSIWYG HTML编辑器)为所有插入某种类型的元素添加一个类.我想要应用Bootstrap的样式,特别是表格.我想知道它有某种钩子或什么东西可以在插入时为元素添加一个类名？例如,我想添加class="table table-bordered"到通过UI插入的所有表元素.我知道有一种方法可以指定要应用于内容的样式表,但我不知道为插入的元素添加类名的机制.

此链接:http://www.tinymce.com/wiki.php/TinyMCE3x:%22For_Dummies%22在"theme_advanced_buttons"后面的第二个窗口标题下显示"Custom Advanced TinyMCE wysiwyg Editor",您可以添加按钮的名称到你的工具栏.它在版本4.x中有点不同,但它的工作方式如下:

$('#my_textarea').tinymce({
    plugins: 'link,code,preview,autolink',             
    height: 350,
    width: 750,
    toolbar: "undo redo | styleselect | bold italic | justifyleft justifycenter justifyright | bullist numlist | link image | preview code"
});

除了justifyleft justifycenter justifyright按钮,一切都很完美.那么如何找到这些按钮的正确按钮名称？

在TinyMCE中,当我编辑HTML代码(使用代码插件)并删除结束标记时,它会在单击"确定"后立即自动添加它们.

例如,一段代码就像

<table>
    <tr>
        <th>Foo</th>
    </tr>

变

<table>
    <tbody>
        <tr>
            <th>Foo</th>
        </tr>
    </tbody>
</table>

在我的用例中我发现这个不受欢迎,但我无法弄清楚如何关闭它.

我已经看过这个问题并尝试了这些选项而没有结果:

forced_root_block: false,
verify_html: false,
verify_css_classes: false,
cleanup: false,
cleanup_on_startup: false,
fix_list_elements: false,
valid_children: '+body[style],head[style]',
valid_elements: '*[*]',

我的TinyMCE版本是4.3.11.

我想添加一个触发按钮来将图像上传为数据.所以我添加了以下代码

<textarea id="test"></textarea>
<input name="image" type="file" id="test-upload" class="hidden" onchange="">

tinymce.init({
            selector: '#test',
            ...,
            paste_data_images: true,
            image_advtab: true,
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'image') {
                    jQuery('#test-upload').trigger('click');
                    jQuery('#test-upload').on('change', function() {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function(e: any) {
                            callback(e.target.result, {
                                alt: ''
                            });
                        };
                        reader.readAsDataURL(file);
                    });
                }
            },
            ...
        });

这是按预期工作的.我正在为图像获取文件选择器,如下所示

但是当我尝试添加链接时,我也得到了这个文件选择器.

怎么避免这个？