title: CKEditor4: Make Text Differ from its HTML
body: <p>I add <code>StrInsert</code> plugin to my CKEditor. It basically adds a button, which in my editor, is labeled <code>CRM Field</code>. <img src="https://i.stack.imgur.com/IUq45.png" alt=""></p>
  
  <p>What the button does is it will append a value to my editor. For example: when I click <code>$[FIRST_NAME]</code> from the dropdown, it will append the text <code>${__VCG__VAL__FIRST_NAME}</code>to my editor.</p>
  
  <p>Why did I name the dropdown <code>$[FIRST_NAME]</code> instead of<code>${__VCG__VAL__FIRST_NAME}</code>? Because I want the <code>HTML</code> to be <code>&lt;p&gt;${__VCG__VAL__FIRST_NAME}&lt;/p&gt;</code> while the <code>text</code> shown in the editor is <code>$[FIRST_NAME]</code><img src="https://i.stack.imgur.com/dkWUj.png" alt="(**Please see** [screenshot_2][2] **to better understand the problem**)"></p>
  
  <p>As seen in <code>screenshot_2</code>, the <code>HTML</code>shown  underneath is exactly what I want, but instead of showing the text <code>${__VCG__VAL__FIRST_NAME}</code> I want the editor to show the text <code>$[FIRST_NAME]</code></p>
  
  <p>My question is, how can I make the <code>HTML</code> differ from the <code>text</code> shown in the editor for some reserved keywords?</p>