Baiduはチュートリアルリッチテキストエディタを詳細にspringboot統合ueditor

著者はレイヤエディタを使用することをお勧めし、より美しく、文書アドレス
https://www.layui.com/doc/modules/layedit.html
最初のステップ：公式ダウンロードueditor
https://ueditor.baidu.com/website/download .htmlを（ueditorダウンロード）
GitHubのプロジェクトアドレスhttps://github.com/yssyhw/springboot、ダウンロードした後、実行訪問にhttp：// localhost：8080 /管理 /テスト（あなたは私に直接、プロジェクトのソースに、見にわざわざ防ぐために単純なケースであるコードは、次のようにロードキング）その変更道路王の点に注意してください。直接ダウンロードと同じではありませんので、私は、自分のプロジェクトのチュートリアルを行うために使用するものである
あなたが私のQQを追加するために出て来ない場合：1023732997

デモダウンロードリンクダウンロードして実行、訪問はlocalhost：9090へ

ここに画像を挿入説明
静的下のプロジェクトディレクトリに解凍、

第二段階：フロントページへの導入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/admin/ueditor/ueditor.config.js"></script>
    <script src="/admin/ueditor/ueditor.all.min.js"></script>
    <script src="/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
</head>
<body>
<textarea name="content" id="content" style="min-height: 500px"></textarea>
</body>
<script type="text/javascript">
    UE.getEditor('content');

</script>
</html>

自分のプロジェクトの絵と効果フォトギャラリー
ここに画像を挿入説明
スリーステップ：編集ソースコードの公式はJSPであるため、その画像のアップロードや、一部の機能の導入後に使用できません。注各ステップは、以下に焦点を当てていること
1.変更ueditor.config自分自身を記述するのが面倒人々を防ぐための.js、誰もがコードについて投稿用
のvar SERVER_URLのwindow.location.protocol + = "//" + window.location.hostname + "：" + window.location.port
SERVER_URL + "/ configの"：SERVERURLは
ここに画像を挿入説明
修正

2.（他のコントローラには書いていない、単一のビルドしてください）ServerControllerを追加

コード：

@Controller
public class ServerController {
    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
        try {
            response.setCharacterEncoding("UTF-8");
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println(exec);
            PrintWriter writer = response.getWriter();
            writer.write(new ActionEnter(request, rootPath).exec());
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }`

注意：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190705113706361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0,size_16,color_FFFFFF,t_70)
ActionEnter类是ueditor里一个jar包的，添加以下依赖

 <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

ここに画像を挿入説明
問題が引き続き依存している場合、余分な2つのより多くのショットを追加してください
ポイントは、コンソールがバックエンドの設定エラーが報告されていない、単一のマップのアップロード、ファイルのアップロードをクリックすることができ、マルチマップはまた、ファイルをアップロードすることを選択できることがわかります
ここに画像を挿入説明
が、それでも画像をクリックした後、エディタで正しく表示されない
最後のステップ：修正config.jsonの

7または8箇所に関するすべての画像のアクセスパスの接頭辞「/ ueditor / JSP」、で塗りつぶしを、またはマルチマップのアップロード、ファイルのアップロードは、それらの使用が許可されていない
最終的に効果
ここに画像を挿入説明

懸念エネルギーの未来にあなたが助けオープン淘宝網の検索の店に持っている場合は、ダブルクリック

クラウドクラウド

公開された63元の記事・ウォン称賛25 ・ビュー20000 +

プライベートの手紙の懸念

Baiduはチュートリアルリッチテキストエディタを詳細にspringboot統合ueditor

おすすめ