2017-11-23 17 views
0

これは奇妙な問題です。オンラインで数多くの調査を行った結果、私はそれを解決するものは何も見たことがないと思います。thymeleaf形式のテキストエリアにtinymceインターフェイスを表示するにはどうすればいいですか?

私はタイメレフの形をしています。私はまた、ページにtinyMCEプラグインがインストールされています。 tinymceプラグインをフォームの入力として表示する方法を知っている人はいますか?あなたが見ることができるように

<head> 
 
     <title>Nobody Can Solve This.</title> 
 
     <script> 
 
    tinymce.init({ 
 
    selector: "textarea" 
 
    }); 
 
    </script> 
 

 
</head> 
 
\t 
 
\t <body> 
 

 
\t \t <center><h2>Submitting a post(via Tiny MCE)</h2></center> 
 

 
\t \t <form method="post"> 
 
    <textarea id="mytextarea">Hello, World!</textarea> 
 
    </form> 
 
\t 
 
\t \t \t 
 
\t \t <h1>Form</h1> 
 
    <form action="#" th:action="@{/blogposts/addBlogPost}" th:object="${blogPost}" method="post"> 
 
     <p>Title: <input type="text" th:field="*{title}" /></p> 
 
     <p>Author: <input type="text" th:field="*{authors}" /></p> 
 
     <p>Content: <input type="textarea" th:field="*{content}" /></p> 
 
     <p><textarea name="ephox">Blog Post</textarea></p> 
 
     <p>Subject: <input type="text" th:field="*{Subject}" /></p> 
 
     <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p> 
 
    </form> 
 
\t

は、私は、ページ上でもフォーム内に現れるTinyMCEのプラグインを取得することができますが、私は実際にコンテンツを提出するために使用することができません。

アイデア?私はすべてを試しました。

答えて

0

を持っている必要があります私はここのように失礼を外れしようとしていないんだけど、スタックオーバーフローがあったことを忘れてはいけません非常に Thymeleafに関する質問には失望しています。人々は通常、私の質問に全く触れていない基本的な文書に私を導き、私がそれを読まなかったと仮定します。私はちょうどこの質問について話しているのではなく、回答が役に立たない、あるいは敵対的であったために、数ヶ月後に投稿した質問のほんの一部です。私は過去のものよりも私の問題を説明するための、より有益な、または説明的な方法を考えることができません。この質問とは異なり、私は通常、私が試したすべてのものと私が使ったリソースを説明し、まったく同じ扱いをするだけです。ティメレフは超新星ですか?なぜ誰もそれについて知りませんか?

とにかく、この問題を解決する方法は、あなたはまだ、まだフォーム内の入力テキストエリアを以下のコンテンツ入力ということです:

<p>Content: <input type="hidden" th:field="*{content}" /></p> 
 
<textarea name="object" id="object" th:field="*{content}">

いったん適切統合、TinyMCEの意志.htmlドキュメント内のテキストエリアを特定し、プラグインを適用します。しかし、フォーム内で 'input type = "textarea"'を使用するだけではそれはできません。ですから、基本的には入力コンポーネントの下に別のテキスト領域を作成し、IDとフィールドをオブジェクト内の適切なオブジェクト/要素(この場合はブログ記事のコンテンツ)に帰属させることです。次に、他のテキスト入力を非表示にするか、オブジェクト内の同じ要素に対して2つのテキストボックスを残します。

1

hereから素晴らしい例を入手してください。 APIキーを外部スクリプトに貼り付けることができないため、私の例にエラーがあります。

jsの外部ライブラリは形式

https://cloud.tinymce.com/dev/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc

tinymce.init({ 
 
    selector: 'textarea', 
 
    height: 500, 
 
    theme: 'modern', 
 
    plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed linkchecker contextmenu colorpicker textpattern help', 
 
    toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat', 
 
    image_advtab: true, 
 
    templates: [ 
 
    { title: 'Test template 1', content: 'Test 1' }, 
 
    { title: 'Test template 2', content: 'Test 2' } 
 
    ], 
 
    content_css: [ 
 
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
 
    '//www.tinymce.com/css/codepen.min.css' 
 
    ] 
 
});
body { 
 
    padding:5px 
 
}
<script src="https://cloud.tinymce.com/dev/tinymce.min.js"></script> 
 

 
<textarea></textarea>

+0

これは、タイメレフではありません。 なぜ私はこの愚かなウェブサイトに書き込むものを誰も読まないのです。 これはHTMLのJavascriptです。 **これはTHYMELEAF **で動作しません**! – DaveCat

関連する問題