标签: tinymce-4

我正在尝试自定义默认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: …

我的html页面上有一个tinymce文本框.在这个文本框下面,我有一个包含文件系统的表,我可以在其中导航以查找我的图像.我希望能够单击此表中的图像并将其插入timymce文本框中.我该怎么做呢？

我有一个代码片段,可以帮助我为可视化编辑器文本颜色下拉列表添加一些自定义颜色以及默认颜色.我正在粘贴下面的片段.

function change_mce_options( $init ) {
  $default_colours = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF';
  $custom_colours = 'e14d43,d83131,ed1c24,f99b1c,50b848,00a859,00aae7,282828';
  $init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;
  $init['theme_advanced_more_colors'] = true;
  return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

在wordpress 3.9更新后它停止工作,我已经尝试了很多修复它,但我无法做到,你能帮帮我吗？

我在tinymce中创建了一个自定义下拉列表,如下所示:

tinymce.init({
    toolbar: "alignment",

    setup: function(editor) {
        editor.addButton('alignment', {
            type: 'menubutton',
            text: 'Alignment',
            icon: false,
            menu: [
                { text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
                { text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
                { text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
                { text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
            ]
        });

    }

});

这创造了这个:

但是,我想要的是从下拉菜单中的主工具栏中移动对齐按钮.

如何将这些实际按钮从工具栏中放入下拉菜单？它是像上面的代码还是完全不同的方式？

因此,基本上将这些按钮放在上面的下拉列表中,也可以打开和关闭切换状态.

我在平均时间里得到了更多.然而,我仍然有一个问题.

情况是这样的:

我有一个带有多个textareas的div,它们正在加载JQuery AJAX调用.

初始初始化使用以下代码很好:

function InitializeTinyMCE() {

/// This can also be positioned outside a function in the document ready section
$.get("[@appbase]sereneadmin/pages/?SetAjaxCall=editor&page=[@editparam]", function (EditorHTML) {
    $("#SerenePageEditors").html(EditorHTML).find('.EditorField').tinymce({
        script_url: '[@appbase]script/tinymce/js/tinymce/tinymce.jquery.min.js',
        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 imagetools"
        ],

        content_css: '[@appbase]app/template/css/bootstrap.min.css, [@appbase]app/template/css/div.highlighting.css'    // includes both css files in header

    });
    tinyMCE.execCommand('mceRemoveEditor', true, '#WysyWig');
    tinyMCE.execCommand('mceAddEditor', false, '#WysyWig'); …

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

<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);
                    });
                }
            },
            ...
        });

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

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

怎么避免这个？

我正在尝试在填写某些表单字段时启用提交按钮.我发现了一段可以运行的javascript代码,但我遇到了textarea fiel的问题,这是由tinymce转换的...如何捕获它？

我的HTML:

<form id="form_id1">
<fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />

</fieldset>
<input type="submit" value="Submit" />
</form>

我的javascript:

$(document).ready(function()
{

    $('#form_id1 input:submit').attr("disabled", true);
    var textCounter = false;
    $('#form_id1 input:text, #form_id1 textarea').keyup(check_submit);

    function check_submit() {
        $('#form_id1 input:text, #form_id1 textarea').each(function()
          {
            if ($(this).val().length == 0) {
                textCounter = true;
                return false;
               }
            else {
                textCounter = false;
            }
         });

        $('#form_id1 input:submit').attr("disabled", …

我打开一个windowmanager并添加一个textfield和listbox:

editor.windowManager.open({
    title: 'Insert caption',
    body: [
        {type: 'textbox', name: 'text', label: 'text', 'multiline': 'true', 'minWidth': 450, 'minHeight': 100},
        {type: 'listbox', name: 'align', label: 'align', 'values': ['pull-left','pull-right']}
    ],

将显示列表框,但不显示值.在文档(http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.ListBox)中,它声明:"具有要添加到列表框的值的数组."

我究竟做错了什么？

我正在尝试像这样动态加载 TinyMCE（单击按钮时）：

$.getScript('path/to/mce4/tinymce.min.js', function(){
    var def = {
        selector: 'textarea',
        body_class: 'sp-mce-editor',
        content_css : "path/to/styles/mce.css",
        plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking table contextmenu directionality emoticons template paste textcolor fullscreen autoresize'],
        toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontsizeselect forecolor backcolor | preview fullscreen | template",
        toolbar_items_size: 'small',
        relative_urls : false,
        convert_urls : true,
        external_plugins: { "nanospell": …

我想允许所有 Alpine JS 组件（x-data、x-init等）作为TinyMCE 4 中所有HTML 标签的属性。

我尝试通过规则以extended_valid_attributes不同的方式添加它们，但一切都失败了。它们要么仍然从代码中删除，要么变得有效，但所有其他属性都会被删除。

以下是我已经尝试过的一些示例，其中大部分是我在此处找到的其他tinyMCE问题的答案（例如TinyMCE 4 - 将自定义样式/类/属性添加到任何HTML标记）并阅读tinyMCE文档（https:// www.tiny.cloud/docs-4x/configure/content-filtering/#extended_valid_elements，https://www.tiny.cloud/docs-4x/configure/content-filtering/#controlcharacters）：

$alpineAttributes = 'x-data|x-init|x-show|x-text|x-html|x-model|x-for|x-transition|x-effect|x-ignore|x-ref|x-cloak|x-teleport|x-if|x-id';

$settings['extended_valid_elements'] = '*['. $alpineAttributes .']';

-> 通过 : 选择所有元素*不起作用，高山属性仍然被剥夺

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p';

-> 在这里，至少div、a和p标签的属性不再被剥离，但是通常这三个标签中的每一个都允许的所有其他属性现在都被剥离，因为允许的属性列表不会被扩展，而是被覆盖我的属性。

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';

-> 不起作用，高山属性仍然被剥夺

$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';

-> 不起作用，高山属性仍然被剥夺

难道真的没有办法只扩展每个元素允许的属性列表，而不是用我的规则完全覆盖它吗extended_valid_elements？