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 프로세스입니다.
Reference
이 문제에 관하여(tinymce 편집기를 확장합니다.LINE height 버튼 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ktkt/items/ac8174cf9f2d9e94034d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 프로세스입니다.
Reference
이 문제에 관하여(tinymce 편집기를 확장합니다.LINE height 버튼 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ktkt/items/ac8174cf9f2d9e94034d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)