如何将弹窗HTML内容与JS脚本分离并添加字体样式设置功能？

当然可以啦！把弹窗的HTML内容从JS脚本里分离出来不仅能让代码更清晰、维护起来更方便，还能轻松添加你需要的字体族、颜色这些设置选项。下面给你一步步讲怎么实现：

1. 先在HTML里准备弹窗模板 #

我们可以用<template>标签来存弹窗的完整HTML结构，这个标签本身不会在页面加载时显示，专门用来做模板复用，完美适配你的需求：

<template id="popup-template">
  <div class="white_content">
    <!-- 这里可以放心加大量HTML代码，比如各种文本设置选项 -->
    <div class="popup-settings">
      <h3>文本样式设置</h3>
      <div class="setting-item">
        <label for="font-select">选择字体:</label>
        <select id="font-select">
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Courier New">Courier New</option>
          <option value="Microsoft YaHei">微软雅黑</option>
          <!-- 想加多少字体都直接在这里加就行 -->
        </select>
      </div>
      <div class="setting-item">
        <label for="color-picker">字体颜色:</label>
        <input type="color" id="color-picker" value="#000000">
      </div>
      <!-- 还能加字号、对齐方式这些设置，直接写HTML就行 -->
      <button class="save-settings">保存设置</button>
      <a href="javascript:void(0)" class="close-popup">Close</a>
    </div>
  </div>
</template>

2. 修改JS代码，用模板克隆弹窗 #

原来的JS是直接拼接HTML字符串，现在改成从模板克隆元素，逻辑更清晰，也避免了字符串拼接的麻烦：

// 先拿到HTML里的模板元素
const popupTemplate = document.getElementById('popup-template');

// 写一个函数来处理每个文本元素和对应的弹窗
function renderTextElement(layer) {
  // 创建可编辑的文本容器
  const textLink = document.createElement('a');
  textLink.id = layer.name;
  textLink.onclick = () => openPopUp(`light${layer.name}`);

  const txtContainer = document.createElement('div');
  txtContainer.className = 'txtContainer';
  txtContainer.contentEditable = true;
  txtContainer.style.left = `${layer.x}px`;
  txtContainer.style.top = `${layer.y}px`;
  txtContainer.textContent = layer.text;
  // 先把JSON里的初始字体加上
  txtContainer.style.fontFamily = layer.font;

  textLink.appendChild(txtContainer);
  document.querySelector('.container').appendChild(textLink);

  // 克隆模板里的弹窗结构
  const popupClone = popupTemplate.content.cloneNode(true);
  const popupElement = popupClone.querySelector('.white_content');
  popupElement.id = `light${layer.name}`;
  popupElement.style.top = `${layer.y}px`;

  // 设置弹窗的左侧位置，和你原来的逻辑一致
  const textElement = document.getElementById(layer.name);
  popupElement.style.left = `${layer.x + textElement.offsetWidth}px`;

  // 绑定弹窗关闭按钮的事件
  const closeBtn = popupElement.querySelector('.close-popup');
  closeBtn.onclick = () => closePopUp(`light${layer.name}`);

  // 绑定字体设置的保存事件
  const saveBtn = popupElement.querySelector('.save-settings');
  const fontSelect = popupElement.querySelector('#font-select');
  const colorPicker = popupElement.querySelector('#color-picker');

  // 初始化设置项的默认值
  fontSelect.value = layer.font;
  colorPicker.value = '#000000'; // 如果JSON里有color字段，直接替换成layer.color就行

  saveBtn.onclick = () => {
    // 更新文本容器的样式
    txtContainer.style.fontFamily = fontSelect.value;
    txtContainer.style.color = colorPicker.value;
    // 如果需要把设置存回JSON，这里可以更新layer对象的属性
    layer.font = fontSelect.value;
    layer.color = colorPicker.value;
    // 保存后关闭弹窗
    closePopUp(`light${layer.name}`);
  };

  // 把弹窗添加到页面里
  document.querySelector('.container').appendChild(popupElement);
}

// 调用示例，传入你的JSON数据
const layerData = { "font" : "Arial", "x" : 201, "y" : 461, "type" : "text", "text" : "Good Food", "name" : "edit_good_1" };
renderTextElement(layerData);

3. 额外小贴士 #

• 用<template>的好处就是它不会被渲染到页面上，只是作为模板，需要的时候克隆就行，非常适合这种需要重复创建的弹窗。
• 现在要修改弹窗内容（比如加个字号滑块、文本对齐选项），直接改HTML模板就行，不用再去JS里找拼接的字符串，维护起来超省心。
• 如果有多个文本元素，只需要循环调用renderTextElement函数，把每个元素的JSON数据传进去就好。

内容的提问来源于stack exchange，提问作者user8444404