TinyMCE: 사용자 지정/콘텐츠 CSS 예제 추가

15660 단어 tinymcephpwysiwygeditortutorial
원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/javascript/tinymce-add-customcontent-css-example

이전 게시물에는 TinyMCE에 대한 몇 가지 자습서가 있습니다. 이제 WYSIWYG 편집기 내부에 사용자 지정 스타일을 원하는 경우. 일반적으로 나만의 요소를 삽입하고 스타일을 추가하는 것과 같은 사용자 정의 요소가 있는 경우 사용자 정의 CSS 스타일을 적용합니다. 사용자 지정 대화 상자에 적용할 수 있습니다. 경우 여기 참조how to add a custom dialog box on TinyMCE.



샘플 CSS 코드:

파일 이름: custom_css_tinymce.css

.color-red {
    color: red;
}


맞춤 CSS를 추가하는 코드:

TinyMCE 구성에 아래 코드를 추가하십시오.

content_css: ["/assets/css/custom_css_tinymce.css"],


이 콘텐츠 CSS URL을 작업하기 위해 로컬에서 작업하는 경우 사용자 정의 로컬 도메인으로 프로젝트를 실행해야 합니다.

아래의 전체 소스 코드를 참조하십시오.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic on TinyMCE with Custom Dialog Box & Select Box</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="assets/plugins/tinymce/js/tinymce.min.js"></script>

    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea#tinymce',
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste codesample"
            ],
            toolbar:
                "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_dialog",
            content_css: ["/assets/css/custom_css_tinymce.css"],
            font_formats:"Segoe UI=Segoe UI;",
            fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
            height: 600,
            setup: function (editor) {
                editor.ui.registry.addButton('custom_dialog', {
                    text: 'Open Custom Dialog',
                    onAction: function() {
                        // Open a Dialog
                        editor.windowManager.open({
                            title: 'Custom dialog box',
                            body: {
                                type: 'panel',
                                items: [{
                                    type: 'input',
                                    name: 'custom_data',
                                    label: 'Custom data',
                                    flex: true
                                },{
                                    type: 'selectbox',
                                    name: 'selected_style',
                                    label: 'Select style',
                                    items: [
                                        {text: 'Primary', value: 'primay style'},
                                        {text: 'Success', value: 'success style'},
                                        {text: 'Error', value: 'error style'}
                                    ],
                                    flex: true
                                }]
                            },
                            onSubmit: function (api) {
                                // insert markup
                                editor.insertContent('Inserted custom data: <span class="color-red"><b>' + api.getData().custom_data + '</b></span> <br>and your selected style: <b>' + api.getData().selected_style) + '</b>';

                                // close the dialog
                                api.close();
                            },
                            buttons: [
                                {
                                    text: 'Close',
                                    type: 'cancel',
                                    onclick: 'close'
                                },
                                {
                                    text: 'Insert',
                                    type: 'submit',
                                    primary: true,
                                    enabled: false
                                }
                            ]
                        });
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <form method="post">
            <div class="form-group">
                <label>Title</label>
                <input type="text" name="title" class="form-control">
            </div>
            <div class="form-group mt-4">
                <label>Content</label>
                <textarea id="tinymce"></textarea>
            </div>

            <button class="btn btn-primary mt-4">Submit</button>
        </form>
    </div>

</body>
</html>


이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/javascript/tinymce-add-customcontent-css-example를 방문하십시오.

행복한 코딩 :)
Jenkins 파이프라인 소개?
코드 출현 2021 1일차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage