2

私が行ったTinyMCE複合コンポーネントのステップを作成しました

1-プロジェクトのリソースディレクトリにtinymce提供されるフォルダーを追加しました。TinyMCE

2-次に、リソースディレクトリに別のフォルダーeditorsを作成し、2つのファイルを作成しました.1つはjsファイルtinymce_init.jsで、コードは

tinyMCE.init({
    mode : "specific_textareas",
    theme : "simple",
    debug : true,
    editor_selector : "tinymce"
});

および別のファイルtinymce.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<ui:component xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite"
    xmlns:pe="http://primefaces.org/ui/extensions">

    <composite:interface>
        <composite:attribute name="value" />
    </composite:interface>
    <composite:implementation>
        <h:outputScript library="tinymce" name="tinymce.js" target="head" />
        <h:outputScript library="editors" name="tinymce_init.js" target="head" />
        <h:inputTextarea rows="5" cols="80" />
    </composite:implementation>
</ui:component>

3-この複合コンポーネントにアクセスして、次のようなxhtmlファイルにアクセスします

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:editors="http://java.sun.com/jsf/composite/editors">
<h:head>
    <title>test</title>

</h:head>
<h:body>
    <editors:tinymce />
</h:body>
</html>

しかし、このファイルにアクセスすると、ツールバーのない入力ボックスが表示されました。ブラウザコンソールにエラーがなく、JS が正しく読み込まれています。

4

0 に答える 0