标签: tinymce-4

我试图移植(https://github.com/NYTimes/ice)到TinyMCE 4 的插件需要访问一个按键事件,然后由MCE编辑器处理并onEvent(...)在3.5.8中使用但需要被迁移到更像on('event')是tinymce 4的东西,但是没有明显的选择.

在微小的MCE 3.5.8中,我有

            ed.onEvent.add(function(ed, e) {
                return changeEditor.handleEvent(e);
            });

但我需要更像的东西

                ed.on('event', function(e) {
                    return changeEditor.handleEvent(e);
                });

然而,ed.on('event',...)似乎并不存在于tinymce 4中.

它需要能够在keydown,keyup和keypress的任何其他事件处理程序之前捕获delete键.

我正在从tinyMCE 3.x迁移到最新版本的tinyMCE 4.x. 我的问题是我有动态生成的tinyMCE实例所以在3.x我正在使用:

tinymce.EditorManager.execCommand('mceAddControl', true, "content_txt");

但在版本4.x中,这不起作用.我开始检查文档但我找不到版本4.x的标识符

问题:

我正在尝试使用TinyMCE 4.0.12.但是无法让它发挥作用,它只会使我的文本区域完全消失.

到目前为止我做了什么:

我甚至从他们的页面中完全复制了他们的示例代码,它甚至不能使用它.

我已将所有文件提取到"js/tinymce /"

有什么明显的东西我不见了吗？

小提琴: http ://jsfiddle.net/cg3e8/

JS代码:

<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste moxiemanager"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

HTML代码:

    <form method="post" action="somepage">
       <textarea name="content" style="width:100%"></textarea>
    </form>

我创建了一个插件来处理tinymce的图像上传。这一切都很好。我希望能够做的是，如果用户删除了该图像，则将其从服务器中删除，这样我就不会得到大量孤立的文件。

我已经能够使用tinymce init的设置部分来监听nodechange的出现

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: "autoresize",

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
    relative_urls: false,
        setup : function(ed) {
                    ed.on("NodeChange", function(e) {
        console.log('change event', e);
               });
}

});</script>

这给了我一个可以在控制台中看到的事件，但是我找不到从该事件中获取一些信息的方法，该事件告诉我已执行了img删除，因此可以从服务器中删除该图像。

我在这里为此创建了一个小提琴

如果您加载控制台并删除图像，您将明白我的意思。我缺少事件的某些属性或方法吗？

提前致谢

我在tinyMCE 4.0+中添加了一个自定义按钮/插件，该格式使用特定标签阻止了我的文本。例如：<h1>my clicked text</h1>。除了按钮不会激活外，其他所有功能都很好。当它确实激活时，当我单击已经格式化的文本时，它也不会激活（就像单击粗体按钮时的“粗体”按钮一样）。

由于有来自Stackoverflow的无数建议，并且由于完全缺乏适当的解决方案（在此处和tinyMCE文档中），我想在此处发布该解决方案。尽管您可以添加所需的任何标签，但出于本示例的目的，我将添加<h1>标签：

//Add the plugin to tinyMCE.init
tinymce.init({
    selector: \"div.editable\",
    inline: true,
    plugins: 'addh1s'
    toolbar: 'addh1s'
 //etc...
});

//Then create a folder entitled, 'addh1s' in the tinyMCE 'plugins' folder
//and add the plugin.min.js file that contains the following code.
//*Please note that the number '27' below is the number in order of the 
//'addh1s' button on my tinyMCE toolbar.  In your case it can be the
//number of where your button appears on …

如何在插件对话框打开时预先选择特定的列表框选项？

tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
    icon: true,
    image: url + '/img/mybutton.png',
    title: 'Select An Option',
    onclick: function() {
        editor.windowManager.open({
            title: 'My options',
            body: [
                {
                    type: 'listbox',
                    name: 'myoptions',
                    label: 'My Options',
                    'values': [
                        {text: 'Option 1', value: '1'},
                        {text: 'Option 2', value: '2'},
                        {text: 'Option 3', value: '3'}, /* preselect this option */
                        {text: 'Option 4', value: '4'},
                        {text: 'Option 5', value: '5'},
                    ]
                }
            ],
            onsubmit: function(v) {
                editor.insertContent(v.data.myoptions);
            }
        });
    }
});
});

我在初始化后向textarea动态添加tinymce时遇到了一些问题.

tinymce.init({
    selector: "textarea",
    theme: "modern",
    height: 100,
    plugins: [
         "advlist autolink image lists charmap print preview hr anchor pagebreak spellchecker",
         "link searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: …

我有一个内联tinyMCE编辑器,HTML文本可能包含超链接.如果用户单击超链接,我希望他们转到URL.如果他们点击其他地方,我想进入编辑模式.

HTML:

<div id="tinymce">
  <p>User should be able to <a id="mylink" href="http://google.com">navigate to a link</a> and also edit the text by clicking outside the link.</p>
</div>

剧本:

tinymce.init({
  selector: '#tinymce',
  inline: true
});

$('#mylink').on('click', function(e) {
  // This never fires
  console.log('Link clicked...');
});

jsfiddle:http://jsfiddle.net/rdog33/uLhdq447/

正如您所看到的,我有一个想法可以挂钩超链接的click事件,并使用window.location.href手动发送用户,但事件不会触发.如果我取消注释初始化,它会触发,所以很明显,tinymce会以某种方式干扰.

有任何想法吗？

我正在使用小型mce,并希望在插入图像对话框中有一个特殊页面的按钮

在源代码后面输入一个指向在新浏览器窗口中打开的不同页面的简单链接.我怎么能实现这一目标？

我似乎无法在互联网上找到关于此的任何信息,但TinyMCE 4中的图标如何工作？

我知道我可以按名称指定按钮的图标,并为我的自定义按钮指定自定义图标,但如果我想采用其中一个标准图标,在图像编辑应用程序中修改它然后将其另存为自定义图标,该怎么办？我从哪里获得该图标的源图像？我在哪里可以看到可用图标及其名称的完整列表？