Skip to content

Commit

Permalink
fix: #1229 remove contenteditable
Browse files Browse the repository at this point in the history
  • Loading branch information
@JiHong88
JiHong88 committed Apr 20, 2023
1 parent 90fe1ed commit 1710ec1
Show file tree
Hide file tree
Showing 6 changed files with 20 additions and 20 deletions.
8 changes: 4 additions & 4 deletions sample/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@
<div class="inline-margin"></div>
<textarea id="editor_classic" style="display:none;">
<p>SunEditor</p>
<div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat.jpg" data-align="right" alt="Tabby" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="transform: rotate(0deg);" data-index="0" data-file-name="cat.jpg" data-file-size="0" data-size="," data-percentage="auto,auto"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<p>Here is an example of math -&gt; <span class="katex" contenteditable="false" data-exp="\displaystyle\sum_{i=1}^{k+1}i" data-font-size="1.5em" style="font-size: 1.5em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle\sum_{i=1}^{k+1}i</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:3.1137820000000005em;vertical-align:-1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.8361130000000003em;"><span style="top:-1.872331em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.050005em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.300005em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">i</span></span></span></span> 123</p>
<div class="se-component se-image-container __se__float-center"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat.jpg" data-align="right" alt="Tabby" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="transform: rotate(0deg);" data-index="0" data-file-name="cat.jpg" data-file-size="0" data-size="," data-percentage="auto,auto"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<p>Here is an example of math -&gt; <span class="katex" data-exp="\displaystyle\sum_{i=1}^{k+1}i" data-font-size="1.5em" style="font-size: 1.5em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle\sum_{i=1}^{k+1}i</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:3.1137820000000005em;vertical-align:-1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.8361130000000003em;"><span style="top:-1.872331em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.050005em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.300005em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">i</span></span></span></span> 123</p>
<h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
<pre>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</pre>
<blockquote><p>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</p></blockquote>
Expand Down Expand Up @@ -168,7 +168,7 @@ <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
<div class="inline-margin"></div>
<textarea id="editor_inline3" style="display:none;">
<p><br></p>
<div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat2.jpg" data-align="right" alt="Cat" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,959" data-origin="640,959" style="width: 640px; max-width: 100%;"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<div class="se-component se-image-container __se__float-right"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat2.jpg" data-align="right" alt="Cat" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,959" data-origin="640,959" style="width: 640px; max-width: 100%;"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<p><br></p>
</textarea>
</div>
Expand All @@ -177,7 +177,7 @@ <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
<div class="inline-margin"></div>
<textarea id="editor_balloon" style="display:none;">
<p><br></p>
<div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat1.jpg" data-align="right" alt="Cat paw" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="width: 640px; max-width: 100%;"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<div class="se-component se-image-container __se__float-right"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat1.jpg" data-align="right" alt="Cat paw" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="width: 640px; max-width: 100%;"><figcaption style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
<h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
<p>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</p>
<pre>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</pre>
Expand Down
24 changes: 11 additions & 13 deletions src/lib/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5141,12 +5141,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
const renderHTML = util.createElement('DIV');
renderHTML.innerHTML = contents;

const figcaptions = util.getListChildren(renderHTML, function (current) {
return /FIGCAPTION/i.test(current.nodeName);
const editableEls = util.getListChildren(renderHTML, function (current) {
return current.hasAttribute('contenteditable');
});

for (let i = 0, len = figcaptions.length; i < len; i++) {
figcaptions[i].removeAttribute('contenteditable');
for (let i = 0, len = editableEls.length; i < len; i++) {
editableEls[i].removeAttribute('contenteditable');
}

if (options.fullPage && !onlyContents) {
Expand Down Expand Up @@ -6454,11 +6454,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
if (options.showPathLabel) context.element.navigation.textContent = core._variable.currentNodes.join(' > ');
},

_cancelCaptionEdit: function () {
this.setAttribute('contenteditable', false);
this.removeEventListener('blur', event._cancelCaptionEdit);
},

_buttonsEventHandler: function (e) {
let target = e.target;
if (core._bindControllersOff) e.stopPropagation();
Expand Down Expand Up @@ -6510,6 +6505,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re

onMouseDown_wysiwyg: function (e) {
if (core.isReadOnly || util.isNonEditable(context.element.wysiwyg)) return;
if (util._isExcludeSelectionElement(e.target)) {
console.log("excldfjdsoiafjkls")
e.preventDefault();
return;
}

_w.setTimeout(core._editorRange.bind(core));

// user event
Expand All @@ -6528,8 +6529,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
if (core._isBalloon) {
event._hideToolbar();
}

if (/FIGURE/i.test(e.target.nodeName)) e.preventDefault();
},

onClick_wysiwyg: function (e) {
Expand All @@ -6556,9 +6555,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
}

const figcaption = util.getParentElement(targetElement, 'FIGCAPTION');
if (figcaption && (util.isNonEditable(figcaption) || !figcaption.getAttribute("contenteditable"))) {
if (figcaption && util.isNonEditable(figcaption)) {
e.preventDefault();
figcaption.setAttribute('contenteditable', true);
figcaption.focus();

if (core._isInline && !core._inlineToolbarAttr.isShow) {
Expand Down
4 changes: 4 additions & 0 deletions src/lib/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1749,6 +1749,10 @@ const util = {
}.bind(this));
},

_isExcludeSelectionElement: function (element) {
return !/FIGCAPTION/i.test(element.nodeName) && (this.isComponent(element) || /FIGURE/i.test(element.nodeName));
},

/**
* @description Nodes that need to be added without modification when changing text nodes
* @param {Node} element Element to check
Expand Down
1 change: 0 additions & 1 deletion src/plugins/dialog/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -660,7 +660,6 @@ export default {
// caption
if (contextImage._captionChecked) {
contextImage._caption = this.plugins.component.create_caption.call(this);
contextImage._caption.setAttribute('contenteditable', false);
cover.appendChild(contextImage._caption);
}

Expand Down
1 change: 1 addition & 0 deletions src/plugins/dialog/math.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export default {
if (!element.getAttribute('data-exp') || !this.options.katex) return;
const dom = this._d.createRange().createContextualFragment(this.plugins.math._renderer.call(this, this.util.HTMLDecoder(element.getAttribute('data-exp'))));
element.innerHTML = dom.querySelector('.katex').innerHTML;
element.setAttribute('contenteditable', false);
}
};
},
Expand Down
2 changes: 0 additions & 2 deletions src/plugins/modules/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
set_container: function (cover, className) {
const container = this.util.createElement('DIV');
container.className = 'se-component ' + className;
container.setAttribute('contenteditable', false);
container.appendChild(cover);

return container;
Expand All @@ -55,7 +54,6 @@
*/
create_caption: function () {
const caption = this.util.createElement('FIGCAPTION');
caption.setAttribute('contenteditable', true);
caption.innerHTML = '<div>' + this.lang.dialogBox.caption + '</div>';
return caption;
}
Expand Down

0 comments on commit 1710ec1

Please sign in to comment.