New to Kendo UI for jQueryStart a free 30-day trial

Implement Custom InsertSymbol Tool for Editor

Environment

ProductProgress® Kendo UI® Editor for jQuery
Operating SystemAll
BrowserAll
Preferred LanguageJavaScript

Description

How can I add a custom InsertSymbol tool to the Editor?

Solution

  1. Set a template to the custom tool and initialize a DropDownList in it.
  2. In the change event handler of the DropDownList, call the exec API method of the Editor and execute the insertHtml command.
  3. Pass the selected symbol to the method in the DropDownList.
	<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
	</textarea>

	<script type="text/x-kendo-template" id="insertSymbol-template">
		<label for='templateTool' style='vertical-align:middle;'>Insert Symbol:</label>
		<select id='templateTool' style='width:90px'>
		<option value='1'>&copy;</option>
		<option value='2'>&sum;</option>
		<option value='3'>&euro;</option>
		<option value='4'>&trade;</option>
		<option value='5'>&larr;</option>
		<option value='6'>&uarr;</option>
		<option value='7'>&rarr;</option>
		<option value='8'>&darr;</option>
	  </select>
	</script>

	<script>
		$("#editor").kendoEditor({
		  encoded: false,
			tools: [
				{
					name: "customTemplate",
					template: $("#insertSymbol-template").html()
				}
			]
		});

		$("#templateTool").kendoDropDownList({
			change: function(e) {
				var inputValue = e.sender._inputValue();

				$('#editor').data('kendoEditor').exec("insertHtml", { html: inputValue });
			}
		});
	</script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support