Skip to content

Commit

Permalink
add: #914 options.className
Browse files Browse the repository at this point in the history
  • Loading branch information
@JiHong88
JiHong88 committed Feb 19, 2022
1 parent 00d34e9 commit 7ad6145
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 8 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,8 +531,9 @@ minHeight : The min-height size of the editor.
maxHeight : The max-height size of the editor.
Used when 'height' value is 'auto'. default: null {Number|String}

// Editing area default style------------------------------------------------------------------------------------
defaultStyle : You can define the style of the edit area. (className: 'sun-editor-editable')
// Editing area -------------------------------------------------------------------------------------------------
className : Add a "class" to the editing area[.sun-editor-editable]. default: '' {String}
defaultStyle : You can define the style of the editing area[.sun-editor-editable].
It affects the entire editing area. default: '' {String}
('z-index', 'position' and 'width' properties apply to the top div.)
ex) 'font-family: cursive; font-size: 10px;'
Expand Down
6 changes: 5 additions & 1 deletion sample/html/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,10 @@ <h4 style="color: #b94a48;">--Size</h4>
<input type="text" id="maxHeight_value" placeholder="Number, ..style">

<br>
<h4 style="color: #b94a48;">--Editing area default style</h4>
<h4 style="color: #b94a48;">--Editing area</h4>
<label><input type="checkbox" id="className">&nbsp;&nbsp;className</label>
<input type="text" id="className_value" placeholder="String" style="width:320px">
<br><br>
<label><input type="checkbox" id="defaultStyle">&nbsp;&nbsp;defaultStyle</label>
<input type="text" id="defaultStyle_value" placeholder="String (font-family: cursive; font-size: 10px;)" style="width:320px">

Expand Down Expand Up @@ -637,6 +640,7 @@ <h2 class="sub-title">Applied options</h2>
height: document.getElementById('height').checked ? document.getElementById('height_value').value : undefined,
minHeight: document.getElementById('minHeight').checked ? document.getElementById('minHeight_value').value : undefined,
maxHeight: document.getElementById('maxHeight').checked ? document.getElementById('maxHeight_value').value : undefined,
className: document.getElementById('className').checked ? document.getElementById('className_value').value : undefined,
defaultStyle: document.getElementById('defaultStyle').checked ? document.getElementById('defaultStyle_value').value : undefined,
font: !document.getElementById('font').checked ? undefined : [
'Arial',
Expand Down
7 changes: 5 additions & 2 deletions src/lib/constructor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,15 +306,17 @@ export default {
}
wysiwygDiv.className += ' ' + options._editableClass;
wysiwygDiv.style.cssText = options._editorStyles.frame + options._editorStyles.editor;
wysiwygDiv.className += options.className;
} else {
wysiwygDiv.allowFullscreen = true;
wysiwygDiv.frameBorder = 0;
wysiwygDiv.style.cssText = options._editorStyles.frame;
wysiwygDiv.className += options.className;
}

// textarea for code view
const textarea = document.createElement('TEXTAREA');
textarea.className = 'se-wrapper-inner se-wrapper-code';
textarea.className = 'se-wrapper-inner se-wrapper-code' + options.className;
textarea.style.cssText = options._editorStyles.frame;
textarea.style.display = 'none';
if (options.height === 'auto') textarea.style.overflow = 'hidden';
Expand Down Expand Up @@ -471,7 +473,8 @@ export default {
options.height = options.height ? (util.isNumber(options.height) ? options.height + 'px' : options.height) : (element.clientHeight ? element.clientHeight + 'px' : 'auto');
options.minHeight = (util.isNumber(options.minHeight) ? options.minHeight + 'px' : options.minHeight) || '';
options.maxHeight = (util.isNumber(options.maxHeight) ? options.maxHeight + 'px' : options.maxHeight) || '';
/** Editing area default style */
/** Editing area */
options.className = (typeof options.className === 'string' && options.className.length > 0) ? ' ' + options.className : '';
options.defaultStyle = typeof options.defaultStyle === 'string' ? options.defaultStyle : '';
/** Defining menu items */
options.font = !options.font ? null : options.font;
Expand Down
13 changes: 12 additions & 1 deletion src/options.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,19 @@ export interface SunEditorOptions {
*/
maxHeight?: string;
/**
* Editing area default style
* Editing area
* ===================
*/
/**
* Add a "class" to the editing area[.sun-editor-editable]
*/
className?: string;
/**
* You can define the style of the editing area[.sun-editor-editable].
* It affects the entire editing area.
* ('z-index', 'position' and 'width' properties apply to the top div.)
* @example 'font-family: cursive; font-size: 10px;'
*/
defaultStyle?: string;
/**
* Defining menu items
Expand Down
43 changes: 41 additions & 2 deletions test/dev/suneditor_build_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -913,6 +913,7 @@ const editor = suneditor.init({

let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
buttonList: [
['dir_ltr', 'dir_rtl'],
['undo', 'redo'],
['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
['bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
Expand All @@ -922,6 +923,7 @@ let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
['-right', 'image', 'video', 'audio', 'link'],
// (min-width: 992)
['%1100', [
['dir_ltr', 'dir_rtl'],
['undo', 'redo'],
['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
['bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
Expand All @@ -930,6 +932,7 @@ let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
]],
['%870', [
['dir_ltr', 'dir_rtl'],
['undo', 'redo'],
['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
[':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
Expand All @@ -938,6 +941,7 @@ let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
]],
['%660', [
['dir_ltr', 'dir_rtl'],
['undo', 'redo'],
[':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
[':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
Expand All @@ -946,6 +950,7 @@ let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
]],
['%335', [
['dir_ltr', 'dir_rtl'],
['undo', 'redo'],
[':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
[':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor', 'removeFormat'],
Expand All @@ -961,9 +966,21 @@ let s2 = window.s2 = editor.create(document.getElementById('editor2'), {
'Vazir', 'Arial', 'Comic Sans MS', 'Courier New', 'Impact',
'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'
],
iframe: true,
fullPage: true,
linkNoPrefix: true,
formats: [
'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',{
tag: 'div', // Tag name
name: 'Custom div' || null, // default: tag name
command: 'replace' || 'range' || 'free', // default: "replace"
class: '__se__format__replace_xxx' || '__se__format__range_xxx' || '__se__format__free_xxx' || '__se__format__free__closure_xxx'
// Class names must always begin with "__se__format__(replace, range, free)_"
}
// "blockquote": range format, "pre": free format, "Other tags": replace format
],
// iframe: true,
// fullPage: true,
imageMultipleFile: true,
addTagsWhitelist: "fdl|lst|lstfdl|header"
});

s2.onResizeEditor = (height, prevHeight, core) => {
Expand Down Expand Up @@ -992,6 +1009,28 @@ s2.onResizeEditor = (height, prevHeight, core) => {
// }
// }

s2.core.plugins.fontSize.pickup = function (e) {
console.log("fdsafafdasa---")
if (!/^BUTTON$/i.test(e.target.tagName)) return false;

e.preventDefault();
e.stopPropagation();

const value = thisObj.editorGetFontSizeFromValue(e.target.getAttribute('data-value'));

if (value) {
const newNode = this.util.createElement('SPAN');
newNode.style.fontSize = value;
this.nodeChange(newNode, ['font-size'], null, null);
} else {
this.nodeChange(null, ['font-size'], ['span'], true);
}

this.submenuOff();
}.bind(s2.core)



const newOption = {
mode: 'balloon',
iframe: false,
Expand Down

0 comments on commit 7ad6145

Please sign in to comment.