HTML Editor Script for Blogger
HTML Editor Script
In this blog post, we’ll introduce you to an advanced yet easy-to-use HTML Editor Script for Blogger, which lets you edit, preview, and generate HTML code seamlessly within your blog. Whether you're a beginner or a pro, this script will enhance your content creation experience.
Are you tired of using basic editing tools for creating engaging posts on your Blogger/Blogspot.com website? Look no further! This HTML Editor Script will make the process easier and more professional, with real-time updates, previews, and powerful editing features.
What is the HTML Editor Script?
The HTML Editor Script for Blogger is an advanced content editing tool designed to simplify the process of editing and managing HTML code directly within your blog. With features like a real-time preview, live source code updates, and a TinyMCE-powered editor, this tool empowers you to take full control of your content creation journey.
Key Features
How to Install the HTML Editor Script in Blogger
Installing the HTML Editor Script on your Blogger website is straightforward. Follow these steps:
- Copy the Script Code: Grab the script code provided below. This includes the TinyMCE and AngularJS libraries along with the HTML editor code.
- Add the Script to Blogger: Open your Blogger dashboard, navigate to the theme section, and click on Edit HTML. Paste the script code into the desired section, such as before the closing `` tag.
- Save and Test: Save your changes, open a new post, and test the editor to ensure it works seamlessly.
HTML Editor Script for Blogger
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
#source-code {
height: 300px;
overflow-y: auto;
background: #f7f7f7;
border: 1px solid #e5e5e5;
padding: 10px;
font-family: monospace;
}
#preview {
height: 300px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #e5e5e5;
padding: 10px;
}
----------------------------------------------
]]></b:skin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.10/dist/css/uikit.min.css" />
</head>
<body ng-controller="EditorController">
<div class="uk-container uk-margin-large-top">
<h1 class="uk-heading-divider uk-text-center">HTML Editor with TinyMCE</h1>
<div class="uk-grid-divider uk-grid-match uk-child-width-1-3@m" uk-grid>
<!-- Editor -->
<div>
<h3 class="uk-heading-line"><span>Editor</span></h3>
<form>
<textarea ui-tinymce="tinymceOptions" ng-model="editorContent"></textarea>
</form>
</div>
<!-- Preview -->
<div>
<h3 class="uk-heading-line"><span>Preview</span></h3>
<div id="preview" class="uk-card uk-card-default uk-card-body" ng-bind-html="editorContent | toTrusted"></div>
</div>
<!-- Source Code -->
<div>
<h3 class="uk-heading-line"><span>Source Code</span></h3>
<pre id="source-code" class="uk-card uk-card-default uk-card-body">{{ editorContent }}</pre>
</div>
</div>
<!-- Action Buttons -->
<div class="uk-margin-top uk-text-center">
<button class="uk-button uk-button-primary" ng-click="syncToEditor()">Update Editor from Source</button>
<button class="uk-button uk-button-danger" ng-click="clearContent()">Clear All</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.18/tinymce.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.10/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.10/dist/js/uikit-icons.min.js"></script>
<script>
// AngularJS App
angular.module('htmlEditorApp', ['ui.tinymce'])
.filter('toTrusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
.controller('EditorController', ['$scope', function ($scope) {
$scope.editorContent = '<p>Start editing...</p>';
$scope.tinymceOptions = {
height: 300,
plugins: 'code',
toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist outdent indent | code',
setup: function (editor) {
editor.on('keyup change', function () {
$scope.$apply();
});
}
};
$scope.syncToEditor = function () {
$scope.editorContent = document.getElementById('source-code').innerText;
};
$scope.clearContent = function () {
$scope.editorContent = '';
};
}]);
</script>
<footer class="uk-section uk-section-small uk-section-muted">
<div class="uk-container uk-text-center">
<p>© 2024 <a href="https://codenova.in" target="_blank">Codenova.in</a> - Crafted with passion by <strong>Ajay Kumar</strong>. All rights reserved.</p>
</div>
</footer>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<!-- End Please keep the Credits intact-->
</body>
</html>
How Does It Work?
Here’s a breakdown of how the HTML Editor Script works:
- Editor Panel: TinyMCE provides a user-friendly interface for writing and editing HTML code.
- Preview Panel: The preview panel displays live updates of the HTML code, so you can see exactly how your content will look.
- Source Code Panel: The source code panel reflects real-time changes in plain text format, making it easy to tweak your HTML code directly.
Conclusion
The HTML Editor Script for Blogger is an essential tool for bloggers who want more control over their content creation process. It’s easy to install, intuitive to use, and offers powerful features like live editing, previews, and source code updates.
With its clean design and advanced functionality, this script can transform your Blogger experience. Give it a try and see how it can simplify your workflow and enhance your content creation!
.jpg)
.jpg)
.jpg)