TinyMCE:图标不可见

时间:2014-05-28 06:06:33

标签: java jsp java-ee servlets tinymce

如果我直接在下载的TinyMCE包中使用html文件,图像图标就会出现。如果我使用它作为Web应用程序,它的所有功能都运行良好。但是图标不会出现。使用TinyMCE 4.0.28版本。< / p>

初始化脚本:

tinymce.init({
    relative_urls : false,
    remove_script_host : false,
    convert_urls : true,
    selector: "textarea#elm1",
    theme: "modern",
    width: 800,
    height: 500,
    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 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: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 }); 

更新: 包括其他图片。

enter image description here

技术:

我独自使用的Servlet API。没有其他机制。

HTML by FireBug for Italic Icon:

<button tabindex="-1" type="button" role="presentation">
 <i class="mce-ico mce-i-emoticons"></i>
</button>

web.xml:

<!-- To map all the static contents below code starts -->
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.png</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.gif</url-pattern>
</servlet-mapping>
<!-- To map all the static contents below code ends -->

<!-- To map all the non-static contents below code starts -->
<servlet>
    <servlet-name>ControllerServlet</servlet-name>
    <servlet-class>tut.core.Controller</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>ControllerServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
<!-- To map all the non-static contents below code ends -->

问题:

为什么只有图标不会出现在Italic中,因为它不适用于情感等?但其他图像正在正常运行。

2 个答案:

答案 0 :(得分:1)

TinyMCE正在使用icoMoon(http://icomoon.io)作为其图标 确保您的sikn \ fonts文件夹中有.woff / .svg / .ttf - 文件。
检查它是否正确提供。例如使用一些Browser-Dev-Tool:

enter image description here

如果没问题,请检查skin.css。它应该包含样式作为符号内容。

.mce-i-italic:before { 
    content:"\e02b"
}

也许该文件是使用worng编码或mime-type保存或读取的。

如果要修改图标,则需要更改Icons.less。 see here

答案 1 :(得分:0)

您是否尝试过检查浏览器的开发工具?特别是网络追踪。你有404或4 **状态请求吗?

如果您在此处发布,我们可以提供更多信息。

注意:您可能想要在跟踪中模糊/隐藏您的网址。