Javascript 变量替换(CK 编辑器) [英] Javascript variable replacement(CK Editor)

问题描述

如何用动态值替换{$name}、{$city}、{$country}.动态值是 json 格式.我的要求:最初只有用户使用 CKEditor 创建布局设计.然后用户将上传 CSV 文件.CSV 中的所有数据都将替换 {$value}.这就是概念

<p>这是<strong>默认的</strong>CKEditor安装.{$name}源代码编辑由源代码编辑区</a>&nbsp;插件提供.<;/p><p>按照下面的{$city}步骤尝试{$country}:</p><ul><li>点击<strong>来源</strong>按钮在源编辑区域显示此文本 {$website} {$email} 的 HTML 源.</li><li>再次单击 <strong>源 </strong>按钮返回到所见即所得视图.</li></ul><form>名字:<br>

JSON 格式:

<预><代码>[{"name": "利乔","city": "孟加拉","国家": "印度",网站": ""，电子邮件": ""},{"name": "托姆斯","city": "钦奈","国家": "印度",网站": ""，电子邮件": ""},{"name": "玛丽亚","city": "孟买","国家": "印度",网站": ""，电子邮件": ""},{"name": "德拉维","city": "纽约","国家": "美国",网站": ""，电子邮件": ""},{"name": "萨钦","city": "伦敦","国家": "英国",网站": ""，电子邮件": ""},{"name": "约翰","city": "堪培拉","国家": "澳大利亚",网站": ""，电子邮件": ""}]

解决方案

正如 op 所说，他们正在从数据库中获取模板.我会假设它是一个字符串.您可以使用它来创建模板文字.

const template = "<p>这是<strong>默认</strong>CKEditor安装.${name}源编辑由源代码编辑区</a>&nbsp;插件提供.</p><p>按照以下${city}步骤尝试${country}:</p><;ul><li>点击<strong>源</strong>按钮，在源编辑区显示这个tex ${website} ${email}的HTML源.</li><li>;再次单击<strong>来源</strong>按钮返回到所见即所得视图.</li></ul><form>名字:<br>"常量替换 = [{"name": "利乔","city": "孟加拉","国家": "印度",网站": ""，电子邮件": ""},{"name": "托姆斯","city": "钦奈","国家": "印度",网站": ""，电子邮件": ""}]const inset = new Function('name', 'city', 'country', 'website', 'email', 'return `' + template + '`')const fillIn = 替换 .map(({ name, city, country, website, email }) => inset(name, city, country, website, email) )console.log(fillIn)

How to replace {$name}, {$city}, {$country} with dynamic value. Dynamic value are json format. My requirement: Initially only users create layout design using CKEditor. Then the user will upload CSV file. All data in CSV will replace {$value}. That is the concept

<p>This is the <strong>default </strong>CKEditor installation.{$name} Source editing is provided by the Source Editing Area</a>&nbsp;plugin.</p><p>Follow the{$city}steps below to try it{$country}out:</p><ul><li>Click the <strong>Source </strong>button to display the HTML source of this tex {$website} {$email}in the source editing area.</li><li>Click the <strong>Source </strong>button again to return to the WYSIWYG view.</li></ul><form>First name:<br>

JSON format:

[
        {
            "name": "Lijo",
            "city": "Banglaore",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Thoams",
            "city": "Chennai",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Maria",
            "city": "Mumbai",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Dravid",
            "city": "New York",
            "country": "US",
            "website": "",
            "email": ""
        },
        {
            "name": "Sachin",
            "city": "London",
            "country": "UK",
            "website": "",
            "email": ""
        },
        {
            "name": "John",
            "city": "Canbera",
            "country": "AUS",
            "website": "",
            "email": ""
        }
    ]

解决方案

As op said they are getting the template from a database. I would assume it is a string. You could use this to create a template literal.

const template = "<p>This is the <strong>default </strong>CKEditor installation.${name} Source editing is provided by the Source Editing Area</a>&nbsp;plugin.</p><p>Follow the${city}steps below to try it${country}out:</p><ul><li>Click the <strong>Source </strong>button to display the HTML source of this tex ${website} ${email}in the source editing area.</li><li>Click the <strong>Source </strong>button again to return to the WYSIWYG view.</li></ul><form>First name:<br>"


const replacements  = [{
    "name": "Lijo",
    "city": "Banglaore",
    "country": "India",
    "website": "",
    "email": ""
  },
  {
    "name": "Thoams",
    "city": "Chennai",
    "country": "India",
    "website": "",
    "email": ""
  }
]

const inset = new Function('name', 'city', 'country', 'website', 'email', 'return `' + template + '`')

const filledIn = replacements .map(({ name, city, country, website, email }) => inset(name, city, country, website, email) )

console.log(filledIn)

这篇关于Javascript 变量替换(CK 编辑器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！