tinymce 편집기를 확장합니다.LINE height 버튼 추가

7253 단어 JavaScripttinyMCE
필기

컨디션


cakephp에서 만든 입력 화면

코드

tinymce.init({
            selector: "textarea",
            element_format: "xhtml",
            schema: "html5",
            plugins: ["link"],
            //force_br_newlines : true,
            force_p_newlines : true,
            //forced_root_block : '',
            toolbar1: "undo redo | bold italic | link | outdent bullist indent",
            toolbar2: "fontsizeselect | alignleft aligncenter alignright alignjustify | ad_lineheight | align-justify reset-justify",
            setup: function(editor) {
                editor.addButton('ad_lineheight', {
                    type: 'listbox',
                    text: 'line-height',
                    icon: false,
                    values: [
                        {text: '1', value: '1'},
                        {text: '1.5', value: '1.5'},
                        {text: '2', value: '2'},
                        {text: '2.5', value: '2.5'},
                        {text: '3', value: '3'}
                    ],
                    onselect: function(e) {
                        var selected    =   tinyMCE.activeEditor.selection.getContent();
                        var content     =   '<p style="line-height: '+this.value()+';">' + (selected != '' ? selected : '') + '</p>';
                        editor.insertContent(content);
                    }
                });
            }
        });
tinymce.init의 setup에서다음은 addButon에 대한 설명입니다.
첫 번째 파라미터는 키로 도구바에 기술해서 호출됩니다.
두 번째 매개변수에서 설정합니다.
type: "listbox"는 의 목록 형식입니다.
아무것도 지정하지 않으면 이 단추 형식입니다.
listbox의 형식은values에서 기술text와value를 배열하여 프로젝트에 로그인하는 것입니다.
onselect를 통해 변화를 진행합니다.
버튼 유형은 onclick입니다.
기본 getContent, ->p, span은values의value로 둘러싸인 값 스타일 설정, 편집기를 입력하십시오.이것은 insertContent 프로세스입니다.

좋은 웹페이지 즐겨찾기