使用標記/變量構建textarea

我正在尋找一種簡單的方法，最終用戶可以生成關於如何生成最終字符串的「僞代碼」。如果我舉了一個例子，我認爲這會更容易。使用標記/變量構建textarea

我有以下變量：

Round
Game
Wins
Losses
Player
Opponent
Rating

在我的應用程序的後端，我手動完成這一切。

echo Player + " is currently playing " + Opponent + ". Round: " + Round + ", Game: " + Game; 
if (Wins > Losses) { 
    echo " (Up a Game)"; 
} else if (Wins < Losses) { 
    echo " (Down a game)"; 
}

我最終想做的事情就是控制最終用戶如何顯示這個字符串。我希望他們在需要的地方添加變量，以及添加if/else語句。

我看了一下selectize和select2，他們似乎在我正在尋找的正確軌道上，但並沒有真正包含我需要的任何if/else功能。我曾經使用過的東西是Blockly，它包含if/else邏輯，但這對最終用戶來說可能有點複雜。有沒有人有任何其他建議的JavaScript/jQuery插件/腳本，我可以用它來完成此？

來源

2015-05-20 FrankerZ

你可以通過一個PHP文件，搜索與你想要的值替換關鍵字就行了。要使用此設置ajax調用動態獲取它！ – user3633383

那你究竟在找什麼？你正在尋找一個現有的插件？你需要一種編譯器嗎？ – rst

Blockly是一個可能是我正在尋找的東西的例子。不要太擔心編譯/獲取字符串的後勤工作，對於最終用戶生成這些字符串更好。如果有一個現有的插件或者我可以很容易地擴展功能的插件，那也是有幫助的。任何鏈接到網站/插件/應用程序，都是有用的。 – FrankerZ

假設您使用php來查找字符串中的關鍵詞並將其替換爲您實際需要的內容！

$s="Player is currently playing Opponent [ROUND], Game: Game"; 
$s = str_replace("[ROUND]", "Round: $Round", $s);

例如查找[ROUND]並將其替換爲您所需的內容。

然後在沒有重新加載頁面的情況下，使用ajax調用php文件爲您完成工作！

來源

2015-05-20 04:00:39 user3633383

我很欣賞這個嘗試，但我並不是在尋找最終的解決方案來取代這些變量。我正在尋找一個很好的界面，他們可以將變量「插入」並播放到文本框（或textarea）中，並將這些信息傳遞給服務器。 – FrankerZ

@FrankerZ您需要將渲染日誌傳遞給服務器或玩家輸入的僞代碼？ –

我根本找不到代碼。我正在尋找一種解決方案來生成一些類型的代碼，然後我將傳遞給服務器端來生成輸出所需的字符串（替換變量，解析if/else語句等）。例如：[Markup.js]（https://github.com/adammark/Markup.js/）是一個很好的工具，我可以用它來模板化一些東西（我甚至可以構建解析器服務器端），它具有客戶端通過GUI以簡單的方式製作模板。該GUI是我正在尋找的。 – FrankerZ

您仍然可以使用selectize並添加一些漂亮的css功能。例如。您可以使用數據值選擇器

[data-value="if"] { 
    background-color: red; 
}

來區分其他標記是否爲/ else標記。接下來，你可以在以後使用相鄰兄弟CSS選擇器（http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors）尋找下一個標籤if語句來紀念這個藏漢

[data-value="if"] + div { 
    background-color: anything; 
}

而且還可以區分使用相同的技術變量。稍後，解析器可以使用正則表達式或任何適合您的最佳解析if/else語句。然後

有人能寫出像

[Player][" is currently playing "][Opponent][". Round: "][Round] 
[", Game: "][Game][if][Wins>Losses][" (Up a Game)"][else][" (Down a game)"]

其中括號註明「標籤」。你的解析器然後應該用引號「」作爲字符串。

來源

2015-05-27 09:25:41 rst

如果您正在尋找自定義客戶端文本解析，也許這會幫助你。

var keywords = { 
 
    
 
    Round: 'red', 
 
    Game: 'green', 
 
    if: 'blue', 
 
    else: 'blue', 
 
    then: 'blue' 
 

 
} 
 

 
$('#input').keyup(function(){ 
 

 
    var parsedInputTags = $(this).val().split(/[\[\]]/); 
 
    
 
    $('#output').html(''); 
 
    
 
    parsedInputTags.forEach(function(text){ 
 
    
 
    if(text in keywords){ 
 
    
 
     $('#output').append('<span data-tag="' + text + '" class="tag-' + keywords[text] + '">' + text + '</span>'); 
 
    
 
    } 
 
    else $('#output').append('<span>' + text + '</span>'); 
 
    
 
    }); 
 

 
});

.tag-red { 
 
    color: red; 
 
} 
 

 
.tag-green { 
 
    color: green; 
 
} 
 

 
[data-tag="if"] + span { 
 
    color: cyan; 
 
} 
 

 
.tag-blue { 
 
    color: blue; 
 
} 
 

 
textarea { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#output { display: inline-block; vertical-align: top; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="input" placeholder="Type this: This is game [Game] in round [Round]. [if] something > smth [then] type this [else] type that"></textarea> 
 
<div id="output"></div>

來源

2015-06-01 17:34:36

使用標記/變量構建textarea

回答

相關問題