|
@@ -27,7 +27,7 @@
|
|
|
<span class="select" title="字体">Arial</span>
|
|
|
<div class="options">
|
|
|
<ul>
|
|
|
- <li data-family="Arial" style="font-family: 'Arial'">
|
|
|
+ <li data-family="Arial" style="font-family: 'Arial'">
|
|
|
Arial
|
|
|
</li>
|
|
|
<li
|
|
@@ -48,7 +48,7 @@
|
|
|
<li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
|
|
|
<li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
|
|
|
<li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li> -->
|
|
|
-
|
|
|
+
|
|
|
<li data-family="Segoe UI" style="font-family: 'Segoe UI'">
|
|
|
Segoe UI
|
|
|
</li>
|
|
@@ -115,39 +115,135 @@
|
|
|
<div class="section-title">主题颜色</div>
|
|
|
<ul>
|
|
|
<!-- 第一行 -->
|
|
|
- <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
|
|
|
- <li data-color="#2B579A" title="深蓝色" style="background-color: #2B579A"></li>
|
|
|
- <li data-color="#4472C4" title="蓝色" style="background-color: #4472C4"></li>
|
|
|
- <li data-color="#70AD47" title="绿色" style="background-color: #70AD47"></li>
|
|
|
- <li data-color="#FFC000" title="黄色" style="background-color: #FFC000"></li>
|
|
|
- <li data-color="#ED7D31" title="橙色" style="background-color: #ED7D31"></li>
|
|
|
- <li data-color="#C00000" title="红色" style="background-color: #C00000"></li>
|
|
|
- <li data-color="#7030A0" title="紫色" style="background-color: #7030A0"></li>
|
|
|
- <li data-color="#FFFFFF" title="白色" style="background-color: #FFFFFF"></li>
|
|
|
+ <li
|
|
|
+ data-color="#000000"
|
|
|
+ title="黑色"
|
|
|
+ style="background-color: #000000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#2B579A"
|
|
|
+ title="深蓝色"
|
|
|
+ style="background-color: #2b579a"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#4472C4"
|
|
|
+ title="蓝色"
|
|
|
+ style="background-color: #4472c4"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#70AD47"
|
|
|
+ title="绿色"
|
|
|
+ style="background-color: #70ad47"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#FFC000"
|
|
|
+ title="黄色"
|
|
|
+ style="background-color: #ffc000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#ED7D31"
|
|
|
+ title="橙色"
|
|
|
+ style="background-color: #ed7d31"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#C00000"
|
|
|
+ title="红色"
|
|
|
+ style="background-color: #c00000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#7030A0"
|
|
|
+ title="紫色"
|
|
|
+ style="background-color: #7030a0"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#FFFFFF"
|
|
|
+ title="白色"
|
|
|
+ style="background-color: #ffffff"
|
|
|
+ ></li>
|
|
|
|
|
|
<!-- 灰度行 -->
|
|
|
- <li data-color="#7F7F7F" title="深灰色" style="background-color: #7F7F7F"></li>
|
|
|
- <li data-color="#A5A5A5" title="灰色" style="background-color: #A5A5A5"></li>
|
|
|
- <li data-color="#D0D0D0" title="浅灰色" style="background-color: #D0D0D0"></li>
|
|
|
+ <li
|
|
|
+ data-color="#7F7F7F"
|
|
|
+ title="深灰色"
|
|
|
+ style="background-color: #7f7f7f"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#A5A5A5"
|
|
|
+ title="灰色"
|
|
|
+ style="background-color: #a5a5a5"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#D0D0D0"
|
|
|
+ title="浅灰色"
|
|
|
+ style="background-color: #d0d0d0"
|
|
|
+ ></li>
|
|
|
|
|
|
<!-- 蓝色系列 -->
|
|
|
- <li data-color="#D6E3F3" title="浅蓝色-1" style="background-color: #D6E3F3"></li>
|
|
|
- <li data-color="#B4C7E7" title="浅蓝色-2" style="background-color: #B4C7E7"></li>
|
|
|
- <li data-color="#8EAADB" title="浅蓝色-3" style="background-color: #8EAADB"></li>
|
|
|
- <li data-color="#2E75B6" title="深蓝色-1" style="background-color: #2E75B6"></li>
|
|
|
- <li data-color="#1F4E79" title="深蓝色-2" style="background-color: #1F4E79"></li>
|
|
|
+ <li
|
|
|
+ data-color="#D6E3F3"
|
|
|
+ title="浅蓝色-1"
|
|
|
+ style="background-color: #d6e3f3"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#B4C7E7"
|
|
|
+ title="浅蓝色-2"
|
|
|
+ style="background-color: #b4c7e7"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#8EAADB"
|
|
|
+ title="浅蓝色-3"
|
|
|
+ style="background-color: #8eaadb"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#2E75B6"
|
|
|
+ title="深蓝色-1"
|
|
|
+ style="background-color: #2e75b6"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#1F4E79"
|
|
|
+ title="深蓝色-2"
|
|
|
+ style="background-color: #1f4e79"
|
|
|
+ ></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="color-section">
|
|
|
<div class="section-title">标准色</div>
|
|
|
<ul>
|
|
|
- <li data-color="#FF0000" title="红色" style="background-color: #FF0000"></li>
|
|
|
- <li data-color="#FF6600" title="橙色" style="background-color: #FF6600"></li>
|
|
|
- <li data-color="#FFFF00" title="黄色" style="background-color: #FFFF00"></li>
|
|
|
- <li data-color="#00FF00" title="绿色" style="background-color: #00FF00"></li>
|
|
|
- <li data-color="#00FFFF" title="青色" style="background-color: #00FFFF"></li>
|
|
|
- <li data-color="#0000FF" title="蓝色" style="background-color: #0000FF"></li>
|
|
|
- <li data-color="#FF00FF" title="紫色" style="background-color: #FF00FF"></li>
|
|
|
+ <li
|
|
|
+ data-color="#FF0000"
|
|
|
+ title="红色"
|
|
|
+ style="background-color: #ff0000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#FF6600"
|
|
|
+ title="橙色"
|
|
|
+ style="background-color: #ff6600"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#FFFF00"
|
|
|
+ title="黄色"
|
|
|
+ style="background-color: #ffff00"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#00FF00"
|
|
|
+ title="绿色"
|
|
|
+ style="background-color: #00ff00"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#00FFFF"
|
|
|
+ title="青色"
|
|
|
+ style="background-color: #00ffff"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#0000FF"
|
|
|
+ title="蓝色"
|
|
|
+ style="background-color: #0000ff"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#FF00FF"
|
|
|
+ title="紫色"
|
|
|
+ style="background-color: #ff00ff"
|
|
|
+ ></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -157,25 +253,87 @@
|
|
|
<div class="options">
|
|
|
<ul>
|
|
|
<!-- 第一行 -->
|
|
|
- <li data-color="transparent" title="无" style="background-color: transparent">✓</li>
|
|
|
- <li data-color="#ffff00" title="黄色" style="background-color: #ffff00"></li>
|
|
|
- <li data-color="#00ff00" title="绿色" style="background-color: #00ff00"></li>
|
|
|
- <li data-color="#00ffff" title="青色" style="background-color: #00ffff"></li>
|
|
|
- <li data-color="#ff00ff" title="粉色" style="background-color: #ff00ff"></li>
|
|
|
- <li data-color="#0000ff" title="蓝色" style="background-color: #0000ff"></li>
|
|
|
-
|
|
|
+ <li
|
|
|
+ data-color="transparent"
|
|
|
+ title="无"
|
|
|
+ style="background-color: transparent"
|
|
|
+ >
|
|
|
+ ✓
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ data-color="#ffff00"
|
|
|
+ title="黄色"
|
|
|
+ style="background-color: #ffff00"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#00ff00"
|
|
|
+ title="绿色"
|
|
|
+ style="background-color: #00ff00"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#00ffff"
|
|
|
+ title="青色"
|
|
|
+ style="background-color: #00ffff"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#ff00ff"
|
|
|
+ title="粉色"
|
|
|
+ style="background-color: #ff00ff"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#0000ff"
|
|
|
+ title="蓝色"
|
|
|
+ style="background-color: #0000ff"
|
|
|
+ ></li>
|
|
|
+
|
|
|
<!-- 第二行 -->
|
|
|
- <li data-color="#800000" title="深红色" style="background-color: #800000"></li>
|
|
|
- <li data-color="#ff0000" title="红色" style="background-color: #ff0000"></li>
|
|
|
- <li data-color="#808000" title="橄榄色" style="background-color: #808000"></li>
|
|
|
- <li data-color="#008000" title="深绿色" style="background-color: #008000"></li>
|
|
|
- <li data-color="#008080" title="青灰色" style="background-color: #008080"></li>
|
|
|
- <li data-color="#000080" title="深蓝色" style="background-color: #000080"></li>
|
|
|
-
|
|
|
+ <li
|
|
|
+ data-color="#800000"
|
|
|
+ title="深红色"
|
|
|
+ style="background-color: #800000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#ff0000"
|
|
|
+ title="红色"
|
|
|
+ style="background-color: #ff0000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#808000"
|
|
|
+ title="橄榄色"
|
|
|
+ style="background-color: #808000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#008000"
|
|
|
+ title="深绿色"
|
|
|
+ style="background-color: #008000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#008080"
|
|
|
+ title="青灰色"
|
|
|
+ style="background-color: #008080"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#000080"
|
|
|
+ title="深蓝色"
|
|
|
+ style="background-color: #000080"
|
|
|
+ ></li>
|
|
|
+
|
|
|
<!-- 第三行 -->
|
|
|
- <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
|
|
|
- <li data-color="#808080" title="深灰色" style="background-color: #808080"></li>
|
|
|
- <li data-color="#c0c0c0" title="灰色" style="background-color: #c0c0c0"></li>
|
|
|
+ <li
|
|
|
+ data-color="#000000"
|
|
|
+ title="黑色"
|
|
|
+ style="background-color: #000000"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#808080"
|
|
|
+ title="深灰色"
|
|
|
+ style="background-color: #808080"
|
|
|
+ ></li>
|
|
|
+ <li
|
|
|
+ data-color="#c0c0c0"
|
|
|
+ title="灰色"
|
|
|
+ style="background-color: #c0c0c0"
|
|
|
+ ></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -505,7 +663,7 @@ export default {
|
|
|
name: "CanvasEditor", // 确保设置了组件名称
|
|
|
data() {
|
|
|
return {
|
|
|
- editorRef: null,
|
|
|
+ editorRef: null, // 将editor实例存储在data中
|
|
|
isApple:
|
|
|
typeof navigator !== "undefined" &&
|
|
|
/Mac OS X/.test(navigator.userAgent),
|
|
@@ -523,15 +681,15 @@ export default {
|
|
|
header: [], // 页眉配置
|
|
|
main: [], // 主要编辑内容
|
|
|
footer: [], // 页脚信息
|
|
|
- options:{
|
|
|
- width: 794, // A4 纸张宽度
|
|
|
- height: 1123, // A4 纸张高度
|
|
|
- defaultSize:Number(this.editorOptions.size) ,
|
|
|
+ options: {
|
|
|
+ width: 794, // A4 纸张宽度
|
|
|
+ height: 1123, // A4 纸张高度
|
|
|
+ defaultSize: Number(this.editorOptions.size),
|
|
|
defaultFont: this.editorOptions.font,
|
|
|
- // defaultSize: 14,//Number(this.editorOptions.size),
|
|
|
+ // defaultSize: 14,//Number(this.editorOptions.size),
|
|
|
defaultBold: this.editorOptions.bold,
|
|
|
- defaultAlign: this.editorOptions.align
|
|
|
- },// IEditorOption,
|
|
|
+ defaultAlign: this.editorOptions.align,
|
|
|
+ }, // IEditorOption,
|
|
|
// 批注 TODO
|
|
|
commentList: [],
|
|
|
};
|
|
@@ -552,12 +710,12 @@ export default {
|
|
|
editorOptions: {
|
|
|
type: Object,
|
|
|
default: () => ({
|
|
|
- defaultFont: 'Arial',
|
|
|
+ defaultFont: "Arial",
|
|
|
//defaultSize: 14,
|
|
|
defaultBold: false,
|
|
|
- defaultAlign: 'left'
|
|
|
- })
|
|
|
- }
|
|
|
+ defaultAlign: "left",
|
|
|
+ }),
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
// 监听父组件传过来的编辑模式,设置模式
|
|
@@ -597,6 +755,18 @@ export default {
|
|
|
}, delay);
|
|
|
};
|
|
|
},
|
|
|
+ applyBoldToAll() {
|
|
|
+ if (!this.editorRef) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.editorRef.command.executeSelectAll();
|
|
|
+ this.editorRef.command.executeBold();
|
|
|
+ this.editorRef.command.executeSelectAll();
|
|
|
+ this.editorRef.command.executeSelect(0, 0);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Apply bold failed:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log(this.editorOptions);
|
|
@@ -609,9 +779,9 @@ export default {
|
|
|
main: this.main,
|
|
|
footer: this.footer,
|
|
|
defaultFont: this.editorOptions.font,
|
|
|
- // defaultSize: 14,//Number(this.editorOptions.size),
|
|
|
+ // defaultSize: 14,//Number(this.editorOptions.size),
|
|
|
defaultBold: this.editorOptions.bold,
|
|
|
- defaultAlign: this.editorOptions.align
|
|
|
+ defaultAlign: this.editorOptions.align,
|
|
|
},
|
|
|
this.options
|
|
|
);
|
|
@@ -647,6 +817,16 @@ export default {
|
|
|
capture: true,
|
|
|
}
|
|
|
);
|
|
|
+ /* if (this.editorOptions.align == "") {
|
|
|
+ instance.command.executeRowFlex(RowFlex.CENTER);
|
|
|
+ }
|
|
|
+ if (this.editorOptions.bold == "不加粗") {
|
|
|
+ console.log(instance);
|
|
|
+ // 等待editor实例初始化完成
|
|
|
+ this.$nextTick(() => {
|
|
|
+ instance.command.executeBold(); // 切换加粗状态
|
|
|
+ });
|
|
|
+ } */
|
|
|
/*
|
|
|
工具栏方法
|
|
|
*/
|
|
@@ -780,13 +960,13 @@ export default {
|
|
|
instance.command.executeSubscript();
|
|
|
};
|
|
|
|
|
|
- const colorDom = document.querySelector('.menu-item__color');
|
|
|
- const colorOptionDom = colorDom.querySelector('.options');
|
|
|
- colorDom.onclick = function() {
|
|
|
- console.log('color');
|
|
|
- colorOptionDom.classList.toggle('visible');
|
|
|
+ const colorDom = document.querySelector(".menu-item__color");
|
|
|
+ const colorOptionDom = colorDom.querySelector(".options");
|
|
|
+ colorDom.onclick = function () {
|
|
|
+ console.log("color");
|
|
|
+ colorOptionDom.classList.toggle("visible");
|
|
|
};
|
|
|
- colorOptionDom.onclick = function(evt) {
|
|
|
+ colorOptionDom.onclick = function (evt) {
|
|
|
const li = evt.target;
|
|
|
const color = li.dataset.color;
|
|
|
if (color) {
|
|
@@ -795,18 +975,18 @@ export default {
|
|
|
};
|
|
|
|
|
|
// 高亮功能代码
|
|
|
- const highlightDom = document.querySelector('.menu-item__highlight');
|
|
|
- const highlightOptionDom = highlightDom.querySelector('.options');
|
|
|
- highlightDom.onclick = function() {
|
|
|
- console.log('highlight');
|
|
|
- highlightOptionDom.classList.toggle('visible');
|
|
|
+ const highlightDom = document.querySelector(".menu-item__highlight");
|
|
|
+ const highlightOptionDom = highlightDom.querySelector(".options");
|
|
|
+ highlightDom.onclick = function () {
|
|
|
+ console.log("highlight");
|
|
|
+ highlightOptionDom.classList.toggle("visible");
|
|
|
};
|
|
|
- highlightOptionDom.onclick = function(evt) {
|
|
|
+ highlightOptionDom.onclick = function (evt) {
|
|
|
const li = evt.target;
|
|
|
const color = li.dataset.color;
|
|
|
if (color) {
|
|
|
// 如果选择"无",则清除高亮
|
|
|
- if (color === 'transparent') {
|
|
|
+ if (color === "transparent") {
|
|
|
instance.command.executeHighlight(null);
|
|
|
} else {
|
|
|
instance.command.executeHighlight(color);
|
|
@@ -1930,13 +2110,13 @@ export default {
|
|
|
: strikeoutDom.classList.remove("active");
|
|
|
if (payload.color) {
|
|
|
colorDom.classList.add("active");
|
|
|
- const colorSpan = colorDom.querySelector('span');
|
|
|
+ const colorSpan = colorDom.querySelector("span");
|
|
|
if (colorSpan) {
|
|
|
colorSpan.style.backgroundColor = payload.color;
|
|
|
}
|
|
|
} else {
|
|
|
colorDom.classList.remove("active");
|
|
|
- const colorSpan = colorDom.querySelector('span');
|
|
|
+ const colorSpan = colorDom.querySelector("span");
|
|
|
if (colorSpan) {
|
|
|
colorSpan.style.backgroundColor = "#000000";
|
|
|
}
|
|
@@ -2228,7 +2408,7 @@ export default {
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
- /* // 设置初始样式
|
|
|
+ /* // 设置初始样式
|
|
|
this.$nextTick(() => {
|
|
|
// 设置字体
|
|
|
instance.command.executeFont(this.editorOptions.defaultFont)
|
|
@@ -2241,6 +2421,55 @@ export default {
|
|
|
// 设置对齐方式
|
|
|
instance.command.executeAlign(this.editorOptions.defaultAlign)
|
|
|
}) */
|
|
|
+
|
|
|
+ // 在编辑器实例化后立即应用默认样式
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.editorOptions.bold !== undefined) {
|
|
|
+ const shouldBeBold = this.editorOptions.bold !== "不加粗";
|
|
|
+ if (shouldBeBold) {
|
|
|
+ this.editorRef.command.executeBold();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 使用setTimeout确保编辑器完全准备就绪
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.editorOptions.bold === "加粗") {
|
|
|
+ try {
|
|
|
+ // 1. 先全选所有内容
|
|
|
+ instance.command.executeSelectAll();
|
|
|
+
|
|
|
+ // 2. 执行加粗命令
|
|
|
+ instance.command.executeBold();
|
|
|
+
|
|
|
+ // 3. 取消选择
|
|
|
+ instance.command.executeSelectAll();
|
|
|
+
|
|
|
+ // 4. 将光标移到开始位置
|
|
|
+ instance.command.executeSelect(0, 0);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Apply bold failed:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 处理居中对齐
|
|
|
+ if (this.editorOptions.align === "居中") {
|
|
|
+ try {
|
|
|
+ // 1. 先全选所有内容
|
|
|
+ instance.command.executeSelectAll();
|
|
|
+
|
|
|
+ // 2. 执行居中命令
|
|
|
+ instance.command.executeRowFlex(RowFlex.CENTER);;
|
|
|
+
|
|
|
+ // 3. 取消选择
|
|
|
+ instance.command.executeSelectAll();
|
|
|
+
|
|
|
+ // 4. 将光标移到开始位置
|
|
|
+ instance.command.executeSelect(0, 0);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Apply center alignment failed:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 500); // 延迟500ms执行
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -2271,7 +2500,7 @@ export default {
|
|
|
position: static;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- max-height: 600px;//calc(100% - 90px); /* 减去header和footer的高度 */
|
|
|
+ max-height: 600px; //calc(100% - 90px); /* 减去header和footer的高度 */
|
|
|
background-color: #f2f4f7;
|
|
|
overflow: auto; /* 仅让Main区域可滚动 */
|
|
|
flex-grow: 1; /* 让Main区域占据剩余空间 */
|